javascript - 如何让我的 "planets"围绕我制作的太阳旋转？

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. 使用 angleMode(DEGREES)

   将 Angular 模式设置为 DEGREES，这对 frameCount 更友好

2. 使用rotate(frameCount)进行旋转

3. 使用translate(x,y)设置旋转中心

4. 在您的 ellipse() 调用中删除所有对 x 和 y 的引用

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>