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');
}
}