Bezier Quadratic animatie, 8 objecten in een vierkant

Bezier Quadratic animatie, 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 class "BezierQuadr" zie curven classes 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.

De (gele) controlepunten van objecten 1 t/m 4 staan op 7*n vanaf het x,y punt, en die van 5 t/m 8 staan op 15*n vanaf het x,y punt.

Zie ook de Bezier Quadratic curve constructor creator

 

let object = [];
function setup() {
  buttonR = createButton('reset');
  buttonR.position(20,30);buttonR.style('width','70px');
  buttonR.mouseClicked(buttonRAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,60);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 en controlepunt c1
object[0] = new BezierQuadr(x,y, x,y, x, y-7*n, color(235, 17, 17,  170));
object[1] = new BezierQuadr(x,y, x,y, x, y+7*n, color(0, 250, 17,   170));
object[2] = new BezierQuadr(x,y, x,y, x-7*n, y, color(0, 17, 255,   170));
object[3] = new BezierQuadr(x,y, x,y, x+7*n, y, color(235, 255, 17, 170));
object[4] = new BezierQuadr(x,y, x,y, x, y-15*n,color(0, 250, 17,   170));
object[5] = new BezierQuadr(x,y, x,y, x, y+15*n,color(235, 17, 17,  170));
object[6] = new BezierQuadr(x,y, x,y, x-15*n, y,color(235, 250, 17, 170));
object[7] = new BezierQuadr(x,y, x,y, x+15*n, y,color(0, 0, 255,    170));
}
 
function draw() {
  clear()
  background('rgba(255,255,255, 0)');
  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(){setup();}
function buttonDAction(){save('bezier_quadr_vierkant.png');}

Flevopink