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');
}
}