Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools

Trace: • rapid-prototyping • kursbeschreibung • experience-prototyping • dti-2025 • hieroglyphen • about • kombinatorik • possible_topics • kurs_beschreibung • design-process
extras:codikon:p5js:gestaltrule_06

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
extras:codikon:p5js:gestaltrule_06 [2025/07/06 07:34] – removed - external edit (Unknown date) 127.0.0.1extras:codikon:p5js:gestaltrule_06 [2025/07/06 07:34] (current) – ↷ Page moved from codikon:p5js:gestaltrule_06 to extras:codikon:p5js:gestaltrule_06 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>
 +    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
 +</head>
 +<body>
 +    <div id="sketch-holder"></div>
 +    <script>
 +        function setup() {
 +            let canvas = createCanvas(600, 400);
 +            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++;
 +                }
 +            }
 +        }
 +    </script>
 +</body>
 +</html>
 +
 +
 +<code>
 +
 +function setup() {
 +  createCanvas(600, 400);
 +  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++;
 +    }
 +  }
 +}
 +
 +
 +</code>
 +