Flevopink

 
 
let object1; 
let object2; 
let object3; 
 
function setup() { 
//  createCanvas(1500, 350,WEBGL); 
  createCanvas(windowWidth, windowHeight, WEBGL); 
//declareren en initieren mag dus wel in een coderegel 
  let n = height/20; 
  let x = 0; 
  let y = 0;                  //a1=rood, a2=groen en a3=blauw  
  object1 = new BezierQuadrCub(x-8*n,y-2*n, x,y, x-n,y+5*n, 
                                //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, 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); 
  object1.display(); 
  object2.display(); 
  object3.display(); 
  object1.xa1Re(); 
  object1.xa3Li(); 
  object2.xa1Re(); 
  object2.xa3Li(); 
  object3.xa3Li(); 
  object3.xa1Re(); 
  object1.ya1Up(); 
  object1.ya2Down(); 
  object2.ya1Up(); 
  object2.ya2Down(); 
  object3.ya1Up(); 
  object3.ya2Down(); 
 
} 
 
function keyPressed() { 
   if (key == 's') { 
    noLoop(); 
  } 
 
   if (key == 'r') { 
    loop(); 
  } 
 } 
 
//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 xsnelhRe = 2; 
   let ysnelhUp = 3; 
   let ysnelhDown = 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 + xsnelhRe; 
  if ((xa1 > width/2) || (xa1 < -width/2)) { 
  xsnelhRe = xsnelhRe * -1; 
  } 
  } 
  //beweging van xa1 naar li 
  this.xa3Li = function() { 
  xa3 = xa3 - xsnelhRe; 
  if ((xa3 > width/2) || (xa3 < -width/2)) { 
  xsnelhRe = xsnelhRe * -1; 
  } 
  } 
 
  this.ya1Up = function() { 
  ya1 = ya1 - ysnelhUp; 
  if ((ya1 > height/2) || (ya1 < -height/2)) { 
  ysnelhUp = ysnelhUp * -1; 
  } 
  } 
 
  this.ya2Down = function() { 
  ya2 = ya2 + ysnelhUp; 
  if ((ya2 > height/2) || (ya2 < -height/2)) { 
  ysnelhDown = ysnelhDown * -1; 
  } 
  } 
  }