JavaScript animation example: rotated equilateral triangle

Time:2021-2-25

Given that the coordinates of the center of gravity of an equilateral triangle are (x0, Y0) and the height is h, you can draw an equilateral triangle with horizontal bottom edge with the following statement.

         ctx.beginPath();

         ctx.moveTo(x0,y0-h*2/3);

         ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); 

         ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3);

         ctx.lineTo(x0,y0-h*2/3);

         ctx.closePath();

         ctx.stroke();

Given the number of equilateral triangles count, count equilateral triangles with the same center of gravity and different heights can be drawn by circulation. Write the following HTML code.

Equilateral triangles with the same center of gravity and different heights

   var canvas=document.getElementById(‘myCanvas’);

   ctx= canvas.getContext(‘2d’);

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=4;

   ctx.lineWidth=1;

   ctx.fillStyle=”#FF3388″;

   ctx.strokeStyle=”#FFFFFF”;

   for (var i=0;i<count;i++)

   {

         var nHeight = height-(height/count)*i;

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

   };

Open the HTML file containing the HTML code in the browser, and you can see that four equilateral triangles with the same center of gravity and different heights are drawn in the browser window as shown in Figure 1.

Figure 1 – four equilateral triangles with the same center of gravity and different heights

If the three regular triangles in Figure 1 are rotated around the center of gravity except the outermost triangle, what effect will it produce?

Write the following HTML code.

Rotated regular triangle

   var canvas=document.getElementById(‘myCanvas’);

   ctx= canvas.getContext(‘2d’);

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=4;

   var speed=2;

   ctx.lineWidth=1;

   ctx.fillStyle=”#FF3388″;

   ctx.strokeStyle=”#FFFFFF”;

   var j = 0;

   function draw()

   {

      ctx.clearRect(0,0,500,500);

      ctx.save();

      for (var i=0;i<=count;i++)

      {

         var nHeight = height-(height/count)*i;

         ctx.translate(x0,y0);

         ctx.rotate(i*j/(80*speed));

         ctx.translate(-x0,-y0);

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

      };

      ctx.restore();

      j++;

      if (j>100000)  j=0;

   }

   function move()

   {

      draw();

      requestAnimationFrame(move);

   }

   move();

Open the HTML file containing this HTML code in the browser, and you can see the animation effect of equilateral triangles with the same center of gravity and different heights rotating around the center of gravity in the browser window as shown in Figure 2.

 

Figure 2. Rotation effect of equilateral triangle around the center of gravity (1)

If the above program in the statementvar speed=2;Rewrite asvar speed=-2;If the rest remains unchanged, the equilateral triangle will rotate counterclockwise, as shown in Figure 3.

 

Figure 3. Rotation effect of equilateral triangle around the center of gravity (2)

If the number of rotated triangles is increased and the level of rotation speed is appropriately lowered, the statement is modified

      var count=4;    var speed=2;” Forvar count=20;    var speed=12;And the rest remains unchanged, then the regular triangle rotation effect as shown in Figure 4 appears in the canvas.

 

Figure 4. Rotation effect of equilateral triangle around the center of gravity (3)

As can be seen from figures 2, 3 or 4, when an equilateral triangle rotates around the center of gravity, the smaller the triangle, the faster it rotates. If all equilateral triangles are rotated with the same angular velocity, the statement is simply modifiedctx.rotate(i*j/(80*speed));byctx.rotate(j/(80*speed));Then the regular triangle rotation effect as shown in Figure 5 is displayed in the canvas.

 

Figure 5: rotation effect of equilateral triangle around the center of gravity (4)

If the cutting area is set for the rotated regular triangle, the part beyond the outermost triangle will not be visible. Write the following HTML file.

Rotated regular triangle

   var canvas=document.getElementById(‘myCanvas’);

   ctx= canvas.getContext(‘2d’);

   var height=360;

   var x0=250;

   var y0=(500-height)/2-(height/7)+(height*2/3);

   var count=24;

   var speed=18;

   ctx.lineWidth=2;

   ctx.fillStyle=”#FF3388″;

   ctx.strokeStyle=”#FFFFFF”;

   var j = 0;

   function draw()

   {

      ctx.clearRect(0,0,500,500);

      ctx.save();

      for (var i=0;i<=count;i++)

      {

         var nHeight = height-(height/count)*i;

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.clip();

         ctx.translate(x0,y0);

         ctx.rotate(i*j/(80*speed));

         ctx.translate(-x0,-y0);

         ctx.beginPath();

         ctx.moveTo(x0,y0-nHeight*2/3);

         ctx.lineTo(x0+nHeight/Math.sqrt(3), y0+nHeight/3); 

         ctx.lineTo(x0-nHeight/Math.sqrt(3), y0+nHeight/3);

         ctx.lineTo(x0,y0-nHeight*2/3);

         ctx.closePath();

         ctx.stroke();

         ctx.fill();

      };

      ctx.restore();

      j++;

      if (j>1000)  j=0;

   }

   function move()

   {

      draw();

      requestAnimationFrame(move);

   }

   move();

Open the HTML file containing the HTML code in the browser, and you can see the rotation effect in the browser window as shown in Figure 6.

 

Figure 6. Rotation in an equilateral triangle