Sterren en draaiende planeten                                     terug naar de inleiding

De schets staat ook op de server in de map:  p5-js/sterren_en_draaiende_planeten

In de schets draaien de gele en rode planeten rond een rode ster. In de schets de objecten ster en ster2 van de class Sphere
Omdat Sphere nu een class is beschikken de objecten over de variabelen
De lijnen worden getekend mbv de objectvariabelen x en y.
 

 
 

planeet = [];
function setup() { 
 createCanvas(windowWidth, windowHeight, WEBGL); 
 ster = new Sphere(0, 0, 0, 100); 
 ster2 = new Sphere(-width/4, 0, 40, 50);
for (var i = 0; i < 100; i++) { 
 //constructor x,y,z positie, diameter, 
 planeet[i] = new Sphere(random(-width/2, width/2), random(-height/2, height/2), random(-height/3, height/3), height/20); 
 } 
}
function draw() { 
 background(0); 
 for (var i = 0; i < planeet.length/2; i++) { 
 push(); 
 planeet[i].draaienX(); 
 planeet[i].show(); 
 pop(); 
 stroke(255, 255, 0); 
 line(planeet[i].x, planeet[i].y, 0, 0); 
 }
for (var j = planeet.length/2; j < planeet.length; j++) { 
 push(); 
 planeet[j].draaienY(); 
 planeet[j].show(); 
 pop();
stroke(0, 255, 255); 
 line (planeet[j].x, planeet[j].y, -width/4, 0); 
 } 
 push(); 
 stroke(255, 255,0); 
 ster.show(); 
 pop();
push(); 
 stroke(0,255, 255); 
 ster2.show(); 
 pop(); 
} 
 //constructor 
 class Sphere {  
 constructor(x_, y_, z_, w_) { 
 this.x = x_;  //this wil zeggen dat de variabelen class variabelen zijn. 
 this.y = y_; 
 this.z = z_; 
 this.w = w_; 
 } 
 show() { 
 translate(this.x, this.y, this.z); 
 ambientLight(255,0,0); 
 sphere(this.w); 
 }
draaienX() { 
 rotateX(millis()/3000); 
 }
draaienY() { 
 rotateY(millis()/3000); 
 } 
}