我如何让我的“行星”围绕我制造的太阳旋转？

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

您可以执行以下几项操作来获得旋转：

通过使用angleMode(DEGREES)，

1. 将角度模式设置为DEGREES，这对frameCount更友好

1. 使用rotate(frameCount)旋转

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

1. 删除ellipse() calls

中对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>

​