QuadrCubChaosObj1

 

 

 

 

QuadrCubChaosObj2

 

 

QuadrCubChaosObj3

 

 

Met de "s" toets stopt en met de "r" toets starten de bewegingen, met de "d" toets kan je de animatie downloaden.

Bezier super chaos in p5.js

Een animatie met drie   Bezier Quadratic Cubic curven.             terug naar de inleiding                     ga naar de animatie in fullScreen():

De p5.js schets met de class en beweginsmethoden, niet alle beweginsmethodes worden in de schets gebruikt.

 

//Objecten declareren, dit is niet verplicht! 
let object1; 
let object2; 
let object3; 
 
function setup() { 
  createCanvas(windowWidth, windowHeight, WEBGL); 
  let n = height/20; 
  let x = 0; 
  let y = 0; 
                //ankerpunten  a1=rood,  a2=groen en 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, 100)); 
                                //a1=rood, a2=groen en a3=blauw 
   object2 = new BezierQuadrCub(x+10*n,y+3*n, x,y, x-7*n,y+4*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x-11*n,y-9*n, x-2*n,y-8*n, x+8*n,y-n, 
                                color(0, 250, 17, 100)); 
                                //a1=rood, a2=groen en a3=blauw 
   object3 = new BezierQuadrCub(x-n,y-7*n, x,y+3*n, x+8*n,y-4*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x+7*n,y+5*n, x-4*n,y+5*n, x-10*n,y-3*n, 
                                color(0, 17, 200, 100)); 
} 
 
function draw() { 
  background('#E6FBFF'); 
  strokeWeight(2); 
  //rood 
  object1.display(); 
  object1.xya1LiBo(); 
  object1.xya2ReBo(); 
  object1.xa3Re(); 
  object1.xya3LiOn(); 
  //groen 
  object2.display(); 
  object2.xa1Li(); 
  object2.xya1ReBo(); 
  object2.xa2Re(); 
  object2.xya2LiOn(); 
  object2.xya3ReBo(); 
  //blauw 
  object3.display(); 
  object3.xa1Li(); 
  object3.xya1ReBo(); 
  object3.xa2Re(); 
  object3.xya2LiBo(); 
  object3.xya3ReOn(); 
 
} 
 
function windowResized() { 
  resizeCanvas(windowWidth, windowHeight); 
} 
 
function keyPressed() { 
   if (key == 's') { 
    noLoop(); 
  } 
 
   if (key == 'r') { 
    loop(); 
  } 
 
   if (key == 'd'){ 
    //save out to a file 
    save('bezier_chaos.png'); 
  } 
 } 
 
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) //c is de color 
{ 
     this.xa1 = xa1; this.ya1 = ya1; this.xa2 = xa2; this.ya2 = ya2; this.xa3 = xa3; this.ya3 = ya3; 
     this.xc1 = xc1; this.yc1 = yc1; this.xc2 = xc2; this.yc2 = yc2; 
     this.xc3 = xc3; this.yc3 = yc3; this.c = c; 
 
let snelh = 2; 
let snelh2 = 1; 
let snelh3 = 2; 
 
let xa1snelhRe = snelh2;  this.xa1snelhRe =   xa1snelhRe; 
let xa1snelhLi = snelh;   this.xa1snelhLi =   xa1snelhLi; 
 
let xa2snelhRe = snelh;   this.xa2snelhRe =   xa2snelhRe; 
let xa2snelhLi = snelh;   this.xa2snelhLi =   xa2snelhLi; 
 
let xa3snelhRe = snelh;   this.xa3snelhRe =   xa3snelhRe; 
let xa3snelhLi = snelh2;  this.xa3snelhLi =   xa3snelhLi; 
 
let ya1snelhUp = snelh;   this.ya1snelhUp =   ya1snelhUp; 
let ya1snelhDown = snelh; this.ya1snelhDown = ya1snelhDown; 
 
let ya2snelhUp = snelh2;  this.ya2snelhUp =   ya2snelhUp; 
let ya2snelhDown = snelh; this.ya2snelhDown = ya2snelhDown; 
 
let ya3snelhUp = snelh;   this.ya3snelhUp =   ya3snelhUp; 
let ya3snelhDown = snelh; this.ya3snelhDown = ya3snelhDown; 
 
let xya1snelhReBo = snelh3; this.xya1snelhReBo = xya1snelhReBo; 
let xya1snelhReOn = snelh3; this.xya1snelhReOn = xya1snelhReOn; 
 
let xya1snelhLiBo = snelh3; this.xya1snelhLiBo = xya1snelhLiBo; 
let xya1snelhLiOn = snelh3; this.xya1snelhLiOn = xya1snelhLiOn; 
 
let xya2snelhReBo = snelh3; this.xya2snelhReBo = xya2snelhReBo; 
let xya2snelhReOn = snelh3; this.xya2snelhReOn = xya2snelhReOn; 
 
let xya2snelhLiBo = snelh3; this.xya2snelhLiBo = xya2snelhLiBo; 
let xya2snelhLiOn = snelh3; this.xya2snelhLiOn = xya2snelhLiOn; 
 
let xya3snelhReBo = snelh3; this.xya3snelhReBo = xya3snelhReBo; 
let xya3snelhReOn = snelh3; this.xya3snelhReOn = xya3snelhReOn; 
 
let xya3snelhLiBo = snelh3; this.xya3snelhLiBo = xya3snelhLiBo; 
let xya3snelhLiOn = snelh3; this.xya3snelhLiOn = xya3snelhLiOn; 
 
} 
 
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); 
} 
 
 xa1Re() { 
  this.xa1 = this.xa1 + this.xa1snelhRe; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xa1snelhRe = this.xa1snelhRe * -1; 
   } 
 } 
 
 xa1Li() { 
  this.xa1 = this.xa1 - this.xa1snelhLi; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xa1snelhLi = this.xa1snelhLi * -1; 
 } 
} 
 
 xa2Li() { 
  this.xa2 = this.xa2 - this.xa2snelhLi; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xa2snelhLi = this.xa2snelhLi * -1; 
 } 
} 
 
 xa2Re() { 
  this.xa2 = this.xa2 + this.xa2snelhRe; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xa2snelhRe = this.xa2snelhRe * -1; 
 } 
} 
 
  xa3Li() { 
   this.xa3 = this.xa3 - this.xa3snelhLi; 
   if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
   this.xa3snelhLi = this.xa3snelhLi * -1; 
   } 
} 
 
  xa3Re() { 
   this.xa3 = this.xa3 + this.xa3snelhRe; 
   if ((this.xa3 > width/2) || (this.xa3 < -width/2)) {1 
   this.xa3snelhRe = this.xa3snelhRe * -1; 
  } 
} 
 
  ya1Up() { 
   this.ya1 = this.ya1 - this.ya1snelhUp; 
   if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
   this.ya1snelhUp = this.ya1snelhUp * -1; 
   } 
  } 
 
  ya1Down() { 
  this.ya1 = this.ya1 + this.ya1snelhDown;1 
  if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
  this.ya1snelhDown = this.ya1snelhDown * -1; 
  } 
 } 
 
  ya2Up() { 
   this.ya2 = this.ya2 - this.ya2snelhUp; 
   if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
   this.ya2snelhUp = this.ya2snelhUp * -1; 
 } 
} 
 
  ya2Down() { 
   this.ya2 = this.ya2 + this.ya2snelhDown; 
   if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
   this.ya2snelhDown = this.ya2snelhDown * -1; 
  } 
 } 
 
 ya3Up() { 
  this.ya3 = this.ya3 - this.ya3snelhUp; 
  if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
  this.ya3snelhUp = this.ya3snelhUp * -1; 
 } 
} 
 
  ya3Down() { 
   this.ya3 = this.ya3 + this.ya3snelhDown; 
   if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
   this.ya3snelhDown = this.ya3snelhDown * -1; 
   } 
 } 
 
 xya1ReBo() { 
  this.xa1 = this.xa1 + this.xya1snelhReBo; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xya1snelhReBo = this.xya1snelhReBo * -1; 
} 
  this.ya1 = this.ya1 - this.xya1snelhReBo; 
  if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
  this.xya1snelhReBo = this.xya1snelhReBo * -1; 
 } 
} 
 xya2ReBo() { 
  this.xa2 = this.xa2 + this.xya2snelhReBo; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xya2snelhReBo = this.xya2snelhReBo * -1; 
} 
  this.ya2 = this.ya2 - this.xya2snelhReBo; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.xya2snelhReBo = this.xya2snelhReBo * -1; 
 } 
} 
 
xya3ReBo() { 
 this.xa3 = this.xa3 + this.xya3snelhReBo; 
 if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
 this.xya3snelhReBo = this.xya3snelhReBo * -1; 
} 
 this.ya3 = this.ya3 - this.xya3snelhReBo; 
 if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
 this.xya3snelhReBo = this.xya3snelhReBo * -1; 
 } 
} 
 
 xya1LiBo() { 
  this.xa1 = this.xa1 - this.xya1snelhLiBo; 
if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xya1snelhLiBo = this.xya1snelhLiBo * -1; 
} 
  this.ya1 = this.ya1 - this.xya1snelhLiBo; 
if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
  this.xya1snelhLiBo = this.xya1snelhLiBo * -1; 
 } 
} 
 
xya2LiBo() { 
  this.xa2 = this.xa2 - this.xya2snelhLiBo; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xya2snelhLiBo = this.xya2snelhLiBo * -1; 
} 
  this.ya2 = this.ya2 - this.xya2snelhLiBo; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.xya2snelhLiBo = this.xya2snelhLiBo * -1; 
 } 
} 
 
xya3LiBo() { 
  this.xa3 = this.xa3 - this.xya3snelhLiBo; 
  if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
  this.xya3snelhLiBo = this.xya3snelhLiBo * -1; 
} 
  this.ya3 = this.ya3 - this.xya3snelhLiBo; 
  if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
  this.xya3snelhLiBo = this.xya3snelhLiBo * -1; 
 } 
} 
 
 xya1LiOn() { 
  this.xa1 = this.xa1 - this.xya1snelhLiOn; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xya1snelhLiOn = this.xya1snelhLiOn * -1; 
} 
  this.ya1 = this.ya1 + this.xya1snelhLiOn; 
  if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
  this.xya1snelhLiOn = this.xya1snelhLiOn * -1; 
 } 
} 
 
 xya2LiOn() { 
  this.xa2 = this.xa2 - this.xya2snelhLiOn; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xya2snelhLiOn = this.xya2snelhLiOn * -1; 
} 
  this.ya2 = this.ya2 + this.xya2snelhLiOn; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.xya2snelhLiOn = this.xya2snelhLiOn * -1; 
 } 
} 
 
xya3LiOn() { 
  this.xa3 = this.xa3 - this.xya3snelhLiOn; 
  if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
  this.xya3snelhLiOn = this.xya3snelhLiOn * -1; 
} 
  this.ya3 = this.ya3 + this.xya3snelhLiOn; 
  if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
  this.xya3snelhLiOn = this.xya3snelhLiOn * -1; 
 } 
} 
 
xya1ReOn() { 
  this.xa1 = this.xa1 + this.xya1snelhReOn; 
  if ((this.xa1 > width/2) || (this.xa1 < -width/2)) { 
  this.xya1snelhReOn = this.xya1snelhReOn * -1; 
} 
  this.ya1 = this.ya1 + this.xya1snelhReOn; 
  if ((this.ya1 > height/2) || (this.ya1 < -height/2)) { 
  this.xya1snelhReOn = this.xya1snelhReOn * -1; 
} 
} 
 
 xya2ReOn() { 
  this.xa2 = this.xa2 + this.xya2snelhReOn; 
  if ((this.xa2 > width/2) || (this.xa2 < -width/2)) { 
  this.xya2snelhReOn = this.xya2snelhReOn * -1; 
} 
  this.ya2 = this.ya2 + this.xya2snelhReOn; 
  if ((this.ya2 > height/2) || (this.ya2 < -height/2)) { 
  this.xya2snelhReOn = this.xya2snelhReOn * -1; 
 } 
} 
 
xya3ReOn() { 
  this.xa3 = this.xa3 + this.xya3snelhReOn; 
  if ((this.xa3 > width/2) || (this.xa3 < -width/2)) { 
  this.xya3snelhReOn = this.xya3snelhReOn * -1; 
} 
  this.ya3 = this.ya3 + this.xya3snelhReOn; 
  if ((this.ya3 > height/2) || (this.ya3 < -height/2)) { 
  this.xya3snelhReOn = this.xya3snelhReOn * -1; 
  } 
 } 
}