Hier ein etwas komplexeres Beispiel. Das ist schon recht knifflig und es ist nicht schlimm, wenn man das nicht auf Anhieb versteht. Probiert es trotzdem, nur so lernt man Programmieren. Am Anfang stehen 3 Variablen, die den Effekt steuern. Spielt damit rum und probiert mal verschiedene Werte aus. Im Data Verzeichnis liegen zwei Vektorgrafiken, test1.svg und test2.svg. Probiert beide aus und macht auch mal eigene Vektorgrafiken.
Herunterladen SVG_Maus
Das Programm zeichnet die Grafik mehrmals in einem Raster. Dafür sind die beiden for-Schleifen da. Innerhalb der Schleife wird der Abstand der Maus zu jedem der Rasterpunkte berechnet. dist( x1, y1, x2, y2 ) berechnet den Abstand zweier Punkte.
Der Abstand wird dann durch die größtmögliche Entfernung (maxDist) geteilt, die im Fenster zwischen zwei Punkte vorkommen kann, nämlich die Entfernung zwischen links oben und rechts unten dist( 0, 0, width, height). Dieser Wert, der immer zwischen 0 und 1 liegt, wird von 1 abgezogen, weil wir das “Gegentil” vom Abstand, nämlich die Nähe wollen. Die Funktion “pos( naehe, 4 ) multipliziert naehe 4 mal mit sich selbst, das macht den Effekt noch stärker.
Dann wird die Zeichenposition an die Rasterposition gesetzt (translate). Abhängig vom Maus-Rasterabstand wird dann das Koordinatensystem rotiert und skaliert und der Shape gezeichnet.
int gridSize = 70; // Raster-Abstand
float baseSize = 0.01; // Minimale Größe der SHapes
float growFactor = 0.2; // Wachstums-Faktor für Maus-Skalierung
PShape s;
float maxDist = 0;
void setup() {
size( 800, 600, P2D );
smooth();
s = loadShape( "test1.svg" ); // Shape laden
maxDist = dist( 0, 0, width, height); // Länge der Fenster-Diagonale
}
void draw() {
background(16);
noStroke();
// Zwei verschachtelte Schleifen für x und y Richtung
for( int x = 0; x < width; x += gridSize) {
for( int y = 0; y < height; y += gridSize) {
// x und y sind die Koordinaten des Rasters
float distance = dist( x, y, mouseX, mouseY ); // Abstand zwischen Maus und Raster Punkt
float naehe = 1 - ( distance / maxDist ); // Nähe der Maus zum aktuellen Punkt von 0-1
naehe = pow( naehe, 4 ); // Power Funktion, macht den Effekt stärker
pushMatrix(); // Matrix speichern
translate( x, y); // Koordinatensystem zur aktuellen Position verschieben
scale( baseSize + naehe * growFactor ); // Größe abhängig von der Nähe zur Maus skalieren
rotate( naehe * PI * 2 ); // Rotation abhängig von der Nähe zur Maus
shape(s); // Shape zeichnen
popMatrix(); // Matrix für nächsten Durchlauf wiederherstellen
}
}
}