ambientMaterial(0,255,0) (regel 23) ingeschakeld

ambientMaterial(0,255,0) ingeschakeld, (regel 23)
alleen de groene kleur wordt gereflecteerd 
 

 

 

regel 15  camera(x-8*n, y, z+13*n, x, y, z, 0, 1, 0);

regel 15  camera(x-8*n, y, z+13*n, x, y, z, 0, 1, 0);
 de camera is 8 vakjes naar links verplaatst
maar in gericht naar het 0,0 punt

 

 

 

regel 15 camera(x-8*n, y, z+13*n, x-8*n, y, z, 0, 1, 0);

regel 15  camera(x-8*n, y, z+13*n, x-8*n, y, z, 0, 1, 0);

de camera nu ook naar de eerste sphere gericht

 

 

 

directionalLight(0, 255, 0, -1, -1, 0);

 directionalLight(0, 255, 0, -1, -1, 0);

het licht komt van rechts onder

 
 
 

 

directionalLight(225, 0, 0, -6, -1, 0);

directionalLight(225, 0, 0, -6, -1, 0);

regel 17 ingeschakeld

 
 

3 x sphere met 3 x pontLight 

                                    3 x sphere met 3 x pontLight

 

pointLight() , ambientMaterial() en camera();                                      terug naar de inleiding

argumenten van de camera:  camera(Xpos, Ypos, Zpos, Xdir, Ydir, Zdir, upX, upY, upZ);  ,  pos = positie, dir = richting
upX, upY, upZ is een 3d vector met (0,0,0) is de camera nergens op gericht er is dus geen beeld te zien.
 
default positie van de camera: camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);   ,upY = 1, de camera is voor op het assenstelsel gericht, 
met upY is -1 is de camera van achter op het assenstelsel gericht, de camera is met de y as 180 gedraaid !
 

voor n = height/15 is de z positie van de camera z+13*n dus:   camera(x, y, z+13*n, x, y, z, 0, 1, 0);   In de schets zijn x, y en z  0

ambientMaterial(R,G,B)  default waarden:  ambienMaterial(255,255,255); Met ambientMaterial geef je aan welke kleur wordt gereflecteerd.
point.Light(R, G, B, x, y, z); geeft een kleur af en heeft een x, y, z positie
 

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

 

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(); 
//default camera positie 
  camera(x, y, z+13*n, x, y, z, 0, 1, 0); 
 
// de li en re sphere worden langwerpig afgebeeld 
// dit omdat de camera default in het (x,y,z+13*n) punt staat 
  pointLight(250, 0, 0, x, y,      z+5*n); //rood komt van recht voor 
  pointLight(0,0,255,   x, y-10*n, z);     //blauw komt van boven 
  pointLight(0,255,0,   x, y+10*n, z);     //groen komt van beneden 
 
//ambientMaterial(0,255,0)// alleen de groene kleur wordt gereflecteerd 
//ambientMaterial(255,255,255)// (is wit) worden de drie kleuren gereflecteerd 
 
  noStroke(); 
  push(); 
  translate(x-8*n, y, z); 
  sphere(2*n); 
  pop(); 
 
  sphere(2*n); 
// push() en pop() zijn hier niet nodig! 
// push(); 
  translate(x+8*n, y, z); 
  sphere(2*n) 
//  pop(); 
}

 

directionalLight(R, G, B, x,y,z);  is een lichtbron die in het oneindige staat waarvan de riching met een x,y,z vector wordt aangegeven

 
 

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() 
  noStroke(); 
 //De richting van de directionalLight lichtbron wordt aangegeven met een vector 
  directionalLight(0,255,0,-1,-1,0); //de richting komt van rechts onder 
 //directionalLight(0,255,0,-6,-6,0);  geeft hetzelfde beeld 
  //directionalLight(225,0,0,-6,-1,0); 
  sphere(4*n); 
}