Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5, Teil 2 Zufällige Linien


Zufällige Linien

Klickt auf den Sketch: Jedesmal wird die frameRate erhöht…

P5

// um den Wert "a" schwanken die x-Werte der Linien
// und erzeugen so eine zufällige Positionierung
var a = 15;

var fr = 5; // die Framerate

function setup() {
  createCanvas(960, 300);
  frameRate(fr);
}

// dies läuft immer wieder ab
// abhängig von der "frameRate) dauert dies unterschiedlich lang
function draw(){
  background(0);

  // for-loop, der ganze Breite des Sketches berücksichtigt
  for (x = a; x < width -a; x = x + a) {

    //rgb-Werte von 50 bis 255; durch "int" immer ganze Zahlen
    stroke(int(random(50,255)),int(random(50,255)),int(random(50,255)));

    // Strichstärke zwischen 3 und 10
    strokeWeight(random(3,10));

    // linie, die zufällig etwas "schwankt"
    line(x + random(-a, a), 10, x + random(-a, a), height-10);
  }
}

// bei MouseClicken wird die Framerate erhöht
function mousePressed(){
  fr = fr + 5;
  frameRate(fr);
}

Überlegt mal, wie der Sketch-Code aussehen müsste, dass Ihr bei mousePressed() ein PNG generiert – weil Euch z.B. das entstandene Muster so gut gefällt…