Les 13b - roteren & opacity

---

Hieronder de code uit de tweede les:

let vier,vier2;
function setup() {
  //bepaal op welke manier rotate roteert
  angleMode(DEGREES);

  //bepaal hoe de rectangle getekend wordt
  rectMode(CENTER)
  createCanvas(windowWidth,windowHeight);
  background(255);

  //maak twee vierkanten
  vier = new Vierkant();
  vier2 = new Vierkant();
}

function draw() {
  //plaats hier de code die continue herhaald moet worden.
  background(249,20);

  //teken de vierkanten
  vier.teken();
  vier2.teken();
}

class Vierkant {
  constructor() {
    //bepaal de x, y, size, 
    this.x = random(100,width);
    this.y = random(100,height);
    this.s = random(50,100);
    //bepaal de rotation-positie (0º - 360º)
    //en snelheid
    this.r = random(360)
    this.rSpeed = random(0.1,5);
    //bepaal de noise-positie
    //en snelheid
    this.n = 0;
    this.nSpeed = random(0.0001,0.01);

    //bepaal de opacity
    this.alpha = 255;
  }
  teken() {
    //vul de rectangle en de stroke-kleur
    //opacity wordt langzaam minder
    fill(0,this.alpha--);
    stroke(0,this.alpha)

    //alles tussen push() en pop() wordt als canvas binnen
    //het canvas gezien.
    push();

    //creeër een nieuw nulpunt (in plaats van linksbovenin)
    translate(this.x*noise(this.n),this.y);
    //roteer relatief aan dat nieuwe nulpunt
    rotate(this.r+=this.rSpeed);
    //plaats het vierkant relatief aan dat nieuwe nulpunt
    rect(0,0,this.s);
    //tel nSpeed op bij de n-variabele
    this.n += this.nSpeed;
    pop();
    //kijk goed naar de reference om te begrijpen 
    //hoe noise, rotate, pop en push werken.
  }
}