Creative Technologies Lab | dokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
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.


<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let circles = [];
        let group1 = [];
        let group2 = [];
        let speedX = 2;
        let speedY = 1;

        function setup() {
            createCanvas(960, 600).parent("sketch-holder");
            for (let i = 0; i < 6; i++) {
                group1.push(new MovingCircle(random(100, 300), random(100, 300), true));
            }
            for (let i = 0; i < 6; i++) {
                group2.push(new MovingCircle(random(300, 500), random(100, 300), false));
            }
        }

        function draw() {
            background(240);
            for (let c of group1) {
                c.moveTogether();
                c.display(color(0, 102, 255));
            }
            for (let c of group2) {
                c.moveRandom();
                c.display(color(255, 102, 0));
            }
        }

        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);
            }
        }
    </script>
    <div id="sketch-holder"></div>
</body>
</html>


<code>

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

</code>