De de schets wordt automatisch uitgelijnd!! Als je op </> klik zie je de code die naar p5.js is omgezet.

 

 

 

 

 bezQuadrCubic1

 

 

 bezier Quadratic Cubic

 

 

 

 

 

 

 

 

 

bezier Quadratic Cubic 3

2) BezierQuadrCubicSub om beziervormen te demonstreren.                        terug naar de inleiding
       Zie ook het hoofdstuk Costom shapes in het boek  Programming Design Systems
       De vorm heeft 3 ankerpunten en 3 controlepunten
 
 

class BezierQuadrCub {  
 float xa1; float ya1; float ya2; float xa3; float xc1; float yc2; float xc3;  
 color c;
int nulWidthxa1 = 2; 
 int nulHeightya1 = 2; 
 int nulWidthxa3 = 1; 
 int nulHeightya2 = 2; 
 int heightNulya1 = 3;
//argumenten van de constructor  
 // ankerpunt 1 (xa1,ya1)  
 // ankerpunt 2 (width/2, ya2) 
 // ankerpunt 3 (xa3,height/2)
// controlepunt 1 (xc1,0) 
 // controlepunt 2 (0,yc2) 
 // controlepunt 3 (xc3,height/2)
BezierQuadrCub(float xa1_, float ya1_, float ya2_, float xa3_, float xc1_, float yc2_, float xc3_, color c_) {  
 xa1 = xa1_; ya1 = ya1_; ya2 = ya2_; xa3 = xa3_; xc1 = xc1_; yc2 = yc2_; xc3 = xc3_;  
 c = c_; 
 }
void display() {  
 fill(c);  
 beginShape(); 
 vertex(xa1, ya1); 
 quadraticVertex(xc1, 0, width/2, ya2); 
 bezierVertex(0, yc2, xc3, height/2, xa3, height/2); 
 endShape(CLOSE); 
 }
//beweging van xa1=0 naar xa1=width en terug 
 void nulWidthxa1() {  
 xa1 = xa1 + nulWidthxa1;  
 if ((xa1 > width) || (xa1 < 0)) {  
 nulWidthxa1 = nulWidthxa1 * -1; 
 } 
 } 
 //beweging van ya1=height naar ya1=0 en terug 
 void heightNulya1() {  
 ya1 = ya1 - heightNulya1;  
 if ((ya1 > height) || (ya1 < 0)) {  
 heightNulya1 = heightNulya1 * -1; 
 } 
 } 
 //beweging van ya1=0 naar ya1=height en terug 
 void nulHeightya1() {  
 ya1 = ya1 + nulHeightya1;  
 if ((ya1 > height) || (ya1 < 0)) {  
 nulHeightya1 = nulHeightya1 * -1; 
 } 
 } 
 //beweging van xa3=0 naar xa3=width en terug 
 void nulWidthxa3() {  
 xa3 = xa3 + nulWidthxa1;  
 if ((xa3 > width) || (xa3 < 0)) {  
 nulWidthxa3 = nulWidthxa3 * -1; 
 } 
 } 
 //beweging van ya2=0 naar ya1=height en terug 
 void nulHeightya2() {  
 ya2 = ya2 + nulHeightya1;  
 if ((ya2 > height) || (ya2 < 0)) {  
 nulHeightya2 = nulHeightya2 * -1; 
 } 
 } 
}
Het script van 3 bewegende vormen
 


 
BezierQuadrCub object1;  
BezierQuadrCub object2; 
BezierQuadrCub object3; 

 
void setup() {  
  
 size(960, 540);  
 // fullScreen(); 
 //argumenten van de constructor  
 // ankerpunt 1 (xa1,ya1) 1 en 2 
 // ankerpunt 2 (width/2, ya2) 3 
 // ankerpunt 3 (xa3,height/2) 4 

 
// controlepunt 1 (xc1,0) 5 
 // controlepunt 2 (0,yc2) 6 
 // controlepunt 3 (xc3,height/2) 7 

 
object1 = new BezierQuadrCub(0, height/2, height/2, width/2, width/2, height/4, width/2, color(237, 17, 17, 200));  
 object2 = new BezierQuadrCub(0, 0, height/2, width/3, width/2, height/4, width/4, color(17, 200, 17, 200)); 
 object3 = new BezierQuadrCub(60, 60, height/4.8, width/4.8, width/4.8, height/4.8, width/4.8, color(17, 20, 200, 200)); 
}  
void draw() {  
 background(39, 208, 240); 
 object1.display(); 
 object2.display(); 
 object3.display(); 

 
object1.nulWidthxa1(); 
 object1.heightNulya1(); 
 object1.nulHeightya1(); 
 object1.nulWidthxa3(); 

 
object2.nulWidthxa1(); 
 object2.heightNulya1(); 
 object2.nulHeightya1(); 
 object2.nulWidthxa3(); 

 
object3.nulWidthxa1(); 
 object3.heightNulya1(); 
 object3.nulHeightya1(); 
 object3.nulWidthxa3(); 
} 
void keyPressed() {  
 if (key == 's') {  
 noLoop(); 
 }  
 if (key == 'r') {  
 loop(); 
 }  
}