Bezier Cubic curven vormen een zeshoek in p5.js
Met toets "2" verandert de lengte van de horizontale lijn van de blauwe curve.
Met toets "3" verandert de lengte van de horizontale lijn van de gele curve.
Met toets "1" maken deze horizontale lijnen een op en neer gaande beweging.
Het moment van indrukken van toetsen "2" en "3" is mede bepalend voor het gedrag van de animatie.
want als de horizontale 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.
Een animatie met zes 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;
let object4, object5, object6;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
//fullScreen();
const x = 0;
const y = 0;
const n = height/4;
const hn = sqrt(3*n*n/4);
//ankerpunten: a1=rood, a2=groen,controlepunten: c1=geel en c2=paars
object1 = new BezierCub(x-n/2,y+hn, x-n,y, x-2*n,y+2*n, x-3*n,y+n,
color(235, 17, 17,50));
object2 = new BezierCub(x-n,y, x-n/2,y-hn, x-3*n,y-n, x-2*n,y-2*n,
color(0, 250, 17, 50));
object3 = new BezierCub(x-n/2,y-hn, x+n/2,y-hn, x+2*n,y-2*n, x-2*n,y-2*n,
color(0, 17, 255, 50));
object4 = new BezierCub(x+n/2,y-hn, x+n,y, x+2*n,y-2*n, x+3*n,y-n,
color(30, 208, 250, 50));
object5 = new BezierCub(x+n,y, x+n/2,y+hn, x+3*n,y+n, x+2*n,y+2*n,
color(250, 199, 30,50));
object6 = new BezierCub(x+n/2,y+hn, x-n/2,y+hn, x-2*n,y+2*n, x+2*n,y+2*n,
color(235, 255, 17,50));
}
function draw() {
background("#E6FBFF");
strokeWeight(2);
if (key == '2') {
object2.xya2LiBo();
object3.xya1LiBo();
object3.xya2ReBo();
object4.xya1ReBo();
}
if (key == '3') {
object5.xya2ReOn();
object6.xya1ReOn();
object6.xya2LiOn();
object1.xya1LiOn();
}
if (key == '1') {
}
object1.display();
object1.xa2Re();
object1.ya1Up();
object2.display();
object2.xa1Re();
object2.ya2Down();
object3.display();
object3.ya1Down();
object3.ya2Down();
object4.display();
object4.ya1Down();
object4.xa2Li();
object5.display();
object5.xa1Li();
object5.ya2Up();
object6.display();
object6.ya1Up();
object6.ya2Up();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function keyPressed() {
if (key == 's') {
noLoop();
}
if (key == 'r') {
loop();
}
if (key == 'd') {
save('bezier_cub_zeshoek.png');
}
}