Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5 Grundlagen Doppelte For-Loops


Doppelte For-Loops

So wenig Code für so viele Punkte …

P5

function setup() {
  createCanvas(960, 400);
  background(255);
  fill(0);
  noStroke();

  var r = 5; // Radius des Kreises
  var a = (2 * r) + 1; // Abstand = 2 * Radius + 1px;

  ellipseMode(RADIUS);

  // äußerer Loop für die senkrechte Wiederholung
  // innerer Loop für die waagrechte Wiederholung
  for (var y = a; y < height - a; y = y + a) {
    for (var x = a; x < width - a; x = x + a) {

      // umso größer y wird, desto heller werden die Kreise
      fill(0 + y/2);

      ellipse(x, y, r, r);
    }
  }
}

CodePen

Codepen-Sketch