De schets Bezier Quadratic Cubic "Bezier chaos" p5.js in de WEBGL mode. terug naar de inleiding ga naar de animatie
De schets maakt gebruik van de constructor functie BezierQuadrCub. Je kan in de schets geen object variabelen aanroepen !!
Het kunstwerk heet "Bezier Chaos". in fullScreen. Ergens is er in de chaos toch structuur te ontdekken.
Met de "s" toets stoppen, en met de "r" toets starten de bewegingen weer.
let object1;
let object2;
let object3;
function setup() {
// createCanvas(1500, 350,WEBGL);
createCanvas(windowWidth, windowHeight, WEBGL);
//declareren en initieren mag dus wel in een coderegel
let n = height/20;
let x = 0;
let y = 0; //a1=rood, a2=groen en a3=blauw
object1 = new BezierQuadrCub(x-8*n,y-2*n, x,y, x-n,y+5*n,
//c1=geel, c2=paars en c3=bruin
x-8*n,y+6*n, x-10*n,y-5*n, x+6*n,y-4*n,
color(237, 17, 17, 100));
//a1=rood, a2=groen en a3=blauw
object2 = new BezierQuadrCub(x+10*n,y+3*n, x,y, x-7*n,y+4*n,
//c1=geel, c2=paars en c3=bruin
x-11*n,y-9*n, x-2*n,y-8*n, x+8*n,y-n,
color(0, 250, 17, 100));
//a1=rood, a2=groen en a3=blauw
object3 = new BezierQuadrCub(x-n,y-7*n, x,y, x+8*n,y-4*n,
//c1=geel, c2=paars en c3=bruin
x+7*n,y+5*n, x-4*n,y+5*n, x-10*n,y-3*n,
color(0, 17, 200, 100));
}
function draw() {
background('#E6FBFF');
strokeWeight(2);
object1.display();
object2.display();
object3.display();
object1.xa1Re();
object1.xa3Li();
object2.xa1Re();
object2.xa3Li();
object3.xa3Li();
object3.xa1Re();
object1.ya1Up();
object1.ya2Down();
object2.ya1Up();
object2.ya2Down();
object3.ya1Up();
object3.ya2Down();
}
function keyPressed() {
if (key == 's') {
noLoop();
}
if (key == 'r') {
loop();
}
}
//De constructor functie
function BezierQuadrCub(xa1_, ya1_, xa2_, ya2_, xa3_, ya3_, //ankerpunten a1,a2,en a3
xc1_, yc1_, xc2_, yc2_, xc3_, yc3_, //controlepunten c1, c2 en c3
c_)
{ //De argumenten van de constructor functie als let variabelen declareren
//ankerpunten a1, a2 en a3
let xa1 = xa1_; let ya1 = ya1_; let xa2 = xa2_; let ya2 = ya2_; let xa3 = xa3_; let ya3 = ya3_;
// controlepunten c1, c2, c3
let xc1 = xc1_; let yc1 = yc1_; let xc2 = xc2_; let yc2 = yc2_; let xc3 = xc3_; let yc3 = yc3_;
let c = c_;
let xsnelhRe = 2;
let ysnelhUp = 3;
let ysnelhDown = 3;
//met this geef je aan dat de display functie gebruik mag maken van de constructor functie variabelen
//Due je hoef niet meer this voor iedere variabele te zetten !
//Je moet wel aangeven dat display een functie is, anders denkt de compiler dat het een variabele is
this.display = function() {
fill(c);
beginShape();
vertex(xa1, ya1); //eerste ankerpunt
//quadraticVertex werkt alleen met WEBGL
quadraticVertex(xc1,yc1, xa2, ya2); //eerste controlepunt en tweede ankerpunt
bezierVertex(xc2, yc2, xc3,yc3, xa3,ya3); //tweede en derde controlepunt en derde ankerpunt
endShape(CLOSE);
}
//beweging xa1 naar re
this.xa1Re = function() {
xa1 = xa1 + xsnelhRe;
if ((xa1 > width/2) || (xa1 < -width/2)) {
xsnelhRe = xsnelhRe * -1;
}
}
//beweging van xa1 naar li
this.xa3Li = function() {
xa3 = xa3 - xsnelhRe;
if ((xa3 > width/2) || (xa3 < -width/2)) {
xsnelhRe = xsnelhRe * -1;
}
}
this.ya1Up = function() {
ya1 = ya1 - ysnelhUp;
if ((ya1 > height/2) || (ya1 < -height/2)) {
ysnelhUp = ysnelhUp * -1;
}
}
this.ya2Down = function() {
ya2 = ya2 + ysnelhUp;
if ((ya2 > height/2) || (ya2 < -height/2)) {
ysnelhDown = ysnelhDown * -1;
}
}
}