在p5js中沿弧线移动

Question

我在修复代码的这一部分时遇到了很多麻烦。我正在P5js中创建交互式图片。图片的一部分是太阳。当鼠标在屏幕上来回移动时，我希望太阳以弧线形式在屏幕上移动。像这样：

我的想法本质上是将鼠标映射到某个角度范围，然后使用该角度来计算我的太阳的位置，但是我在将头围绕圆周运动时遇到很多麻烦。

具体来说，我可以使某些东西沿圆周运动，但是我不太了解如何更改所述圆的中心点。这是我的sun对象的代码，也是指向openprocessing上的Sketch的链接，您可以在其中查看其运行情况并尝试使用代码：

<MyComponent src={someSvgComponent} srcType="svg" />

<MyComponent src={someImgComponent} srcType="img" />

https://www.openprocessing.org/sketch/591063

在此先感谢您的帮助，我在将旧的中学几何与代码连接时遇到了麻烦！

Answer 1

Sun的28和29行

    var x = this.constant + sin(this.angle + HALF_PI) * this.radius;
    var y = this.constant + cos(this.angle +HALF_PI) * this.radius;

将抽奖更改为此

function draw() {
    if(frameCount % 200 == 0) clouds.push(new Cloud());
    sky.display();
    sun.display(); // brought this line from bottom to behind mountains
    mountain.display();
    for(var i = 0; i < clouds.length; i++){
        clouds[i].display();
        if(!clouds[i].inBounds()){
            clouds.splice(i,1);
        }
    }

}

Answer 2

您可能需要研究polar coordinates。

基本上，您具有以下条件：

• 您希望太阳旋转的中心点。
• 您希望太阳旋转的角度。
• 中心点和太阳之间的距离。

您可以使用cos()和sin()函数计算太阳的位置：

var sunX = centerX + cos(angle) * distance;
var sunY = centerY + sin(angle) * distance;

然后，唯一的问题是如何将mouseX位置映射到角度。为此，您可以使用map()函数。 map()函数在两个值（例如mouseX在0和width之间取一个角度并将其映射到另一个范围（例如0和{{ 1}}）。像这样：

2*PI

您可能会想使用这些值。使用var angle = map(mouseX, 0, width, 0, 2*PI); 和0将给您一个完整的圈子。如果您只想半圈，则可以使用2*PI和PI之类的东西。

更多信息可以在the reference中找到。