Differences

This shows you the differences between two versions of the page.

--- code:p5js:gestaltrule_09 [2025/03/20 09:05] – Felix Hardmood Beck
+++ code:p5js:gestaltrule_09 [2025/03/20 09:23] (current) – Felix Hardmood Beck
@@ Line 1: / Line 1: @@
+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>
@@ Line 12: / Line 15: @@
         function setup() {
-            createCanvas(1280, 600).parent("sketch-holder");
+            createCanvas(960, 600).parent("sketch-holder");
             for (let i = 0; i < 6; i++) {
                 group1.push(new MovingCircle(random(100, 300), random(100, 300), true));
@@ Line 61: / Line 64: @@
 </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>