Startseite Skripte für das Wintersemester 2017/18 Interaction Design P5 Grundlagen Wiederholungen mit Variablen


Wiederholungen mit Variablen

Die Linien sind immer identisch, sollen aber um jeweils 50px nach rechts verschoben werden…

P5

function setup() {
  createCanvas(960, 400);
  background(255);
  strokeWeight(3);

  // Darstellung mit EINER Variable für den Abstand
  // einfacher und übersichtlicher zu schreiben:

  var a = 50; // Abstand zwischen den Linien

  // durch das Hinzufügen von Mehrfachen des Abstands a
  // übernimmt der Computer das Rechnen…

  // 1. Linie (x-Wert + 0x Abstand);
  line (50 + (0 * a), 60, 50 + (0 * a), 350);

  // 2. Linie (x-Wert + 1x Abstand)
  line (50 + (1 * a), 60, 50 + (1 * a), 350);

  // 3. Linie (x-Wert + 2x Abstand)
  line (50 + (2 * a), 60, 50 + (2 * a), 350);

  // 4. Linie (x-Wert + 3x Abstand)
  line (50 + (3 * a), 60, 50 + (3 * a), 350);

  // 5. Linie (x-Wert + 4x Abstand)
  line (50 + (4 * a), 60, 50 + (4 * a), 350);

  // 6. Linie (x-Wert + 5x Abstand)
  line (50 + (5 * a), 60, 50 + (5 * a), 350);
}

Das ist doch jetzt übersichtlicher und besser lesbar, oder? Und es wird deutlicher sichtbar, was gleich bleibt und was sich ändert…

CodePen

Codepen-Sketch