planeet = [];
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  ster = new Sphere(0, 0, 0, 100, color(255, 255, 0));
  ster2 = new Sphere(-width/4, 0, 40, 50, color(0, 255, 255));
for (var i = 0; i < 200; i++) {
//constructor x, y, z positie, diameter, en kleur
planeet[i] = new Sphere(random(-width/2, width/2), random(-height/2, height/2), random(-height/3, height/3), height/20,
  color(random(0, 255), random(0, 255), random(0, 255), random(150, 200)));
 }
}
function draw() {
  background(0);
 // clear(); 
 // background('rgba(255,255,255, 0)');
  for (var i = 0; i < planeet.length/2; i++) {
  push();
  planeet[i].draaienX();
  planeet[i].draaienZ();
  planeet[i].show();
  pop();
  stroke(255, 0, 0);
  strokeWeight(3);
  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].draaienZ();
   planeet[j].show();
   pop();
   stroke(0, 255, 255);
   strokeWeight(3);
   line (planeet[j].x, planeet[j].y, -width/4, 0);
}
   push();
   ster.show();
   pop();
 
   push();
   ster2.show();
   pop();
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
class Sphere {
   constructor(x, y, z, w, c) {
   this.x = x; this.y = y; this.z = z; this.w = w; this.c = c;
}
show() {
  translate(this.x, this.y, this.z);
  directionalLight(250, 250, 250, 1, -1,-1);
  directionalLight(250, 250, 255, 1,  1, 1);
  directionalLight(250, 250, 255,-1, -1,-1);
  // ambientLight(255);
  fill(this.c);
  noStroke();
  sphere(this.w);
}
draaienX() {
  rotateX(-millis()/3000);
}
draaienY() {
  rotateY(millis()/3000);
}
draaienZ() {
  rotateZ(millis()/3000);
 }
}