In diesem Tutorial erfahren Sie, wie Sie mit p5.js eine dynamische und farbenfrohe geometrische Animation erstellen. Diese Animation symbolisiert die Idee, dass „die Welt voller fabelhafter und unglaublicher Menschen ist, die wundervolle Dinge tun.“ Die Formen bewegen sich zufällig über die Leinwand, ändern die Farben und erzeugen einen optisch faszinierenden Effekt.
p5.js herunterladen:
Neues Projekt erstellen:
Beginnen wir mit dem Einrichten der Grundstruktur unserer p5.js-Skizze. Dazu gehört die Definition der Funktionen setup() und draw().
function setup() { createCanvas(windowWidth, windowHeight); noStroke(); // Disable stroke for the shapes } function draw() { background(30, 30, 60, 25); // Dark background with transparency }
Erklärung:
createCanvas(windowWidth, windowHeight);: Dadurch wird die Leinwandgröße so eingestellt, dass sie zu Ihrem Browserfenster passt.
noStroke();: Dies entfernt den Rand von den Formen, die wir erstellen werden.
Hintergrund(30, 30, 60, 25);: Dadurch wird die Hintergrundfarbe auf Dunkelblau mit etwas Transparenz eingestellt, wodurch ein nachlaufender Effekt für die Formen entsteht.
Jetzt fügen wir den Code hinzu, um zufällige Formen mit unterschiedlichen Farben, Positionen und Größen zu erstellen.
function draw() { background(30, 30, 60, 25); // Dark background with transparency for (let i = 0; i < 5; i++) { let x = random(width); let y = random(height); let size = random(20, 80); let colorR = random(255); let colorG = random(255); let colorB = random(255); let shapeType = random(['ellipse', 'rect', 'triangle']); fill(colorR, colorG, colorB, 150); // Set fill color with some transparency if (shapeType === 'ellipse') { ellipse(x, y, size, size); } else if (shapeType === 'rect') { rect(x, y, size, size); } else if (shapeType === 'triangle') { triangle(x, y, x + size, y, x + size / 2, y - size); } } }
Erklärung:
Randomisierte Variablen:
Formtypen:
Um sicherzustellen, dass sich die Leinwandgröße mit dem Fenster ändert, fügen Sie die folgende Funktion hinzu:
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
Das obige ist der detaillierte Inhalt vonErstellen einer dynamischen geometrischen Animation in ps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!