如何使用onclick改变旋转方向

Question

I should make a star rotating on first run, once the mouse is clicked the star should change its color and rotate in the opposite direction, if clicked again it should change the color and the direction again and so on.

I made 2 matrices one for each direction

     function rotateZ(m, angle) {  // angle (distance) = velocity * time
      
        var csine = Math.cos(angle);
        var sine = Math.sin(angle);
      //  var sineanticlockwise= math.sin(angle)*-1;


        var mv0 = m[0], mv4 = m[4], mv8 = m[8];

        m[0] = csine *m[0]-sine *m[1];
       m[4] = csine *m[4]-sine *m[5];

       m[1] = csine *m[1]+sine *mv0;
       m[5] = csine *m[5] +sine *mv4;
     }

     function rotateclockwise(m, angle) {  // angle (distance) = velocity * time
      
        var csine = Math.cos(angle);
        var sine = Math.sin(angle)*-1;
      //  var sineanticlockwise= math.sin(angle)*-1;


        var mv0 = m[0], mv4 = m[4], mv8 = m[8];

        m[0] = csine *m[0]-sine *m[1];
       m[4] = csine *m[4]-sine *m[5];

       m[1] = csine *m[1]+sine *mv0;
       m[5] = csine *m[5] +sine *mv4;
     }

this is the animate function with a condition inside so that when the mouse event call it it changes direction every time the mouse is clicked but it doesn't work I tried putting it in the mouse event and still

     var click=true;
     var time_old = 0;
     var animate = function(time) {
        var dt = time-time_old;
        
        if (click=true)
        {
            rotateZ(mov_matrix,dt*0.002); // distance = time* velocity(speed)
        time_old = time;
        click=false;
        }

        else
        {
     rotateclockwise(mov_matrix,dt*0.002); // distance = time* velocity(speed)
        time_old = time;
        click=true;
        }
 
     /* Step5: Drawing the required object (triangle) */
     gl.clearColor(0.19, 0.19, 0.20, 1); // Clear the canvas
     gl.enable(gl.DEPTH_TEST); // Enable the depth test
     gl.clear(gl.COLOR_BUFFER_BIT); // Clear the color buffer bit
     gl.viewport(0,0,canvas.width,canvas.height); // Set the view port
     gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
     gl.drawArrays(gl.TRIANGLES, 0, 9);  // Draw the triangles

        window.requestAnimationFrame(animate);   
     }


      function mouseFunction(e){

    var clickXrelativToCanvas = e.pageX - e.target.offsetLeft;
    var clickYrelativToCanvas = e.pageY - e.target.offsetTop;


    color = [Math.random(), Math.random(), Math.random(), 1];
    var colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
    gl.uniform4fv(colorLocation, color);
      var time_old = 0;
     rotateZ(mov_matrix, dt*0.002);
     //rotateclockwise (mov_matrix, dt*0.002);

  };
     animate(0);

Answer 1

There are issues with the code. Whether fixing them is enough to make your code work is not clear

First off the if is not checking if click is true, it's setting click to true.

if (click = true)    // bad
if (click === true)  // good

and in general you should use === not ==

second the 2 code paths for the if both set click

  if (click === true) {   // <------------ fixed
    rotateZ(mov_matrix, dt * 0.002); // distance = time* velocity(speed)
    time_old = time;
    click = false;        // <------------ WHAT?
  } else {
    rotateclockwise(mov_matrix, dt * 0.002); // distance = time* velocity(speed)
    time_old = time;
    click = true;         // <------------ WHAT?
  }

It seems like you should delete those 2 lines otherwise every time through the loop it will just toggle click true -> false -> true -> false. Instead toggle click in the mouse function

function mouseFunction(e) {
  click = !click;
  ...

Not sure why this code is in the mouse function

     var time_old = 0;
     rotateZ(mov_matrix, dt*0.002);

A more common way to do this though would be to set a rotation speed

var rotationSpeed = 0.002;
var time_old = 0;
var animate = function(time) {
  var dt = time - time_old;
  time_old = time;

  rotateZ(mov_matrix, dt * rotationSpeed); // distance = time* velocity(speed)

  /* Step5: Drawing the required object (triangle) */
  gl.clearColor(0.19, 0.19, 0.20, 1); // Clear the canvas
  gl.enable(gl.DEPTH_TEST); // Enable the depth test
  gl.clear(gl.COLOR_BUFFER_BIT); // Clear the color buffer bit
  gl.viewport(0, 0, canvas.width, canvas.height); // Set the view port
  gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
  gl.drawArrays(gl.TRIANGLES, 0, 9); // Draw the triangles

  window.requestAnimationFrame(animate);
}


function mouseFunction(e) {
  rotationSpeed = -rotationSpeed; // flip the direction of rotation

  var clickXrelativToCanvas = e.pageX - e.target.offsetLeft;
  var clickYrelativToCanvas = e.pageY - e.target.offsetTop;


  color = [Math.random(), Math.random(), Math.random(), 1];
  var colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
  gl.uniform4fv(colorLocation, color);
};
animate(0);

It's also not common to set uniforms in mouse events. It only works because you're drawing 1 thing. As soon as you try to draw 2 things in different colors you'll need to move setting the color inside animate so in the mouse function you'd choose a color but on animate you'd call gl.uinform4fv(colorLocation, color)