bezier quadratic cubic chaos

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

Met de "s" toets stoppen de bewegingen met iedere andere toets starten de bewegingen weer.

De schets bestaat uit 3 bezierquadratic cubic objecten, die zijn samengesteld mbv de bezierquadratic cubic curve, constructor creator

In de curve constructor creator kan je de 3 ankerpunten (rood, groen en blauw) en de controlepunten (geel, paars en bruin) op een gewenste positie kan plaatsen.

De coordinaten van deze punten vervolgens als argumenten in de constructor plaatsen

De schets maakt gebruik van de constructor functie BezierQuadrCub. Je kan daarom in de schets geen gebruik maken van object variabelen.

 
 

//Objecten declareren, dit is niet verplicht!
let object1; let object2; let object3;
function setup() {
  buttonR = createButton('reset');
  buttonR.position(20,30);buttonR.style('width','60px');
  buttonR.mouseClicked(buttonRAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,60);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight,WEBGL);
//declareren en initieren mag dus wel in een coderegel
  let n = height/20;let x = 0; let y = 0;
                //ankerpunten       a1=rood, a2=groen  a3=blauw
  object1 = new BezierQuadrCub(x-8*n,y-2*n, x-3*n,y, x-n,y+5*n,
        //controlepunten        //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, 170));
 
                                //a1=rood,  a2=groen a3=blauw
   object2 = new BezierQuadrCub(x+10*n,y+3*n, x,y, x-12*n,y+4*n,
                                //c1=geel,     c2=paars   c3=bruin
                                x-11*n,y-9*n, x-2*n,y-8*n, x+8*n,y-n,
                                color(0, 250, 17, 170));
 
                                //a1=rood,   a2=groen     a3=blauw
   object3 = new BezierQuadrCub(x-n,y-7*n, x,y+3*n, x+8*n,y-4*n,
                                //c1=geel,   c2=paars     c3=bruin
                                x+7*n,y+5*n, x-4*n,y+5*n, x-10*n,y-3*n,
                                color(0, 17, 200, 170));
}
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  strokeWeight(2);
  object1.display(); object2.display(); object3.display();
 
  if(key == 's' || key == 'S') {  }
  else {
  object1.xa3Li();   object2.xa1Re();  object2.xa3Li();
  object1.xa1Re();   object3.xa3Li();  object3.xa1Re();
  object1.ya1Up();   object1.ya2Down();object2.ya1Up();
  object2.ya2Down(); object3.ya1Up();  object3.ya2Down();
  }
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonRAction(){setup();}
function buttonDAction(){save('bezier_quadr_cub_chaos.png');}
//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 xa1snelhRe = 2; let xa3snelhLi = 2;
   let ya1snelhUp = 3; let ya2snelhDown = 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 + xa1snelhRe;
  if ((xa1 > width/2) || (xa1 < -width/2)) {
  xa1snelhRe = xa1snelhRe * -1;
  }
  }
  //beweging van xa1 naar li
  this.xa3Li = function() {
  xa3 = xa3 - xa3snelhLi;
  if ((xa3 > width/2) || (xa3 < -width/2)) {
  xa3snelhLi = xa3snelhLi * -1;
  }
  }
 
  this.ya1Up = function() {
  ya1 = ya1 - ya1snelhUp;
  if ((ya1 > height/2) || (ya1 < -height/2)) {
  ya1snelhUp = ya1snelhUp * -1;
  }
  }
 
  this.ya2Down = function() {
  ya2 = ya2 + ya2snelhDown;
  if ((ya2 > height/2) || (ya2 < -height/2)) {
  ya2snelhDown = ya2snelhDown * -1;
  }
  }
  }

Flevopink