Question

我已创建此代码

var points = [
[100, 100],
[100, -100],
[-100, -100],
[-100, 100]
];
function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(255);
    translate(200, 200);
    fill(0);
    beginShape();
    for (var x = 0; x < points.length; x++) {
        points[x] = rotatePoint(0, 0, points[x][0], points[x][1], 1);
        vertex(points[x][0], points[x][1]);
        console.log("vertex: "+String(points[x][0])+" "+String(points[x][1]));
    }
    endShape(CLOSE);
}

function getVectDist(p1X, p1Y, p2X, p2Y) {
    var deltaX = p1X-p2X;
    var deltaY= p1Y-p2Y;
    var vect=[deltaX, deltaY];
    return vect;
}

//Function to rotate a point around the origin or first point

function rotatePoint(originX, originY, pointX, pointY, angle) {
    var dist = getVectDist(originX, originY, pointX, pointY);
    //calculating the hypotenuse of dist
    var hyp = Math.sqrt((dist[0]*dist[0])+(dist[1]*dist[1]));
    console.log("hypotenuse"+String(hyp));
    //calculating coords
    var y = Math.cos(angle) * hyp;
    var x = Math.sin(angle) * hyp;
    return [x, y];
}

尝试创建一个旋转方块。然而，它只会产生一个奇怪的类似抛射物的移动对角线，它在45度处移动，然后变成屏幕中心的单个像素。有谁知道为什么？感谢。

Answer 1

我将您的代码编入代码库，您可以在此处查看：https://codepen.io/Awesomennjawarrior/pen/yXVbJZ?editors=0010
我使用了p5向量，如果你不知道它们是什么，你可能想查看p5 reference。 codepen功能齐全，对代码进行了少量更改。此外，如果你还不知道，p5中有一个rotate函数可以产生相同的结果而且麻烦少得多。 ;）

JavaScript中的旋转方块（使用p5和三角法）

1 个答案: