Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5 Grundlagen Zeichnen von Punkten und Linien


Zeichnen von Punkten und Linien

Die Angabe zur Strichfarbe „stroke“ ändert jeweils die Elemente, die unterhalb davon stehen…

P5

function setup() {
  createCanvas(960, 400);

  background(0);

  // 1px starker Strich
  strokeWeight(1);

  // Strichfarbe: rot
  stroke(255,0,0);

  // Punkt in der Mitte des Sketch, fast nicht zu sehen!
  // genau in der Mitte des Sketches
  point(width/2, height/2);

  // waagrechte Linie oben
  // 1. Wert = waagrechte Position des Anfangspunktes
  // 2. Wert = senkrechte Position des Anfangspunktes

  // 3. Wert = waagrechte Position des Endpunktes
  // 4. Wert = senkrechte Position des Endpunktes
  line(10, 10, width-10, 10);

  // waagrechte Linie unten
  line(10, height-10, width-10, height-10);

  // Strichfarbe: grün
  stroke(0,255,0);

  // senkrechte Linie links
  line(50, 20, 50, height-20);

  // senkrechte Linie rechts
  line(width-50, 20, width-50, height-20);

  // Strichfarbe: blau
  stroke(0,0,255);

  // Linienstärke ändern
  strokeWeight(4);

  // dicker Strich  etwas oberhalb des Punktes
  line(width/2-40,height/2-40,width/2+40,height/2-40);
}

CodePen

Codepen-Sketch