Met de "s" toets stopt en met de "r" toets starten de bewegingen, met de "d" toets kan je de animatie downloaden.

Sterren en draaiende planeten                                     terug naar de inleiding                 ga naar de animatie in full screen

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); 
 } 
}