Maak hier onder de tekening en sla deze op met de "d" of "D" toets

 

lijnen animatie met positie en muisvector.                 terug naar de inleiding

Maak een lijnen animatie in bovenstaand canvas

toets "1"  lijnen zijn zwart , toets "2" lijnen zijn groen, toets "3" lijnen zijn blauw, toets "4" lijnen zijn rood

toets "5" lijnen tekenen is uitgeschakeld.  toets "0" wissen van de schets

toetsen "d" of "D" downloaden van de tekening

regel 15 of regel 16 ingeschakeld , de vectoren hebben een vaste lengte van width/6, zo is de animatie cirkelvormig

 

 
 function setup() {
   createCanvas(windowWidth, windowHeight);
   background('#E6FBFF');
 }
 
 function draw() {
   //"pos" is een vector in het midden van het canvas met lengte 0
  let pos = createVector(width/2,height/2);
  let mouse = createVector(mouseX,mouseY);
    //een voorbeeld van de statisch p5.Vector methode "sub"
    //nieuwe vector v wordt aangemaakt die de muispositie volgt
  let v = p5.Vector.sub(mouse,pos)
   translate(width/2, height/2);
//   v.setMag(width/6);
//   v.normalize().mult(width/6);
   strokeWeight(1);
   noStroke();
   if (key == 1) {stroke(0);}       // zwarte lijn
   if (key == 2) {stroke(0,255,0);} // groene lijn
   if (key == 3) {stroke(0,0,255);} // blauwe lijn
   if (key == 4) {stroke(255,0,0);} // rode lijn
   if (key == 5) {noStroke();}      // lijnen tekenen uitgeschakeld
   if (key == 0) {setup();}
   line(0,0, v.x, v.y);
 }
 
 function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function keyPressed() {
 if (key == 'd' || key == 'D'){
    save('lijnen_animatie.png');
  }
}