回転した矢印を直線で移動する

Question

私は、回転させることができる矢印を直線で動かしようとしています。私は使用するために正しい数式を思いつくことにいくつかの困難を抱えています。私はそれがおそらくサインとコサインを含むべきだと知っていますが、私はいろいろな設定を試していますし、動作するものを手に入れることができませんでした。ここで

が矢印で私のシーンの絵と弓だ

rotateNumberは、（1つの左回転用）-1のような整数、0（回転なし）、1（1つの右回転）、などがあります

rotateAngleはデフォルトで10度です。ここで

は、矢印を移動するためのコードです：

if (arrowMoving) { 
     var rAngle = rotateAngle * rotateNumber; 
     var angleInRad = rAngle * (Math.PI/180); 
     var stepSize = 1/20; 
     arrowX += stepSize * Math.cos(angleInRad); 
     arrowY += stepSize * Math.sin(angleInRad); 
     DrawArrowTranslate(arrowX, arrowY); 
     requestAnimFrame(render); 
    } else { 
     DrawArrow(); 
     arrowX = 0; 
     arrowY = 0; 
    } 

は、ここで矢印を描画し、変換するコードです：

function DrawArrowTranslate(tx, ty) { 
    modelViewStack.push(modelViewMatrix); 

    /* 
    var s = scale4(0.3, -0.7, 1); 
    var t = translate(0, -4, 0); 
    */ 
    var s = scale4(0.3, -0.7, 1); 
    var t = translate(0, -5, 0); 
    var t2 = translate(0 + tx, 1 + ty, 0) 

    // rotate takes angle in degrees 
    var rAngle = rotateAngle; 

    var r = rotate(rAngle, 0, 0, 1); 

    var m = mult(t, r); 
    var m = mult(m, t2); 
    modelViewMatrix = mat4(); 
    modelViewMatrix = mult(modelViewMatrix, m); 
    modelViewMatrix = mult(modelViewMatrix, s); 

    /* 
    // update bounding box 
    arrowBoundingBox.translate(0, -5); 
    arrowBoundingBox.rotate(rAngle); 
    arrowBoundingBox.translate(0, 1); 
    arrowBoundingBox.scale(0.3, -0.7); 
    */ 

    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); 
    gl.drawArrays(gl.LINE_STRIP, 1833, 4); 
    gl.drawArrays(gl.LINE_STRIP, 1837, 4); 

    modelViewMatrix = modelViewStack.pop(); 
} 

Answer 1

あなたのコードはかなり正しい見えますが、あなたはの使用を排除する必要がありますrotateNumber。代わりに正の角度と負の角度を使用して回転させることができます。ここではエラーの原因がわかりません。 SinとCosは、正、負、またはゼロのいずれかの角度を確実に処理できます。 幸運を祈る！

Answer 2

問題を見つけました。私は、回転が回転を狂わせていたので、回転する前に翻訳する必要があるときに回転した後に翻訳していました。