Curve object 1

 

 

De schets Bezier Quadratic Cubic "Bezier structuur" in p5.js met de WEBGL mode.        terug naar de inleiding                   ga naar de animatie

De schets maakt gebruik van objecten van de class "BezierQuadrCub".  De schets kan dan ook gebruik maken van object variabelen.

Het kunstwerk heet "Bezier structuur". in fullScreen.

Met de "s" toets stoppen, en met de "r" toets starten de bewegingen weer. met de "d" downloaden van een afbeelding

 

 

//Objecten declareren, dit is niet verplicht! 
let object1; 
let object2; 
let object3; 
let object4; 
//De variabelen hier declareren omdat ze in de draw functie worden gebruikt 
let x; 
let y; 
let n; 
 
function setup() { 
createCanvas(windowWidth, windowHeight, WEBGL); 
x = 0; 
y = 0; 
n = height/20; 
  object1 = new BezierQuadrCub(x-7*n,y-7*n, x,y-2*n, x,y+5*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x,y-4*n, x-7*n,y-5*n, x-7*n,y, 
                                color(237, 17, 17,100)); 
 
                                //a1=rood, a2=groen en a3=blauw 
   object2 = new BezierQuadrCub(x+7*n,y-7*n, x,y-2*n, x,y+5*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x,y-4*n, x+7*n,y-5*n, x+7*n,y, 
                                color(273, 17, 17,100)); 
 
                                //a1=rood, a2=groen en a3=blauw 
   object3 = new BezierQuadrCub(x+7*n,y+7*n, x,y+2*n, x,y-5*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x,y+4*n, x+7*n,y+5*n, x+7*n,y, 
                                color(237, 17, 17,100)); 
 
                                //a1=rood, a2=groen en a3=blauw 
   object4 = new BezierQuadrCub(x-7*n,y+7*n, x,y+2*n, x,y-5*n, 
                                //c1=geel, c2=paars en c3=bruin 
                                x,y+4*n, x-7*n,y+5*n, x-7*n,y, 
                                color(273, 17, 17,100)); 
} 
 
function draw() { 
  background('#E6FBFF'); 
  strokeWeight(2); 
  object1.display(); 
  object2.display(); 
  object3.display(); 
  object4.display(); 
  object1.ya2Up(); 
  object1.ya3Down(); 
  object2.ya2Up(); 
  object2.ya3Down(); 
  object3.ya3Down(); 
  object3.ya2Up(); 
  object4.ya3Down(); 
  object4.ya2Up(); 
 
  if (frameCount > 600) 
  { 
  object1.ya1= y+7*n; 
  object2.ya1= y+7*n; 
  object3.ya1= y-7*n; 
  object4.ya1= y-7*n; 
  } 
  if (frameCount > 600 && frameCount < 1200) 
   { 
  object1.ya1= y-7*n; 
  object2.ya1= y-7*n; 
  object3.ya1= y+7*n; 
  object4.ya1= y+7*n; 
  } 
  if (frameCount > 1200) frameCount = 0; 
} 
 
function keyPressed() { 
   if (key == 's') { 
    noLoop(); 
  } 
 
   if (key == 'r') { 
    loop(); 
  } 
 }