circleGrowBW

let num = 5;

let size;

let margin = 10;

let durchMesserMin;

let gesamt;

let radii = []; // Array für die Radien der Kreise

let offsets = []; // Zeitversatz für jeden Kreis

let colors = []; // Array für die Graustufen der Kreise

let cycles = []; // Array, um den Zustand eines Kreises im Zyklus zu verfolgen

​

function setup() {

  createCanvas(400, 400);

  background(100);

  gesamt = num * num;

  size = (width - margin * 2) / num;

  durchMesserMin = size / gesamt;

​

  // Initialisiere alle Kreise

  for (let i = 0; i < num; i++) {

    for (let j = 0; j < num; j++) {

      let index = i * num + j;

      radii.push(durchMesserMin); // Alle Kreise starten mit minimaler Größe

      colors.push(random(50, 255)); // Zufällige Graustufe zwischen 50 und 255

      cycles.push(0); // Anfangszustand des Zyklus

​

      // Zeitversatz berechnen: schlangenartige Reihenfolge

      let offset;

      if (j % 7 === 0) {

        // Gerade Spalte: von oben nach unten

        offset = i + j * num;

      } else {

        // Ungerade Spalte: von unten nach oben

        offset = (num - 1 - i) + j * num;

      }

      offsets.push(offset * 10); // Zeitversatz basierend auf Index

    }

  }

}

​

function draw() {

  background(0);

​

  for (let i = 0; i < num; i++) {

    for (let j = 0; j < num; j++) {

      let index = i * num + j; // Index des aktuellen Kreises im Array

      let x = margin + size / 2 + j * size; // Bewegung in Spaltenrichtung

      let y = margin + size / 2 + i * size; // Bewegung in Zeilenrichtung

​

      // Berechnung der Wellenbewegung mit Zeitversatz

      let phase = frameCount/3 - offsets[index];

      let maxRadius = size; // Maximale Größe

      let valueA = sin(phase * 0.1);

      radii[index] = map(valueA, -1, 1, 0, maxRadius);

​

      // Zyklusüberprüfung: Neuer Farbwert nach vollständigem Zyklus

      if (valueA > 0 && cycles[index] === 0) {

        cycles[index] = 1; // Zyklus beginnt (Richtung: 0 → Max)

      } else if (valueA <= 0 && cycles[index] === 1) {

        cycles[index] = 0; // Zyklus endet (Richtung: Max → 0)

        colors[index] = random(50, 255); // Neue zufällige Farbe

      }

​

      // Kreis zeichnen

      stroke(255);

      strokeWeight(1);

      fill(colors[index]); // Kreis mit aktueller Graustufe füllen

      ellipse(x, y, radii[index], radii[index]);

    }

  }

}