planeet en roterende maan

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

Planeet en roterende maan terug naar de inleiding ga naar de animatie in full screen

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 = [];
 
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(100,251,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();
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function keyPressed() {
  if (key == 's') {
   noLoop();
}
  if (key == 'r') {
   loop();
}
 
  if (key == 'd'){
    save('planeet_maan.png');
 }
}
 
//De Sphere constructor functie
function Sphere(posX, posY, posZ, sWidth, sColor) {
  var x = posX;
  var y = posY;
  var z = posZ;
  var w = sWidth;
  var color = sColor;
 
  this.show = function() {
  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)
   fill(255);
    ellipse(x,y,10,);
  }
}

Flevopink