Klik in bovenstaand venster
toetsen 1 t/m 4 de instance functies
toetsen 5 t/m 8 de statische functies

 

 

toets 1 ingedrukt instance functie "add"

 toets 1 ingedrukt instance functie "add" (regel 24)

 

 

toets 2 ingedrukt "sub" functie (regel 26)

toets 2 ingedrukt, "sub" functie (regel 26)

 

 

toets 3 ingedrukt den "mult" functie (regel 28)

toets 3 ingedrukt, "mult" functie (regel 28)

 

 

toets 5 ingedrukt, "div" functie (regel 31)

toets 5 ingedrukt, "div" functie (regel 30)

De vector methodes "add" , "sub" , "mult" en "div" gebruikt als statische en instance vector methodes.       

 terug naar de inleiding

Instance methodes "add" , "sub" en "mult" zijn methodes die de lengte en richting van een vector veranderen

toets 1  vector v1 opgeteld bij v2 maakt vector v1 langer en v1 krijgt een andere richtingen
toets 2  vector v1 afgetrokken van v2 maakt vector v1 korter en v1 krijgt een andere richting
toets 3  vector v1 vermenigvuldigd met 2 maakt vector v1 korter en de richting van v1 verandert niet
toets 4  vector v1 gedeeld door scalar 3 (zie "schets met div toegevoegd")
 

Statische methodes "add" , "sub" en "mult" Nu worden er nieuwe vectoren aangemaakt

toets 5  vector v3 is een nieuwe groene vector door add(v1,v2);
toets 6  vector v4 is een nieuwe blauwe vector door sub(v1,v2);
toets 7  vector v5 is een nieuwe licht blauwe vector door mult(v1,2); 

toets 8  vector v6 is een nieuwe paarse vector door div(v1,3); ook hier vector gedeeld door een scalar

schets met div(v1,v2); toegevoegd (regel  31 en 56)
Dit geeft de waarschuwing; p5.Vector.prototype.div: n is undefined or not a finite number.
In een nieuwere versie van p5.js verschijnt de waarschuwing p5.js:90448 p5.Vector.prototype.div: divide by 0.
Delen door 0 geeft dezelfde foutmelding maw v2 als argument van div wordt niet gezien. delen door een scalar lukt wel.
 
 
let x1; let y1; let x; let y; let n; let v1; let v2;
function setup() {
 
   createCanvas(windowWidth, windowHeight);
   x1 = width/2;
   y1 = height/2;
   x = 0;
   y = 0;
   n = height/20;
   ruitjespap = new Ruitjes(n, x1, y1);
 }
 
function draw() {
   background('#E6FBFF');
   ruitjespap.display();
 
   push();
   translate(width/2, height/2);
   v1 = createVector(2*n,-2*n); //zwart
   v2 = createVector(4*n,-2*n); //rood
  //voorbeelden met de instance methodes "add" , "sub" , "mult" en "div"
  //v1 opgeteld bij v2 maakt vector v1 langer en v1 krijgt een andere richtingen
   if(key == 1) { v1.add(v2);}
  //v1 afgetrokken van v2 maakt vector v1 korter en v1 krijgt een andere richting
   if(key == 2) { v1.sub(v2);}
  //v1 vermenigvuldigd met 2 maakt vector v1 korter en de richting van v1 verandert niet
   if(key == 3) { v1.mult(2);}
  //de vector v1 delen door v2 werkt niet, delen door een scalar werkt wel
   if(key == 4) { v1.div(3);}
 
  //voorbeelden van statische methodes. Nu worden er nieuwe vectoren aangemaakt
if(key == 5) {
   let v3 = p5.Vector.add(v1,v2); //v3 nieuwe groene vector door add(v1,v2)
   strokeWeight(4);
   stroke(0,255,0);
   line(0,0, v3.x, v3.y);
}
 
if(key == 6) {
   let v4 = p5.Vector.sub(v1,v2); //v4 nieuwe blauwe vector door sub(v1,v2);
   strokeWeight(4);
   stroke(0,0,255);6
   line(0,0, v4.x, v4.y);
}
 
if(key == 7) {
   let v5 = p5.Vector.mult(v1,2); //v5 nieuwe licht blauwe vector door mult(v1,2)
   strokeWeight(4);
   stroke(0,255,255);
   line(0,0, v5.x, v5.y);
}
 
if(key == 8) {
   let v6 = p5.Vector.div(v1,3); //delen door v2 werkt niet,delen door een schalar werkt wel
   strokeWeight(14);
   stroke(255,0,255);
   line(0,0, v6.x, v6.y);
}
 
if(key == 0) { loop();}
 
   strokeWeight(4);
   stroke(0);
   line(x,y, v1.x, v1.y); //zwarte lijn
   stroke(255,0,0);
   line(x,y, v2.x, v2.y); //rode lijn
   pop();
 }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


toets 5 "add" functie, statisch

toets 5 "add" functie, statisch

 

 

 

toets 6"sub" functie, statisch

toets 6 "sub" functie, statisch

 

 

toets 7  "mult" statisch

toets 7  "mult" functie statisch

 

 

toets 8 ingedrukt "div" functie

toets 8 ingedrukt "div" functie