在p5js中沿弧线移动

Question

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

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

具体来说，我可以让一些东西做圆周运动，但我真的不明白如何改变所述圆的中心点。这是我的 sun 对象的代码，还有一个 link 到 openprocessing 上的 Sketch，您可以在其中看到它的运行情况并尝试使用代码：

function Sun(x,y,w,h,c1,c2){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c1 = c1;
    this.c2 = c2;

    this.center = createVector(width/2,height/2);
    this.pos = createVector(this.x,this.y);
    var dx = this.center.x - this.pos.x;
    var dy = this.center.y - this.pos.y;
    var initAngle = atan2(dx,dy);
    this.angle =  initAngle;
    this.constant = height/2;
    this.radius = dist(this.center.x,this.center.y,this.pos.x,this.pos.y);

    this.display = function(){
        noStroke();
        fill(red(c1),green(c1),blue(c1));

        //draw center point
        ellipse(this.center.x,this.center.y,10,10);

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

        this.angle = map(mouseX,0, width, initAngle, initAngle + PI);
    }
}

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

在此先感谢您的帮助，我只是无法将我高中时的几何图形连接到代码中！

Answer 1

太阳第 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 和 2*PI 适合你的角度）。像这样：

var angle = map(mouseX, 0, width, 0, 2*PI);

您可能想要稍微调整一下这些值。使用 0 和 2*PI 会给你一个完整的圆圈。如果你只想要一个半圆，你会想要使用像 PI 和 2*PI.

这样的东西

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

在p5js中沿弧线移动

Move along an arc in p5js

javascript

processing

graphics

geometry

p5.js