Home/ Questions/Q 7498491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T19:29:43+00:00

I’m trying to simulate the Matrix code rain with the canvas element and javascript.

  • 0

I’m trying to simulate the Matrix code rain with the canvas element and javascript. I am able to make one element drop at a time but not multiple. How do I drop multiple matrix rain drops. Here is my code:

   <html>
    <head>
        <title>Matrix Code Rain</title>
        <style>
            *{margin:0; padding:0; }
            body{background:black;}
        </style>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("c");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.background = "black";
            var c = canvas.getContext("2d");
            var code = ["<html>","<p>","<b>","<strong>","<head>","<body>","<a>","<i>","<div>","<form>","<ol>","<li>","<ul>","<pre>","<nav>","<footer>","<header>","<article>","<section>","<em>","<style>","<title>","<meta>","<br>","<table>"];
            var rain = [ ];
            var max = 10;
            for(var i = 0; i < max; i++){
                var drop =  {};
                drop.code = Math.round(Math.random() * code.length);
                drop.x = Math.random() * canvas.width;
                drop.y = 0;
                drop.size = Math.random() * 40;
                drop.speed = drop.size/4;
                rain.push(drop);
            }
            var y = 0;
            c.fillStyle="lime";
            setTimeout(function(){
                 c.clearRect(0,0,canvas.width,canvas.height);
                 for(var i = 0; i < max; i++){
                    var drop = rain[i];
                    c.font = drop.size+"pt arial";
                    c.fillText(drop.code,drop.x,drop.y);
                    drop.y += drop.speed;
                    if(drop.y > canvas.height + drop.size)
                        drop.y = 0;
                 }
            },1000/60);
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make a bunch of independent objects that all get their own word and position and speed.

    Then print them all and advance them by their speed.

    Here’s a clean example for you:

    http://jsfiddle.net/U5eFJ/

    The important code:

    var code = ["<html>", "<p>", "<b>", "<strong>", "<head>", "<body>", "<a>", "<i>", "<div>", "<form>", "<ol>", "<li>", "<ul>", "<pre>", "<nav>", "<footer>", "<header>", "<article>", "<section>", "<em>", "<style>", "<title>", "<meta>", "<br>", "<table>"];

// make 90 things to fall with a random code element and random starting location
var things = [];
var THINGCOUNT = 90;
for (var i = 0; i < THINGCOUNT; i++) {
    var a = {};
    //randomly pick one tag
    a.code = code[Math.round(Math.random() * code.length)];
    a.x = Math.random()*500; //random X
    a.y = Math.random()*500 -500; // random Y that is above the screen
    a.speed = Math.random()*10;
    things.push(a);
}

setInterval(function() {
    ctx.clearRect(0,0,500,500);
    for (var i = 0; i < THINGCOUNT; i++) {
        var a = things[i];
        ctx.fillText(a.code, a.x, a.y);
        a.y += a.speed; // fall downwards by the speed amount
        if (a.y > 600) a.y = -50; // if off the screen at bottom put back to top
    }
}, 90);
​

    ​

    • 0