Rotating-Platz in JavaScript (mit p5 & triganometry)

Question

Ich habe diesen Code erstellt

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]; 
} 

zu versuchen und einen rotierenden Platz zu schaffen. Es erzeugt jedoch nur eine seltsame, Projektil-artige, sich bewegende diagonale Linie, die sich um 45 Grad bewegt, bevor sie sich in ein einzelnes Pixel in der Mitte des Bildschirms verwandelt. Weiß jemand warum? danke.

Answer 1

ich Ihren Code in einem codepen gemacht, können Sie es hier ansehen: https://codepen.io/Awesomennjawarrior/pen/yXVbJZ?editors=0010
I p5 Vektoren verwendet, können Sie die p5 reference überprüfen möchten, wenn Sie nicht wissen, was sie sind. Der Codepen ist voll funktionsfähig, mit kleinen Änderungen an Ihrem Code. Falls Sie es noch nicht wissen, gibt es in p5 eine rotate Funktion, die die gleichen Ergebnisse mit viel weniger Problemen hätte erzeugen können. ;)