Creative Technologies Lab | dokuWiki

Im unteren Beispiel bewegt sich eine Gruppe von Kreisen synchron in eine gemeinsame Richtung. Unabhängig davon bewegen sich andere Kreise auf andere Art und Weise. Sich gleich bewegende Kreise werden als eine Einheit wahrgenommen.

let circles = [];
let group1 = [];
let group2 = [];
let speedX = 2;
let speedY = 1;

function setup() {
  createCanvas(600, 400);
  
  // Gruppe 1: Bewegt sich synchron (gemeinsames Schicksal)
  for (let i = 0; i < 6; i++) {
    group1.push(new MovingCircle(random(100, 300), random(100, 300), true));
  }
  
  // Gruppe 2: Bewegt sich zufällig
  for (let i = 0; i < 6; i++) {
    group2.push(new MovingCircle(random(300, 500), random(100, 300), false));
  }
}

function draw() {
  background(240);
  
  // Zeichne und bewege die Gruppen
  for (let c of group1) {
    c.moveTogether();
    c.display(color(0, 102, 255)); // Blau für gemeinsame Bewegung
  }
  
  for (let c of group2) {
    c.moveRandom();
    c.display(color(255, 102, 0)); // Orange für zufällige Bewegung
  }
}

class MovingCircle {
  constructor(x, y, grouped) {
    this.x = x;
    this.y = y;
    this.grouped = grouped;
  }
  
  moveTogether() {
    this.x += speedX;
    this.y += speedY;
    if (this.x > width || this.y > height) {
      this.x = random(100, 300);
      this.y = random(100, 300);
    }
  }
  
  moveRandom() {
    this.x += random(-2, 2);
    this.y += random(-2, 2);
  }
  
  display(col) {
    fill(col);
    noStroke();
    ellipse(this.x, this.y, 20);
  }
}