Curve object 1

 

 

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

De schets maakt gebruik van de class "BezierQuadrCub".  De schets kan dan ook gebruik maken van object variabelen.

Het kunstwerk heet "Bezier structuur". in fullScreen.

Met de "s" toets stoppen, en met de "r" toets starten de bewegingen weer.

 

 

//Objecten declareren, dit is niet verplicht! 
let object1; 
let object2; 
let object3; 
let object4; 
//De variabelen hier declareren omdat ze in de draw functie worden gebruikt 
let x; 
let y; 
let n; 
 
function setup() { 
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,100)); 
 
                                //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,100)); 
 
                                //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,100)); 
 
                                //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,100)); 
} 
 
function draw() { 
  background('#E6FBFF'); 
  strokeWeight(2); 
  object1.display(); 
  object2.display(); 
  object3.display(); 
  object4.display(); 
  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 keyPressed() { 
   if (key == 's') { 
    noLoop(); 
  } 
 
   if (key == 'r') { 
    loop(); 
  } 
 } 
 
//Omdat in de schets object variabelen worden aangeroepen kan je geen gebruik maken van de constructor functie 
class BezierQuadrCub { 
  constructor(xa1,ya1, xa2,ya2, xa3, ya3,  //ankerpunten a1,a2,en a3 
              xc1,yc1, xc2,yc2, xc3, yc3,  //controlepunten c1, c2 en c3 
              c) 
 { 
 
   this.xa1 = xa1; this.ya1 = ya1; //a1 
   this.xc1 = xc1; this.yc1 = yc1; this.xa2 = xa2; this.ya2 = ya2;  //c1 en a2 
   this.xc2 = xc2; this.yc2 = yc2; this.xc3 = xc3; this.yc3 = yc3; this.xa3 = xa3; this.ya3 = ya3;  //c2, c3 en a3 
   this.c = c; 
 
   let ysnelhUp = 2; 
   this.ysnelhUp = ysnelhUp; 
 
   let ysnelhDown = 3; 
   this.ysnelhDown = ysnelhDown; 
} 
 
display() { 
   fill(this.c); 
beginShape(); 
   vertex(this.xa1, this.ya1); //eerste ankerpunt 
   //quadraticVertex werkt alleen met WEBGL 
   quadraticVertex(this.xc1,this.yc1, this.xa2,this.ya2);  //eerste controlepunt en tweede ankerpunt 
   bezierVertex(this.xc2, this.yc2, this.xc3, this.yc3, this.xa3, this.ya3);  //tweede en derde controlepunt en derde ankerpunt 
 endShape(CLOSE); 
} 
 
  ya2Up() { 
    this.ya2 = this.ya2 - this.ysnelhUp; 
    if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
    this.ysnelhUp = this.ysnelhUp * -1; 
  } 
  } 
 
  ya3Down() { 
    this.ya3 = this.ya3 + this.ysnelhDown; 
    if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
    this.ysnelhDown = this.ysnelhDown * -1; 
  } 
  } 
  }