Как заставить мои «планеты» вращаться вокруг созданного мной солнца?

Question

Я пытаюсь создать интерактивную фотографию, на которой, когда вы щелкаете и удерживаете мышь, планеты начинают вращаться вокруг Солнца ... Я просто не могу получить его там, где я хочу. Не знаю как. Может кто-нибудь помочь?

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
}

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

Answer 1

Вы можете сделать несколько вещей, чтобы получить вращение, указанное ниже:

1. установите режим угла DEGREES, который более удобен для frameCount, используя angleMode(DEGREES)

2. используйте rotate(frameCount) для поворота

3. используйте translate(x,y) для установки центра вращения

4. удалить все ссылки на x и y в ваших ellipse() звонках

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
}

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