header

Planeet en roterende maan                        terug naar de inleiding

De schets staat op open processing en op deze server in de map:  p5-js/planeet-en-maan/

Schets met de constructor functie Sphere. Je kan in de schets geen gebruik maken van de variabelen in de constructor functie
De functies worden op de p5.js website, in het deel  Reference, met voorbeelden beschreven.
Bijvoorbeeld sphere();   of   directionalLight();
 
 

ster = [];      //Het aantal cellen in de ster array = 200 want i is 200  in de for lus.
function setup() { 
 createCanvas(windowWidth, windowHeight, WEBGL); 
 cirkelGroen = new Sphere(-0, 0,+10,50,color(0,255,0)); 
 cirkelBlauw = new Sphere(-width/4, 0,+10,100,color(0,0,255));
for (var i=0; i < 200; i++) { 
 ster[i] = new Sterren(random(width/2, -width/2),random(height/2,-height/2),random(-100,-50)); 
 } 
}
function draw() { 
 background(0); 
 push(); 
 cirkelGroen.draaienSlowY(); 
 cirkelGroen.show(); 
 pop();
push(); 
 for (var i=0; i < ster.length; i++) { 
 ster[i].showSter(); 
} 
 pop();
push(); 
 cirkelBlauw.draaienFastY(); 
 cirkelBlauw.show(); 
 pop(); 
}
//De Sphere constructor functie 
function Sphere(posX, posY, posZ, sWidth, sColor) { 
 var x = posX;  //var heeft een functie scope en hoeft dus niet extra te worden gedeclareerd 
 var y = posY; 
 var z = posZ; 
 var w = sWidth; 
 var color = sColor;

this.show = function() {   //Met this geef je aan dat de functie show een functie is van  Sphere 
 translate(x, y ,z); 
 directionalLight(color, -width/2, -height/2, -1000); 
 //noStroke(); 
 sphere(w); 
 }
 
this.draaienSlowY = function() { 
 rotateY(-millis()/1500); 
 }
 
this.draaienFastY = function() { 
 rotateY(millis()/1200); 
 } 
}
 
//De Sterren constructor functie 
function Sterren(sX, sY, sZ) { 
 var x = sX; 
 var y = sY; 
 var z = sZ;
 

this.showSter = function() { 
 translate(x, y, z)  //De sterren worden in de constructor at random, tussen de -50 en -100 in z richting, in het canvas gezet. 
 fill(255); 
 ellipse(x,y,10,); 
 } 
}