Creative Technologies Lab | dokuWiki

This is an old revision of the document!

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);
  }
}