const getAnimateCanvas =()=>{
    const mycanvas = document.getElementById('codeStreamCanvas');
    return mycanvas ;
}
const animate_coding_effect =()=> { 

    var H = window.innerHeight;
    var W = window.innerWidth;
    var mycanvas = getAnimateCanvas()
    var ctx = mycanvas.getContext('2d');

    mycanvas.height = H;
    mycanvas.width = W;

    var fontsize = 18;
    var text = [];
    var lie = Math.floor(W / fontsize);
    var str = '01'
    for (var i = 0; i < lie; i++) {
      text.push(0);
    }
    ctx.font = fontsize + 'px ';

    function draw() {
      ctx.fillStyle = 'rgba(0,0,0,0.08)'
      ctx.fillRect(0, 0, W, H);
      ctx.fillStyle = randColor();
      for (var i = 0; i < lie; i++) {
        var index = Math.floor(Math.random() * str.length);
        var x = Math.floor(fontsize * i)
        var y = text[i] * fontsize
        ctx.fillText(str[index], x, y);
        if (y > H && Math.random() > 0.99) {
          text[i] = 0
        }
        text[i]++;
      }
    }

    function randColor() {
      var r = Math.ceil(Math.random() * 155) + 100;
      var g = Math.ceil(Math.random() * 155) + 100;
      var b = Math.ceil(Math.random() * 155) + 100;
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
   
    var timer = setInterval(function() {
      draw();
    }, 1000 / 30)
}
const listenWindowSize = ()=>{
    window.οnresize=function(){ 
        var mycanvas = document.getElementById('mycanvas');
        if (!mycanvas) return ; 
        var H = window.innerHeight;
        var W = window.innerWidth; 
        mycanvas.height = H;
        mycanvas.width = W;
     } 
}  


window.onload=function(){
    //console.log('🚀 effect.js,window.onload')
    if (getAnimateCanvas()){
        animate_coding_effect()
        listenWindowSize();
    }
} 
 
//console.log('🚀 effect.js')