blackSquares

let squares = []; // Array für alle Quadrate

let maxSquares = 150; // Maximale Anzahl der Quadrate

let lifespan = 40; // Lebensdauer eines Quadrats in Frames

​

function setup() {

  createCanvas(800, 800);

  background(0);

}

​

function draw() {

  background(random(0, 40), 20); // Schwarzer Hintergrund mit leichter Transparenz

  // Neue Quadrate hinzufügen, wenn die maximale Anzahl nicht erreicht ist

  if (squares.length < maxSquares) {

    squares.push(new Square());

  }

​

  // Alle Quadrate aktualisieren und zeichnen

  for (let i = squares.length - 1; i >= 0; i--) {

    squares[i].update();

    squares[i].display();

​

    // Entferne das Quadrat, wenn seine Lebensdauer abgelaufen ist

    if (squares[i].isDead()) {

      squares.splice(i, 1);

    }

  }

}

​

// Klasse für ein Quadrat

class Square {

  constructor() {

    this.x = random(width); // Zufällige X-Position

    this.y = random(height); // Zufällige Y-Position

    this.size = random(5, 220); // Zufällige Größe

    this.alpha = random(100, 255); // Starttransparenz

    this.lifespan = lifespan; // Lebensdauer in Frames

  }

​

  // Aktualisiere die Lebensdauer und Transparenz

  update() {

    this.lifespan--;

    this.alpha = map(this.lifespan, 0, lifespan, 0, 255);

  }

​

  // Zeichne das Quadrat

  display() {

    noStroke();

    fill(255, this.alpha); // Weiß mit Transparenz

    rectMode(CENTER);

    rect(this.x, this.y, this.size, this.size);

  }

​

  // Prüfe, ob das Quadrat "tot" ist

  isDead() {

    return this.lifespan <= 0;

  }

}