Example of JavaScript Animation: letter effect of motion

Time:2020-10-30

The coordinate equation of the known circle is as follows:

          X=R*SIN(θ)

          Y=R*COS(θ)     (0≤θ≤2π)

Given the initial coordinate position (x, y), according to the coordinate equation of the circle, starting from angle = 0, every interval anglespeed = 0.2, a coordinate value (x, y) is obtained, and this coordinate value is added to the initial coordinate position as the offset change, that is, letters are filled at (x + X, y + y)A。 After filling in 15 letters, clear the canvas and start the animation process again from the initial coordinate position.

Write the following HTML code.

Rotating letters (1)

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

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

    var w2 = Math.floor(canvas.width/ 2);

    var h2 = Math.floor(canvas.height/ 2);

    var pi2 = Math.PI * 2;

    ctx.font = “36px Impact”;

    ctx.translate(w2, h2);

    var char = “A”;

    var x =0;

    var y =0;

    var radius = 30;

    var angle = 0;

    var angleSpeed = 0.2;

    var color=’rgba(0,255,255,0.9)’;

    var age = 0;

    function animate()

    {

        ctx.fillStyle=color;

        ctx.fillText(char, x, y);

        x += Math.cos(angle) * radius;

        y += Math.sin(angle) * radius;

        angle += angleSpeed;

        age++;

        if (age >= 15)

        {

           ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

           x = 0;

           y = 0;

           angle = 0;

           age=0;

        }

    }

    setInterval(‘animate()’,100);

Open the HTML file containing this HTML code in the browser, and you can see the animation effect shown in Figure 1 in the browser window.

 

Figure 1. The effect of letter motion with anglespeed = 0.2

If the statement “var anglespeed = 0.2;” in the above program is rewritten to “var anglespeed = 0.45;” and the rest remains unchanged, the animation effect as shown in Figure 2 will be displayed in the browser window.

 

Figure 2. The effect of letter motion with anglespeed = 0.45

From figures 1 and 2, we can see that the output letters areAIt looks like it’s along a circumference, but the letters are all facing straight up. Can you make the letters go in the direction of the circumference? This requires proper rotation of the coordinates when the letters are output. Put the statement in the program

            ctx.fillText(char, x, y);

Rewrite as follows:

        ctx.translate(x, y);

        ctx.rotate(angle + pi2 / 4);

        ctx.fillText(char, -13,10);

        ctx.rotate(-angle-pi2 / 4);

        ctx.translate(-x, -y);

The rest remains unchanged, and the animation effect shown in Figure 3 is displayed in the browser window.

 

Figure 3. Letters moving along the circumference of a circle

As can be seen from Figure 3, the lettersAThe trajectory of the motion is determined. What if we add random factors to the change of angle angle? Write the following HTML file.

Rotating letters (2)

Open the HTML file containing this HTML code in the browser, and you can see the animation effect shown in Figure 4 in the browser window. At this point, the trajectory of the letter changes randomly.

 

Figure 4. Letters with random variations moving along the circumference

Further, we consider whether we can draw 5 letter tracks of Fig. 4 according to a circle? A cycle plus appropriate coordinate rotation can be used. Write the following HTML file.

Rotating letters (3)

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

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

    var w2 = Math.floor(canvas.width/ 2);

    var h2 = Math.floor(canvas.height/ 2);

    var pi2 = Math.PI * 2;

    ctx.font = “36px Impact”;

    ctx.translate(w2, h2);

    var char = “A”;

    var x =30;

    var y =30;

    var radius = 30;

    var angle = pi2*0.05;

    var angleSpeed = 0.2;

    color=’rgba(0,255,255,0.9)’;

    age = 0;

    symmetry =5;

    function animate()

    {

        for (i = 0;i<symmetry; i++)

        {

            ctx.fillStyle=color;

            ctx.translate(x, y);

            ctx.rotate(angle + pi2 / 4);

            ctx.fillText(char, -13, 10);

            ctx.rotate(-angle-pi2 / 4);

            ctx.translate(-x, -y);

            ctx.rotate(pi2 / symmetry);

        }

        x += Math.cos(angle) * radius;

        y += Math.sin(angle) * radius;

        angle += angleSpeed;

        age++;

        if (Math.random() > 0.75)

        {

             angleSpeed *= -1;

        }

        if (age >= 15)

        {

           ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

           x = 30;

           y = 30;

           angle = pi2*0.05;

           angleSpeed = 0.2;

           age=0;

        }

    }

    setInterval(‘animate()’,100);

Open the HTML file containing this HTML code in the browser, and you can see the animation effect shown in Figure 5 in the browser window.

 

Figure 5 lettersAFive similar trajectories of

Furthermore, the initial coordinate position (x, y), initial angle angle, angular speed, color of letter filling and number of similar tracks in the above program are determined by random number, for example:

       x = rand(-w2/2,w2/2);

       y = rand(-h2/2,h2/2);

       angle = Math.random() * pi2;

       angleSpeed = Math.random() * 1 – 0.5;

       color=’rgba(‘+rand(0,255)+’,’+rand(0,255)+’,’+rand(0,255)+’,0.9)’;

       symmetry =rand(3,10);

Write the following HTML code.

Rotating letters (4)

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

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

    var w2 = Math.floor(canvas.width/ 2);

    var h2 = Math.floor(canvas.height/ 2);

    var pi2 = Math.PI * 2;

    ctx.font = “36px Impact”;

    ctx.translate(w2, h2);

    function rand(min,max)

    {

        return Math.floor(Math.random()*(max-min)+min)

    }  

    var char = “A”;

    var x,y,radius,angle,angleSpeed,color,age,symmetry;

    function reset()

    {

       x = rand(-w2/2,w2/2);

       y = rand(-h2/2,h2/2);

       radius = 30;

       angle = Math.random() * pi2;

       angleSpeed = Math.random() * 1 – 0.5;

       color=’rgba(‘+rand(0,255)+’,’+rand(0,255)+’,’+rand(0,255)+’,0.9)’;

       age = 0;

       symmetry =rand(3,10);

    }

    reset();

    function animate()

    {

        for (i = 0;i<symmetry; i++)

        {

            ctx.fillStyle=color;

            ctx.translate(x, y);

            ctx.rotate(angle + pi2 / 4);

            ctx.fillText(char, -13, 10);

            ctx.rotate(-angle-pi2 / 4);

            ctx.translate(-x, -y);

            ctx.rotate(pi2 / symmetry);

        }

        x += Math.cos(angle) * radius;

        y += Math.sin(angle) * radius;

        angle += angleSpeed;

        age++;

        if (Math.random() > 0.75)

        {

             angleSpeed *= -1;

        }

        if (age >= 18)

        {

          ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

          reset();

        }

    }

    setInterval(‘animate()’,50);

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

 

Figure 6 lettersARandom motion of

Finally, on the basis of Figure 6, we consider whether we can make multiple letters move periodically to get the motion effect of letters? Write the following HTML file.

Rotating letters (5)

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

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

    var w2 = Math.floor(canvas.width/ 2);

    var h2 = Math.floor(canvas.height/ 2);

    var pi2 = Math.PI * 2;

    ctx.font = “36px Impact”;

    ctx.translate(w2, h2);

    var srcChar =[“A”,”B”,”C”,”D”,”E”,”F”];

    var particles = [];

    var eIndex = 0;

    var rCnt=0;

    function rand(min,max)

    {

        return Math.floor(Math.random()*(max-min)+min)

    }  

    function resetPart(part)

    {

       part.char = srcChar[eIndex++];

       if (eIndex>=srcChar.length)

       {

           eIndex=0;

       }

       part.x = rand(-w2/2,w2/2);

       part.y = rand(-h2/2,h2/2);

       part.radius = 30;

       part.angle = Math.random() * pi2;

       part.angleSpeed = Math.random() * 1 – 0.5;

       part.color=’rgba(‘+rand(0,255)+’,’+rand(0,255)+’,’+rand(0,255)+’,0.9)’;

       part.age = 0;

       part.symmetry =rand(3,10);

    }

    var count=2;

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

    {

        var part;

        part = {};

        resetPart(part);

        rCnt++;

        particles.push(part);

    }

    function animate()

    {

       for (i =0;i<particles.length; i++)

       {

          part = particles[i];

          for (j = 0;j<part.symmetry; j++)

          {

              ctx.fillStyle=part.color;

              ctx.translate(part.x, part.y);

              ctx.rotate(part.angle + pi2 / 4);

              ctx.fillText(part.char, -13, 10);

              ctx.rotate(-part.angle-pi2 / 4);

              ctx.translate(-part.x, -part.y);

              ctx.rotate(pi2 / part.symmetry);

          }

          part.x += Math.cos(part.angle) * part.radius;

          part.y += Math.sin(part.angle) * part.radius;

          part.angle += part.angleSpeed;

          part.age++;

          if (Math.random() > 0.75)

          {

              part.angleSpeed *= -1;

          }

          if (part.age >= 18)

          {

             resetPart(part);

             rCnt++;

             if (rCnt==6)

             {

                rCnt=0;

                ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height);

             }

          }

       }

    }

    setInterval(‘animate()’,50);

Open the HTML file containing this HTML code in the browser, and you can see the animation effect shown in Figure 7 in the browser window.

 

Figure 7 motion effects of letters