javascript - 在p5js中沿着弧线移动

Question

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

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

具体来说，我可以让一些东西循环移动，但我不太明白如何改变所述圆的中心点。这是我的 sun 对象的代码，也是 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

您可能想查看polar coordinates .

基本上，您有以下内容:

• 您希望太阳围绕其旋转的中心点。
• 您希望太阳旋转的 Angular 。
• 中心点与太阳之间的距离。

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

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

然后，唯一的问题是如何将 mouseX 位置映射到 Angular 。为此，您可以使用 map() 函数。 map() 函数获取两个值之间的 Angular (例如 mouseX 介于 0 和 width 之间)和 map 它到另一个范围(例如您的 Angular 0 和 2*PI)。像这样的事情:

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

您可能想稍微调整一下这些值。使用 0 和 2*PI 将为您提供一个完整的圆圈。如果您只想要半圆，则需要使用 PI 和 2*PI 之类的东西。

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