Differences

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

--- code:p5js:gestaltrule_06 [2025/03/20 09:14] – created Felix Hardmood Beck
+++ code:p5js:gestaltrule_06 [2025/03/20 09:19] (current) – Felix Hardmood Beck
@@ Line 1: / Line 1: @@
+Im unteren Beispiel wird ein prägnantes Element gezeigt: Ein zufälliger Kreis hebt sich durch Farbe (Rot) und Größe von den anderen ab. Das Ergebniss ist folgender Wahrnehmungseffekt: Das abweichende Element wird sofort wahrgenommen, während die anderen eine gleichförmige Struktur bilden.
 <html>
 <head>
@@ Line 4: / Line 8: @@
 </head>
 <body>
+    <div id="sketch-holder"></div>
     <script>
-function setup() {
+        function setup() {
-  createCanvas(600, 400);
+            let canvas = createCanvas(600, 400);
-  noLoop();
+            canvas.parent("sketch-holder");
-}
+            noLoop();
+        }
-function draw() {
-  background(240);
-  let cols = 10;
-  let rows = 6;
-  let spacingX = width / (cols + 1);
-  let spacingY = height / (rows + 1);
-  let specialIndex = int(random(cols * rows)); // Ein zufällig abweichendes Objekt
-  let count = 0;
-  for (let i = 0; i < cols; i++) {
-    for (let j = 0; j < rows; j++) {
-      let x = (i + 1) * spacingX;
-      let y = (j + 1) * spacingY;
-      if (count === specialIndex) {
-        fill(255, 0, 0); // Hebt sich in Farbe ab (prägnantes Element)
-        ellipse(x, y, 40);
-      } else {
-        fill(100);
-        ellipse(x, y, 30);
-      }
-      count++;
-    }
-  }
-}
+        function draw() {
+            background(240);
+            let cols = 10;
+            let rows = 6;
+            let spacingX = width / (cols + 1);
+            let spacingY = height / (rows + 1);
+            let specialIndex = int(random(cols * rows)); // Ein zufällig abweichendes Objekt
+            let count = 0;
+            for (let i = 0; i < cols; i++) {
+                for (let j = 0; j < rows; j++) {
+                    let x = (i + 1) * spacingX;
+                    let y = (j + 1) * spacingY;
+                    if (count === specialIndex) {
+                        fill(255, 0, 0); // Hebt sich in Farbe ab (prägnantes Element)
+                        ellipse(x, y, 40);
+                    } else {
+                        fill(100);
+                        ellipse(x, y, 30);
+                    }
+                    count++;
+                }
+            }
+        }
     </script>
-    <div id="sketch-holder"></div>
 </body>
 </html>
@@ Line 76: / Line 80: @@
   }
 }
 </code>