How do I get my "planets" to rotate around the sun I have made?

Question

I am trying to create an interactive photo where, when you click and hold the mouse, the planets begin to rotate around the sun... I just can't get it where I want it. I'm not sure how. Can someone please help?

var x = 35
var y = 120
var d = 80

var cols, rows;
var w = 50;
var grid = [];

function setup(){
    // this function will run once
    createCanvas(320, 240); // create a 320x240 pixel drawing canvas

}

function draw(){

    background(255); //light gray background
    
    if (mouseIsPressed == true) {
        background(0); //black background
        
        fill(255,153,51);//orange 
        ellipse(x-62,y,d,d);// sun
        rotate(radians(frameCount));
    }
      
    fill(163,210,6);//green
    ellipse((x+52),y,d-7,d-7);//jupiter
    
    fill(239,233,49);//yellow
    ellipse((x+95),y,d-14,d-14);//saturn
      
    fill(49,239,239);//neon blue
    ellipse((x+192),y,d-21,d-21)//uranus
    
    fill(201,49,239);//purple
    ellipse((x+301),y,d-28,d-28);//neptune
      
    fill(0,85,255);//blue
    ellipse((x+10),y,d-35,d-35);//earth
      
    fill(255, 51, 153);//pink
    ellipse((x+7.2),y,d-42,d-42);//venus
    
    fill(210,95,6);//red
    ellipse((x+15),y,d-49,d-49);//mars
    
    fill(64,64,64);//gray
    ellipse((x+3.8),y,(d-56),(d-56));//mercury
}

user_809256 · Answer

You can do several things to get the rotation below:

set the angle mode to DEGREES which is more frameCount friendly by using angleMode(DEGREES)
use rotate(frameCount) to rotate
use translate(x,y) to set the rotation center
remove all references to x and y in your ellipse() calls

var x = 35;
var y = 120;
var d = 80;

function setup() {
  // this function will run once
  createCanvas(320, 240); // create a 320x240 pixel drawing canvas
}

function draw() {
  background(255); //light gray background
  translate(x, y);

  if (mouseIsPressed == true) {
    background(0); //black background
    fill(255, 153, 51); //orange
    ellipse(0, 0, d, d); // sun
    angleMode(DEGREES);
    rotate(frameCount);
  }

  fill(163, 210, 6); //green
  ellipse(52, 0, d - 7, d - 7); //jupiter

  fill(239, 233, 49); //yellow
  ellipse(95, 0, d - 14, d - 14); //saturn

  fill(49, 239, 239); //neon blue
  ellipse(192, 0, d - 21, d - 21); //uranus

  fill(201, 49, 239); //purple
  ellipse(301, 0, d - 28, d - 28); //neptune

  fill(0, 85, 255); //blue
  ellipse(10, 0, d - 35, d - 35); //earth

  fill(255, 51, 153); //pink
  ellipse(7.2, 0, d - 42, d - 42); //venus

  fill(210, 95, 6); //red
  ellipse(15, 0, d - 49, d - 49); //mars

  fill(64, 64, 64); //gray
  ellipse(3.8, 0, d - 56, d - 56); //mercury
}

How do I get my "planets" to rotate around the sun I have made?

1 Answers