Déplacement d'une flèche pivotée en ligne droite

Question

J'essaie de déplacer une flèche, qui pourrait être tournée, en ligne droite. J'ai de la difficulté à trouver la bonne formule à utiliser. Je sais que cela devrait probablement impliquer le sinus et le cosinus, mais j'ai essayé différentes configurations et je n'ai pas réussi à obtenir quelque chose qui fonctionne.

Voici une photo de ma scène avec la flèche et l'arc

rotateNumber est un entier comme -1 (pour 1 rotation à gauche), 0 (pas de rotation), 1 (1 rotation à droite), etc.

rotateAngle est de 10 degrés par défaut.

Voici le code pour déplacer la flèche:

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

Voici le code pour dessiner et traduire la flèche:

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

Votre code semble tout à fait correct, mais vous devez éliminer l'utilisation du rotateNumber. Vous pouvez simplement utiliser des angles positifs et négatifs pour la rotation, en éliminant ce que j'imagine être la cause de l'erreur ici. Sin et Cos peuvent certainement gérer des angles de toute magnitude positive, négative ou nulle. Bonne chance!

Answer 2

J'ai trouvé le problème. Je traduisais après la rotation quand j'avais besoin de traduire avant de tourner, car la rotation gâchait la traduction.