Differences

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

--- code:p5js:gestaltrule_09 [2025/03/20 08:08] – created 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>
+    <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 = [];
@@ Line 61: / Line 130: @@
   }
 }
+</code>