Einführung

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.

Schritt 1: Einrichten Ihrer Umgebung

1. p5.js herunterladen:

   • Gehen Sie zur p5.js-Website und laden Sie die neueste Version von p5.js herunter.
   • Alternativ können Sie den Online-Editor p5.js editor.p5js.org verwenden, mit dem Sie Ihren Code direkt in Ihrem Browser schreiben und ausführen können.

2. Neues Projekt erstellen:

   • Wenn Sie den Online-Editor verwenden, erstellen Sie eine neue Skizze, indem Sie oben links auf „Neu“ klicken.
   • Wenn Sie lokal programmieren, erstellen Sie eine neue HTML-Datei und verknüpfen Sie die p5.js-Bibliothek.

Schritt 2: Grundstruktur schreiben

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
}

Erläuterung:

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 gesetzt, wodurch ein nachlaufender Effekt für die Formen entsteht.

Schritt 3: Dynamische geometrische Formen hinzufügen

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 



Erläuterung:

• Randomisierte Variablen:

  • x und y bestimmen die Position jeder Form auf der Leinwand.
  • Größe steuert die Größe jeder Form.
  • colorR, colorG, colorB generieren Zufallswerte für die roten, grünen und blauen Komponenten der Füllfarbe.
  • fill(colorR, colorG, colorB, 150);: Dies legt die Füllfarbe mit einer leichten Transparenz fest.

• Formtypen:

  • ellipse(x, y, size, size);: Zeichnet einen Kreis oder eine Ellipse.
  • rect(x, y, size, size);: Zeichnet ein Quadrat oder Rechteck.
  • Triangle(x, y, x size, y, x size / 2, y - size);: Zeichnet ein Dreieck.

Schritt 4: Die Animation responsiv gestalten

Um sicherzustellen, dass sich die Größe der Leinwand mit dem Fenster ändert, fügen Sie die folgende Funktion hinzu:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Schritt 5: Ausführen Ihrer Skizze

• Wenn Sie den Online-Editor p5.js verwenden, klicken Sie einfach auf die Schaltfläche „Play“, um Ihre Animation anzusehen.
• Wenn Sie lokal programmieren, öffnen Sie Ihre HTML-Datei in einem Webbrowser, um die Animation anzuzeigen.