Bezier Cubic curven vormen een achthoek  in p5.js

Met toets "2" verandert de lengte van de bovenste horizontale lijn.
Met toets "3" verandert de lengte van de ondererste horizontale lijn
Met toets "4" verandert de lengte van de linker verticale lijn

Met toets "5" verandert de lengte van de rechter verticale lijn.

 
Met toets "1" maken deze horizontale lijnen een beweging in y richting en de verticale lijnen een beweging in x richting
Het moment van indrukken van toetsen "2", "3", "4" en "5" is mede bepalend voor het gedrag van de animatie.

want als de horizontale en verticale lijnen de randen raken gaan ze zich schuin omhoog en schuin omlaag bewegen.

Met de "s" toets stopt en met de "r" toets starten de bewegingen.  Met de "d" toets kan je een afbeelding  van de animatie downloaden.

Met de "c" toets wordt de animatie gereset.

 
 
Een animatie met acht  Bezier Cubic curven.             terug naar de inleiding                     ga naar de animatie in fullScreen():
 
De schets maakt gebruik van objecten van de class   "BezierCub"     en    de  superclass  "Curven"    met alle snelheden = 2
 

let object1, object2, object3, object4; 
let object5, object6, object7, object8; 
 
function setup() { 
createCanvas(windowWidth, windowHeight, WEBGL); 
 const x = 0, y = 0; 
 const n = height/10; 
    //ankerpunten:       a1=rood, a2=groen,controlepunten: c1=geel en c2=paars 
 object1 = new BezierCub(x-n/2,y+3*n/2,  x-3*n/2,y+n/2, x-2*n,y+3*n,x-4*n,y+3*n, 
                        color(235, 17, 17,50)); 
 
 object2 = new BezierCub(x-3*n/2,y+n/2,  x-3*n/2,y-n/2, x-4.5*n,y+n/3,x-4.5*n,y-n/2, 
                        color(0, 250, 17, 50)); 
 
 object3 = new BezierCub(x-3*n/2,y-n/2,  x-n/2,y-3*n/2, x-4*n,y-3*n,  x-2*n,y-3*n, 
                        color(255, 255, 0, 50)); 
 
 object4 = new BezierCub(x-n/2,y-3*n/2,  x+n/2,y-3*n/2, x-n/2,y-4.5*n,x+n/2,y-4.5*n, 
                        color(30, 208, 250, 50)); 
 
 object5 = new BezierCub(x+n/2,y-3*n/2,  x+3*n/2,y-n/2, x+2*n,y-3*n,  x+4*n,y-3*n, 
                        color(235, 17, 17,50)); 
 
 object6 = new BezierCub(x+3*n/2,y-n/2,  x+3*n/2,y+n/2, x+4.5*n,y-n/2, x+4.5*n,y+n/3, 
                        color(0,250,17,50)); 
 
 object7 = new BezierCub(x+3*n/2,y+n/2,  x+n/2,y+3*n/2, x+4*n,y+3*n, x+2*n,y+3*n, 
                        color(255,255,0,50)); 
 
 object8 = new BezierCub(x+n/2,y+3*n/2, x-n/2,y+3*n/2, x+n/2,y+4.5*n,x-n/2,y+4.5*n, 
                        color(30, 208, 250, 50)); 
 
} 
 
function draw() { 
 background("#E6FBFF"); 
 strokeWeight(2); 
 if (key == '2') { 
     object3.xya2LiBo(); 
     object4.xya1LiBo(); 
     object4.xya2ReBo(); 
     object5.xya1ReBo(); 
 } 
 
  if (key == '3') { 
     object7.xya2ReOn(); 
     object8.xya1ReOn(); 
     object8.xya2LiOn(); 
     object1.xya1LiOn(); 
  } 
 
   if (key == '4') { 
     object1.xya2LiOn(); 
     object2.xya1LiOn(); 
     object2.xya2LiBo(); 
     object3.xya1LiBo(); 
  } 
 
  if (key == '5') { 
     object5.xya2ReBo(); 
     object6.xya1ReBo(); 
     object6.xya2ReOn(); 
     object7.xya1ReOn(); 
 } 
 
   if (key == '1') { 
 
  } 
 
   object1.display(); 
   object1.xa2Li(); 
   object1.ya1Down(); 
 
   object2.display(); 
   object2.xa1Li(); 
   object2.xa2Li(); 
 
   object3.display(); 
   object3.xa1Li(); 
   object3.ya2Up(); 
 
   object4.display(); 
   object4.ya1Up(); 
   object4.ya2Up(); 
 
   object5.display(); 
   object5.ya1Up(); 
   object5.xa2Re(); 
 
   object6.display(); 
   object6.xa1Re(); 
   object6.xa2Re(); 
 
   object7.display(); 
   object7.xa1Re(); 
   object7.ya2Down(); 
 
   object8.display(); 
   object8.ya1Down(); 
   object8.ya2Down(); 
 } 
 
 function windowResized() { 
   resizeCanvas(windowWidth, windowHeight); 
 } 
 
function keyPressed() { 
 if (key == 's') { 
 noLoop(); 
 } 
 
 if (key == 'r') { 
 loop(); 
 } 
 
 if (key == 'd'){ 
  save('bezier_cub_achthoek.png'); 
 } 
}