Bezier Cubic animatie, 8 objecten in een vierkant

Bezier cubic animatie met 8 objecten in een vierkant. terug naar de inleiding

Met de "s" toets stoppen de bewegingen met iedere andere toets starten de bewegingen weer.

de schets maakt gebruik van de p5.js classes "BezierCub" en de superclass "Curven"

De ankerpunten van de objecten bevinden zich bij het starten van de animatie in het x,y punt.

De ankerpunten van objecten 1 t/m 4 bewegen zich diagonaal naar buiten, en die van 5 t/m 8 bewegen zich diagonaal naar binnen.

Zie ook de Bezier Cubic curve constructor creator.

 

 
//Objecten declareren, dit is niet verplicht!
let object = []; let ca = 10; let cb = 15;
function setup() {
  buttonR = createButton('reset: ca=10, cb=5');
  buttonR.position(20,30); buttonR.style('width','150px');
  buttonR.mouseClicked(buttonRAction);
  buttonR1 = createButton('reset: ca=10, cb=15');
  buttonR1.position(20,60); buttonR1.style('width','150px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset: ca=5, cb=25');
  buttonR2.position(20,90); buttonR2.style('width','150px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,120);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
createCanvas(windowWidth, windowHeight, WEBGL);
let x = 0; let y = 0; let n = height/30;
             //ankerpunten a1 en a2 controlepunt c1 en         c2
 object[0] = new BezierCub(x,y, x,y, x-ca*n,y-ca*n, x+ca*n,y-ca*n,color(235,17,17,150));
 object[1] = new BezierCub(x,y, x,y, x-ca*n,y+ca*n, x+ca*n,y+ca*n,color(0,250,17,150));
 object[2] = new BezierCub(x,y, x,y, x-ca*n,y-ca*n, x-ca*n,y+ca*n,color(0,17,255,150));
 object[3] = new BezierCub(x,y, x,y, x+ca*n,y-ca*n, x+ca*n,y+ca*n,color(235,255,17,150));
 object[4] = new BezierCub(x,y, x,y, x-cb*n,y-cb*n, x+cb*n,y-cb*n,color(0,250,17,150));
 object[5] = new BezierCub(x,y, x,y, x+cb*n,y+cb*n, x-cb*n,y+cb*n,color(235,17,17,150));
 object[6] = new BezierCub(x,y, x,y, x-cb*n,y-cb*n, x-cb*n,y+cb*n,color(235,250,17,150));
 object[7] = new BezierCub(x,y, x,y, x+cb*n,y+cb*n, x+cb*n,y-cb*n,color(0,0,255,150));
}
 
function draw() {
  clear()
  background('rgba(255,255,255, 0)');
  strokeWeight(2);
  strokeWeight(2);
  for (let i = 0; i<8; i++) {object[i].display()}
 
  if (key =='s' || key =='S') { }
  else  {
  object[0].xya1LiBo(); object[0].xya2ReBo();
  object[1].xya1LiOn(); object[1].xya2ReOn();
  object[2].xya1LiBo(); object[2].xya2LiOn();
  object[3].xya1ReBo(); object[3].xya2ReOn();
  object[4].xya2ReOn(); object[4].xya1LiOn();
  object[5].xya1ReBo(); object[5].xya2LiBo();
  object[6].xya2ReOn(); object[6].xya1ReBo();
  object[7].xya1LiOn(); object[7].xya2LiBo();
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
function buttonRAction() {ca = 10; cb = 5; setup();}
function buttonR1Action(){ca = 10; cb = 15;setup();}
function buttonR2Action(){ca = 5;  cb = 25;setup();}
function buttonDAction(){save('bezier_cubic_vierkant.png');}

Flevopink