animatie met 3d primitieven

met muisklik en de muis in x richting bewegen wordt de animatie groter en kleiner

animatie met de 3d primitieven plane(); , box(); en torus(); terug naar de inleiding

De middelpunten van de primitieven of 3d vormen komen allemaal in het (0,0) punt. Met de translate(x,y,z) functie krijgen ze een posittie in het canvas

De schets maakt als achtergrond gebruik van het object ruitjespap van de class "WEBGLRuitjes"

 

let gradhoek = 1; 
let x; let y; let z; let n; 
 
function setup() { 
  createCanvas(windowWidth, windowHeight,WEBGL); 
  n = height/15; 
  x = 0; 
  y = 0; 
  z = 0; 
  ruitjespap = new WEBGLRuitjes(n, x, y); 
} 
 
function draw() { 
  background('#E6FBFF'); 
  ruitjespap.display(); 
  fill(0,0,255,100); 
  rotateX(radians(gradhoek*1.5)); 
  rotateY(radians(gradhoek)); 
  rotateZ(radians(gradhoek)); 
//rotateY(radians(90)); 
  gradhoek += 1; 
  if (gradhoek > 360) gradhoek = 1; 
 
  plane(8*n,8*n); 
  fill(255,0,0,100); 
//de box wordt getekend vanuit zijn middelpunt 
  push(); 
  translate(x+2*n, y-2*n); 
  box(2*n); 
  pop(); 
 
  push(); 
  translate(x-2*n, y+2*n); 
  box(2*n); 
  pop(); 
 
  push(); 
  translate(x-2*n, y-2*n); 
  box(2*n); 
  pop(); 
 
  push(); 
  translate(x+2*n, y+2*n); 
  box(2*n); 
  pop(); 
 
  fill(0,255,0,100); 
  push(); 
  translate(x,y,z+n); 
  torus(3*n,n/2); 
  pop(); 
 
  push(); 
  translate(x,y,z-n); 
  torus(3*n,n/2); 
  pop(); 
//n en daarmee de afbeelding varrieeert in grootte door de muis in x richting te bewegen 
if (mouseIsPressed) { 
  n = mouseX-width/2 
  } 
} 
 
function windowResized() { 
   resizeCanvas(windowWidth, windowHeight); 
 }

Flevopink