curve object 1

Curve object 1

 

Curve object 2

Curve object 2

 

Curve object 3

Curve object 3

 

 

 

 

bezquadrcub01

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

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

Het kunstwerk heet  "Bezier Chaos". in fullScreen. Ergens is er in de chaos toch structuur te ontdekken. 

Met de "s" toets stoppen, en met de "r" toets starten de bewegingen weer.

 

 

//Objecten declareren, dit is niet verplicht! 
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; 
  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; 
  } 
  } 
  }