Flevopink

 

class BezierCubQuadrCub extends Curven {
  constructor(xa1,ya1, xa2,ya2, xa3, ya3, xa4, ya4, //ankerpunten a1,a2,a3 en a4
              xc1,yc1, xc2,yc2, xc3, yc3, xc4, yc4, xc5, yc5,//controlepunten c1, c2, c3, c4 en c5
              c)
 {
 
   super(xa1,ya1, xa2,ya2, xa3, ya3, xa4, ya4) //ankerpunten a1,a2,a3 en a4
 
   this.xa1 = xa1; this.ya1 = ya1; this.xa2 = xa2; this.ya2 = ya2;
   this.xa3 = xa3; this.ya3 = ya3; this.xa4 = xa4; this.ya4 = ya4;
   this.xc1 = xc1; this.yc1 = yc1; this.xc2 = xc2; this.yc2 = yc2;
   this.xc3 = xc3; this.yc3 = yc3; this.xc4 = xc4; this.yc4 = yc4;
   this.xc5 = xc5; this.yc5 = yc5;   //c2, c3 en a3
   this.c = c;
}
 
display() {
   fill(this.c);
beginShape();
   vertex(this.xa1, this.ya1); //eerste ankerpunt
   bezierVertex(this.xc1, this.yc1, this.xc2, this.yc2, this.xa2, this.ya2);  //eerste en tweede controlepunt en tweede ankerpunt
   quadraticVertex(this.xc3,this.yc3, this.xa3,this.ya3);  //derde controlepunt en derde ankerpunt
   bezierVertex(this.xc4, this.yc4, this.xc5, this.yc5, this.xa4, this.ya4);  //vierde en vijfde controlepunt en vierde ankerpunt
endShape(CLOSE);
 
  strokeWeight(1);
  stroke(0);
//Twee raaklijnen van de cubic curve naar het gele en paarse controlepunt
  line(this.xa1,this.ya1,this.xc1,this.yc1);
  line(this.xa2,this.ya2,this.xc2,this.yc2);
//de twee raaklijn van de quadratic curve naar het bruine controlepunt
  line(this.xa2,this.ya2,this.xc3,this.yc3);
  line(this.xa3,this.ya3,this.xc3,this.yc3);
//Twee raaklijnen van de cubic curve naar het lichtgroene en oranje controlepunt
  line(this.xa3,this.ya3,this.xc4,this.yc4);
  line(this.xa4,this.ya4,this.xc5,this.yc5);
  //de rechte lijn tussen het rode en het lichtblauwe punt
  stroke(255,0,0);
  line(this.xa1,this.ya1,this.xa4,this.ya4);
  stroke(0);
//ankerpunten
  strokeWeight(15);
  stroke(255,0,0);
  point(this.xa1,this.ya1);
  stroke(0,255,0);
  point(this.xa2,this.ya2);
  stroke(0,0,255);
  point(this.xa3,this.ya3);
  stroke(103,246,250);
  point(this.xa4,this.ya4);
//controlepunten
  stroke(255,255,0); //geel
  point(this.xc1,this.yc1);
  stroke(255,0,255); //paars
  point(this.xc2,this.yc2);
  stroke(255,165,0);  //lichbruin
  point(this.xc3,this.yc3);
  stroke(188,250,8);  //lichtgroen
  point(this.xc4,this.yc4);
  stroke(165,42,42); //bruin
  point(this.xc5,this.yc5);
  strokeWeight(1);
 }
}