Differences

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

--- extras:codikon:p5js:gestaltrule_09 [2025/07/06 07:34] – removed - external edit (Unknown date) 127.0.0.1
+++ extras:codikon:p5js:gestaltrule_09 [2025/07/06 07:34] (current) – ↷ Page moved from codikon:p5js:gestaltrule_09 to extras:codikon:p5js:gestaltrule_09 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>
+    <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>