matrix.html

<!-- https://github.com/javascriptacademy-stash/digital-rain -->
<!-- plus extras -->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<link rel="stylesheet" href="./styles.css">-->
    <title>Matrix digital rain</title>

    <style>
      html {
          background: black;
          height: 100%;
          overflow: hidden;
      }

      body {
          margin: 0;
          padding: 0;
          height: 100%;
      }
    </style>

    <script>

          var colors = ["#FFBA0A","#00F59A","#3FBFE3","#FF6376"];
          var newColor;
          var color;

          function swapColors(){
            newColor = Math.floor(Math.random() * 4);
            color = colors[newColor];
            return color;
          }

    </script>

</head>

<body>
    <canvas id="Matrix"></canvas>
    <!--<script src="./index.js"></script>-->


    <script>
    const canvas = document.getElementById('Matrix');
    const context = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const nums = '0123456789';

    const alphabet = katakana + latin + nums;

    const fontSize = 16;
    const columns = canvas.width/fontSize;

    const rainDrops = [];

    for( let x = 0; x < columns; x++ ) {
    	rainDrops[x] = 1;
    }

    const draw = () => {
    	context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    	context.fillRect(0, 0, canvas.width, canvas.height);

    	context.fillStyle = '#BFABFF'; //'#0F0';
    	context.font = fontSize + 'px monospace';

    	for(let i = 0; i < rainDrops.length; i++)
    	{
    		const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));

        if(text == "T" || text == "W" || text == "I" || text == "C" || text == "H"){
          context.fillStyle = swapColors();
        	context.font = 'bold ' + fontSize + 'px monospace';
        }


        context.fillText(text, i*fontSize, rainDrops[i]*fontSize);

        context.fillStyle = '#BFABFF';
      	context.font = fontSize + 'px monospace';


    		if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
    			rainDrops[i] = 0;
            }
    		rainDrops[i]++;
    	}
    };

    setInterval(draw, 70);
    </script>

</body>
</html>