Example of JavaScript Animation: derivation of dots

Time:2020-10-26

Consider the following curve equation:

          R=S*sqrt(n)

          α=n*θ

          X=R*SIN(α)

          Y=R*COS(α)    

Where s and θ can specify a fixed value. Take a total of 1000 values from 0 to 999 for N cycle. For each n, a coordinate value (x, y) is obtained according to the given coordinate equation. Then a circle with radius of 6 is drawn with (x, y) as the center of the circle, and a spiral figure can be obtained.

Write the following HTML code.

Derived <a target="_blank" href="https://developpaper.com/tag/dot/" title="View all posts in dot" target="_blank">dot</a>

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

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

   var scale = 10; 

   var theta = 30;  

   for (n=0;n<1000;n++)

   {

      var radius = scale * Math.sqrt(n);  

      var angle = n * theta * (Math.PI / 180);

      var x = radius * Math.cos(angle) + canvas.width / 2;

      var y = radius * Math.sin(angle) + canvas.height / 2;

      ctx.beginPath();

      ctx.arc(x, y, 6, 0, Math.PI * 2);

      ctx.fillStyle =’rgba(255,50,50,0.9)’;

      ctx.fill();

   }

Open the HTML file containing this HTML code in the browser, and you can see that the pattern shown in Figure 1 is drawn in the canvas.

Figure 1 the pattern drawn when scale = 10 and theta = 30

If the statement “var theta = 30;” in the above program is rewritten to “var theta = 60;”, and the rest remains unchanged, the pattern shown in Figure 2 is drawn on the canvas.

 

Figure 2 the pattern drawn when scale = 10 and theta = 60

In the program, theta represents the offset angle of the center of each small circle relative to the center of the previous small circle. A circle is 360 ° so when theta = 30, 360 / 30 = 12 radial lines will be drawn, as shown in Figure 1; when theta = 60, 360 / 60 = 6 radial lines will be drawn, as shown in Figure 2.

If the statement “var theta = 30;” in the above program is rewritten to “var theta = 110;”, and the rest remains unchanged, the pattern shown in Figure 3 is drawn on the canvas.

 

Figure 3 the pattern drawn when scale = 10 and theta = 110

If the statement “var scale = 10;” in the program is rewritten to “var scale = 6;”, the pattern as shown in Figure 4 is drawn on the canvas.

Figure 4 the pattern drawn when scale = 6 and theta = 110

If the statement “var scale = 10;” in the program is rewritten to “var scale = 15;”, the pattern shown in Figure 5 is drawn on the canvas.

 

Figure 5 the pattern drawn when scale = 15 and theta = 110

Compared with figures 3, 4 and 5, the density of each small circle can be known by the value of scale.

In the above program, the drawing process of 1000 small circles is displayed dynamically, and the following HTML file is compiled.

Derived dot

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

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

   var hue = 0;       

   var scale = 10; 

   var n = 0;   

   var theta = 30;

   function draw()

   {

      var radius = scale * Math.sqrt(n);  

      var angle = n * theta * (Math.PI / 180);

      var x = radius * Math.cos(angle) + canvas.width / 2;

      var y = radius * Math.sin(angle) + canvas.height / 2;

      hue++;

      if (hue >= 360)  hue = 0;

      ctx.beginPath();

      ctx.arc(x, y, 6, 0, Math.PI * 2);

      ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;

      ctx.fill();

      n++;

      if (n>=1000)

      {

          ctx.clearRect(0,0,canvas.width,canvas.height);

          n=0;

      }

   }

   setInterval(“draw()”,20);

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: dot derivation effect when scale = 10 and theta = 30

Changing the values of scale and theta produces different dot derived effects. For example, if you modify scale = 12 and theta = 137.5, the animation will appear in the browser window as shown in Figure 7.

 

Figure 7: dot derivation effect when scale = 12, theta = 137.5

Furthermore, we use the random number method to determine the value of the parameter scale and the offset angle theta of each iteration in the above program. Write the following HTML code.

Derived dot

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

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

   var hue = 0;       

   var scale = 12; 

   var n = 0;   

   var theta = 137.5;

   function rand(min,max)

   {

       return Math.floor(Math.random()*(max-min)+min)+(Math.random()>0.5?0.5:0);

   } 

   function draw()

   {

      var radius = scale * Math.sqrt(n);  

      var angle = n * theta * (Math.PI / 180);

      var x = radius * Math.cos(angle) + canvas.width / 2;

      var y = radius * Math.sin(angle) + canvas.height / 2;

      hue++;

      if (hue >= 360)  hue = 0;

      ctx.beginPath();

      ctx.arc(x, y, 6, 0, Math.PI * 2);

      ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;

      ctx.fill();

      n++;

      if (n>=500)

      {

          ctx.clearRect(0,0,canvas.width,canvas.height);

          scale=rand(6,15);

          theta=rand(20,170);

          n=0;

      }

   }

   setInterval(“draw()”,20);

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

 

Figure 8: animation effects derived from dots