Rotating Spheres

index.html

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>		
<script src="script.js"></script>

script.js

var sun = function(){
  sphere(30);
}

// Orbit(radius,size,speed)

var earth = new Orbit(180, 20, 0.002);
var moon  = new Orbit(40,5,0.05);

var mercury = new Orbit(60,8,0.004);
var venus = new Orbit(120,14,0.0025);
var mars = new Orbit(250,16,0.0028);

function setup() {
    createCanvas(650, 650, WEBGL);
}

function draw() {
  
    background(50);
    normalMaterial();	
    sun();
  
    push();
    mercury.orbit();
    pop();

    push();
    venus.orbit(); 
    pop();

    push();
    mars.orbit();
    pop();
 
    push();
    earth.orbit();
    moon.orbit();
    pop();

}

function Orbit(radius, size, speed) {

    this.radius = radius;
    this.size = size;
    this.speed = speed;
    this.angle = 0;

    this.display = function() {
        sphere(this.size);
    }
   
    this.translate = function() {
        this.x = this.radius * cos(this.angle);
        this.y = this.radius * sin(this.angle);
        translate(this.x, this.y);
    }
    
    this.move = function() {
        this.angle += this.speed;
    }
    
    this.orbit = function(){
      this.translate();
      this.display();
      this.move();
    }
}		

thumbnail.png