Canvas Matrix Animation JS-CodePudding

I've found this example on codePen,
and the first iteration when letters moving in one line looks terrible,
is it possible to start moving columns from different postions from start? (not from second iteration)
my solution is terrible too:
I've added @keyframes with opacity 0 to 100
and added animation with duration 3s and animation-timing-function: step-end;

// geting canvas by Boujjou Achraf
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        //making the canvas full screen
        c.height = window.innerHeight;
        c.width = window.innerWidth;

        //chinese characters - taken from the unicode charset
        var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^% -/~{[|`]}";
        //converting the string into an array of single characters
        matrix = matrix.split("");

        var font_size = 10;
        var columns = c.width/font_size; //number of columns for the rain
        //an array of drops - one per column
        var drops = [];
        //x below is the x coordinate
        //1 = y co-ordinate of the drop(same for every drop initially)
        for(var x = 0; x < columns; x  )
            drops[x] = 1; 

        //drawing the characters
        function draw()
        {
            //Black BG for the canvas
            //translucent BG to show trail
            ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = "#f4427d";//green text
            ctx.font = font_size   "px arial";
            //looping over drops
            for(var i = 0; i < drops.length; i  )
            {
                //a random chinese character to print
                var text = matrix[Math.floor(Math.random()*matrix.length)];
                //x = i*font_size, y = value of drops[i]*font_size
                ctx.fillText(text, i*font_size, drops[i]*font_size);

                //sending the drop back to the top randomly after it has crossed the screen
                //adding a randomness to the reset to make the drops scattered on the Y axis
                if(drops[i]*font_size > c.height && Math.random() > 0.975)
                    drops[i] = 0;

                //incrementing Y coordinate
                drops[i]  ;
            }
        }

        setInterval(draw, 35);

/* By Boujjou Achraf*/

/*basic reset */
            
            *{
                margin: 0;
                padding: 0;
            }
            
            body {background: black;}
            canvas {display:block;}

/* By Boujjou Achraf*/

<html>
 
    <head>
        
    </head>
    <body>
    
        <canvas id="c"></canvas>
        
    </body>
</html>

CodePudding user response：

The vertical screen position for each of the animations' letters is stored in an array called drops.

At startup each letter gets the same initial position by the following two lines:

for (var x = 0; x < columns; x  )
    drops[x] = 1;

You can make each letter's position a random number from 0 to the height of the canvas element by changing the above to this:

for (var x = 0; x < columns; x  )
    drops[x] = parseInt(Math.random() * c.height);

Math.random() returns a floating point number between 0 and 1 and c.height returns the height of the <canvas> element. By multiplying these two values we get a random number between 0 and the canvas' height.

Here's your modified example:

var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^% -/~{[|`]}";
//converting the string into an array of single characters
matrix = matrix.split("");

var font_size = 10;
var columns = c.width / font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for (var x = 0; x < columns; x  )
  drops[x] = parseInt(Math.random() * c.height);

//drawing the characters
function draw() {
  //Black BG for the canvas
  //translucent BG to show trail
  ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
  ctx.fillRect(0, 0, c.width, c.height);

  ctx.fillStyle = "#f4427d"; //green text
  ctx.font = font_size   "px arial";
  //looping over drops
  for (var i = 0; i < drops.length; i  ) {
    //a random chinese character to print
    var text = matrix[Math.floor(Math.random() * matrix.length)];
    //x = i*font_size, y = value of drops[i]*font_size
    ctx.fillText(text, i * font_size, drops[i] * font_size);

    //sending the drop back to the top randomly after it has crossed the screen
    //adding a randomness to the reset to make the drops scattered on the Y axis
    if (drops[i] * font_size > c.height && Math.random() > 0.975)
      drops[i] = 0;

    //incrementing Y coordinate
    drops[i]  ;
  }
}

setInterval(draw, 35);

* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

canvas {
  display: block;
}

<canvas id="c"></canvas>