Hier boven de animatie "Bezier rotation" op OpenProcessing in p5.js met de constructor functie BezierVertex. (ga naar tab2)
 
3) bezier cirkel animatie in pde                      terug naar de inleiding
 
 

BezierVertex blauwVertexReBo; 
BezierVertex blauwVertexLiBo; 
BezierVertex blauwVertexReOn; 
BezierVertex blauwVertexLiOn; 
BezierVertex groen; 
BezierVertex rood; 
BezierVertex geel; 
BezierVertex blauw;
 void setup() { 
 size(1000,1000); 
 //Geen translate dus (width/2, height/2) is het midden van het canvas 
 blauwVertexReBo = new BezierVertex(width/2, height/2,  
 width/4, height/4,  
 width/4, height/2,  
 width/2, height/2, color(0, 0, 100, 100));
//de controlepunten gespiegeld in de width/2 as 
 blauwVertexLiBo = new BezierVertex(width/2, height/2,  
 width/4, height/2,  
 width/4, height/4*3,  
 width/2, height/2, color(255, 200, 10, 100));
blauwVertexReOn = new BezierVertex(width/2, height/2,  
 width/4*3, height/4,  
 width/4*3, height/2,  
 width/2, height/2, color(0, 200, 100, 100));
blauwVertexLiOn = new BezierVertex(width/2, height/2,  
 width/4*3, height/2,  
 width/4*3, height/4*3,  
 width/2, height/2, color(200, 0, 200, 100));
int n = 3; 
 //translate(width/2, height/2) (0,0) is het midden van het canvas 
 groen = new BezierVertex(0, 0, -width/n, -height/n, width/n, -height/n, 0, 0, color(0, 255, 0, 100)); 
 rood = new BezierVertex(0, 0, -width/n, height/n, width/n, height/n, 0, 0, color(255, 0, 0, 100)); 
 geel = new BezierVertex(0, 0, width/n, -height/n, width/n, height/n, 0, 0, color(255, 255, 0, 100)); 
 blauw = new BezierVertex(0, 0, -width/n, -height/n, -width/n, height/n, 0, 0, color(0, 255, 255, 100)); 
}
void draw() { 
 background(189, 237, 240); 
 // background(0); 
  
 pushMatrix(); 
 groen.draaien(); 
 groen.show(); 
 popMatrix();
pushMatrix(); 
 blauw.draaienTerug(); 
 blauw.show(); 
 popMatrix();
pushMatrix(); 
 geel.draaien(); 
 geel.show(); 
 popMatrix();
pushMatrix(); 
 rood.draaienTerug(); 
 rood.show(); 
 popMatrix();
blauwVertexReBo.show(); 
 blauwVertexReBo.neerEnOp();
blauwVertexReOn.show(); 
 blauwVertexReOn.neerEnOp();
blauwVertexLiBo.show(); 
 blauwVertexLiBo.opEnNeer();
blauwVertexLiOn.show(); 
 blauwVertexLiOn.opEnNeer(); 
}
 
De BezierVertex class;
 
 


class BezierVertex {
float x; 
 float y; 
 float cx1; 
 float cy1; 
 float cx2; 
 float cy2; 
 float ax2; 
 float ay2; 
 color c;  
 int snelhOpEnNeer = 3; 
 int i;
// de constructor functie 
 // x, y eerste anker punt 
 // cx1, cy1 eerste controle punt 
 // cx2, cy2 tweede controle punt 
 // ax2, ay2 tweede anker punt
BezierVertex (float x_, float y_, float cx1_, float cy1_, float cx2_, float cy2_, float ax2_, float ay2_, color c_) { 
 x = x_; 
 y = y_; 
 cx1 = cx1_; 
 cy1 = cy1_; 
 cx2 = cx2_; 
 cy2 = cy2_; 
 ax2 = ax2_; 
 ay2 = ay2_; 
 c = c_; 
 }
void show() { 
 beginShape(); 
 fill(c); 
 vertex(x, y); 
 bezierVertex(cx1, cy1, cx2, cy2, ax2, ay2); 
 endShape(CLOSE); 
 }
void draaien() { 
 translate(width/2, height/2); 
 i = i+1;  
 rotate(radians(i));  
 if (i == 360) i = 0; 
 }
void draaienTerug() { 
 translate(width/2, height/2); 
 i = i+1;  
 rotate(-radians(i));  
 if (i == 360) i = 0; 
 }
void opEnNeer() { 
 y = y - snelhOpEnNeer; 
 if ((y < 0) || (y > height)) { 
 snelhOpEnNeer = snelhOpEnNeer* -1; 
 } 
 }
void neerEnOp() { 
 y = y + snelhOpEnNeer; 
 if ((y < 0) || (y > height)) { 
 snelhOpEnNeer = snelhOpEnNeer* -1; 
 } 
 } 
}