Es tut mir leid, da ich weiß, dass dies bereits erwähnt wurde, aber ich habe Mühe, dieses Programm dazu zu bringen, einen Stern auf die Leinwand zu zeichnen. Der Vektor zeigt nicht nur in die falsche Richtung, sondern verkleinert sich auch.

Mir ist klar, dass Arrays für die Vektoren (?) Wahrscheinlich schneller sind als Objekte, aber das Programm soll so lesbar wie möglich bleiben. IMHO vector.x ist klarer als vector [0]. Wahrscheinlich Geschmackssache, aber ich versuche, den Code für die Lernenden so klar wie möglich zu halten.

Danke im Voraus.

    <canvas id="canvas" height="600px" width="1000px">

    </canvas>

    <script>

        draw();

        function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');

                var currentPoint={x: 500, y: 300}; //start point
                var moveDist = 300;
                var turnAngle = 144;
                var repetitions = 5;
                var turnAngleRadians = turnAngle * (Math.PI/180)
                var moveVector = {x:moveDist, y:0}; //start facing right

                ctx.beginPath();
                ctx.moveTo(currentPoint.x, currentPoint.y);
                for(i=0;i<repetitions;i++){
                    moveVector = updateMV(moveVector, turnAngleRadians);
                    currentPoint.x = currentPoint.x + moveVector.x;
                    currentPoint.y = currentPoint.y + moveVector.y;
                    ctx.lineTo(currentPoint.x, currentPoint.y);
                }
                ctx.stroke();
            }

        function updateMV(moveVector, turnAngleRadians){
            var x2, y2
            x2 =    Math.cos(turnAngleRadians) * moveVector.x - Math.sin(turnAngleRadians) * moveVector.y;
            y2 =    Math.sin(turnAngleRadians) * moveVector.x - Math.cos(turnAngleRadians) * moveVector.y;
            moveVector.x = x2;
            moveVector.y = y2;
            return moveVector
        }

    </script>
1
Rich 18 Apr. 2018 im 13:54

3 Antworten

Beste Antwort

Ihre Formel für y2 ist falsch, es sollte + sein

y2 = Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;

       draw();

        function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');

                var currentPoint={x: 500, y: 300}; //start point
                var moveDist = 300;
                var turnAngle = 144;
                var repetitions = 5;
                var turnAngleRadians = turnAngle * (Math.PI/180)
                var moveVector = {x:moveDist, y:0}; //start facing right

                ctx.beginPath();
                ctx.moveTo(currentPoint.x, currentPoint.y);
                for(i=0;i<repetitions;i++){
                    moveVector = updateMV(moveVector, turnAngleRadians);
                    currentPoint.x = currentPoint.x + moveVector.x;
                    currentPoint.y = currentPoint.y + moveVector.y;
                    ctx.lineTo(currentPoint.x, currentPoint.y);
                }
                ctx.stroke();
            }

        function updateMV(moveVector, turnAngleRadians){
            var x2, y2
            x2 =    Math.cos(turnAngleRadians) * moveVector.x - Math.sin(turnAngleRadians) * moveVector.y;
            y2 =    Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;
            moveVector.x = x2;
            moveVector.y = y2;
            return moveVector
        }
    <canvas id="canvas" height="600px" width="1000px">

    </canvas>
1
Shyam Babu 18 Apr. 2018 im 20:21

Machen wir das einfach.

Nehmen wir an, wir haben einen Stern und benennen die fünf Punkte (Punkte eines Sterns, nicht unbedingt die 10 geometrischen Punkte) von oben im Uhrzeigersinn, Punkte A, B, C, D, E. Und wir möchten beginnen online BE

Wir werden nun einen einfachen aufrechten Stern machen, in dem jede Linie 200 ist. Es wäre ein Vektor mit einem Winkel von 72 ° und einer Größe von 200, beginnend an einem Punkt (50.500).

Aber zuerst müssen wir lernen, Vektoren zu zeichnen. Wir machen eine Funktion drawVector, machen dann den Stern, wobei jeder Winkel 36 ° beträgt, und wenden ihn dann rekursiv an.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    vector = {x: 50, y: 500, deg: 0},
    length = 200;
function drawVector(degrees, magnitude) {
    var rad = degrees * (Math.PI / 180);
    var nextX = vector.x + Math.cos(rad) * magnitude;
    var nextY = vector.y - Math.sin(rad) * magnitude;
    currentAngle = degrees
    ctx.beginPath();
    ctx.moveTo(vector.x, vector.y);
    ctx.lineTo(nextX, nextY);
    ctx.stroke();
    vector.x = nextX;
    vector.y = nextY;
    vector.deg = degrees;
}
drawVector(72, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);

Hinweis: 180 + vector.deg macht den Beginn des nächsten Punktes einfach zum gleichen wie den ersten. Sie können versuchen, jedes der drawVector(180... zu entfernen, um dies zu sehen.

0
hmpphep 18 Apr. 2018 im 13:02

Solch ein dummer kleiner Fehler. Vielen Dank für Ihre Hilfe hmpphep.

Es wurde gelöst, indem die Transformationsberechnung für y2 geändert wurde in:

y2 =    Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;
0
Rich 18 Apr. 2018 im 20:32