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

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)将角度模式设置为对frameCount更友好的DEGREES

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>