bezier structuur

De schets "Bezier structuur" in p5.js met de WEBGL mode. terug naar de inleiding

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

de animatie in fullscreen

De schets maakt gebruik van 4 objecten van de p5.js class "BezierQuadrCub" en de superclass "Curven"

De schets bestaat uit 4 bezierquadratic cubic objecten, waarvan object1 is samengesteld mbv

de Bezierquadratic cubic curve, constructor creator

Met deze constructor creator kan je de 3 ankerpunten (rood, groen en blauw) en de controlepunten (geel, paars en bruin)

in een gewenste positie plaatsen.

De coordinaten van deze punten vervolgens als argumenten in de constructor van de schets plaatsen

De overige 3 objecten zijn gespiegeld in de x en y as.

 

//Objecten declareren, dit is niet verplicht!
let object1, object2;
let object3, object4;
//De variabelen hier declareren omdat ze in de draw functie worden gebruikt
let x; let y; let n;
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);
x = 0; y = 0; n = height/20;
  object1 = new BezierQuadrCub(x-7*n,y-7*n, x,y-2*n, x,y+5*n,
                                //c1=geel, c2=paars en c3=bruin
                                x,y-4*n, x-7*n,y-5*n, x-7*n,y,
                                color(237, 17, 17,200));
 
                                //a1=rood, a2=groen en a3=blauw
   object2 = new BezierQuadrCub(x+7*n,y-7*n, x,y-2*n, x,y+5*n,
                                //c1=geel, c2=paars en c3=bruin
                                x,y-4*n, x+7*n,y-5*n, x+7*n,y,
                                color(273, 17, 17,200));
 
                                //a1=rood, a2=groen en a3=blauw
   object3 = new BezierQuadrCub(x+7*n,y+7*n, x,y+2*n, x,y-5*n,
                                //c1=geel, c2=paars en c3=bruin
                                x,y+4*n, x+7*n,y+5*n, x+7*n,y,
                                color(237, 17, 17,200));
 
                                //a1=rood, a2=groen en a3=blauw
   object4 = new BezierQuadrCub(x-7*n,y+7*n, x,y+2*n, x,y-5*n,
                                //c1=geel, c2=paars en c3=bruin
                                x,y+4*n, x-7*n,y+5*n, x-7*n,y,
                                color(273, 17, 17,200));
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  strokeWeight(2);
  object1.display(); object2.display(); object3.display(); object4.display();
 
  if (key == 's' || key == 'S') {  }
  else {
  object1.ya2Up();   object1.ya3Down(); object2.ya2Up();   object2.ya3Down();
  object3.ya3Down(); object3.ya2Up();   object4.ya3Down(); object4.ya2Up();
  if (frameCount > 600)
  {
  object1.ya1= y+7*n; object2.ya1= y+7*n;
  object3.ya1= y-7*n; object4.ya1= y-7*n;
  }
  if (frameCount > 600 && frameCount < 1200)
   {
  object1.ya1= y-7*n; object2.ya1= y-7*n;
  object3.ya1= y+7*n; object4.ya1= y+7*n;
  }
  if (frameCount > 1200) frameCount = 0;
  }
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonRAction(){setup();}
function buttonDAction(){save('bezier_quadr_cub_structuur.png');}

Flevopink