Startseite Skripte für das Wintersemester 2018/19 Interaction Design P5 Grundlagen Rechtecke


Rechtecke

Rechtecke werden normalerweise von der linken, oberen Ecke aus gezeichnet, man kann dies aber mit rectMode umschalten…

P5

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

  background(255);

  rectMode(CORNER);
  noFill();
  stroke(255,0,0);
  strokeWeight(2);

  // Rechteck von der linken, oberen Ecke aus gezeichnet
  rect(10,10,50,50);

  // damit werden auch die Rechtecke von der Mitte aus gezeichnet
  rectMode(CENTER);

  strokeWeight(2);
  stroke(0);
  rect(width/2,height/2, 600, 350);

  // keine Kontur-Linie
  noStroke();

  // dunkle, graue Fläche
  fill(50);
  rect(width/2,height/2, 500, 300);

  // graues Rechteck
  fill(150);
  rect(width/2,height/2, 250, 250);
}

CodePen

Codepen-Sketch