JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

JavaScript

//Adding a multiplier of 5 to visually see this better.

setTimeout(function () {
    (function (a, b, c) {
        //setting canvas width
        c.width = b * 5;
        //get context 2d of canvas
        t = c.getContext('2d');
        //setting storke style.
        t.strokeStyle = 'black';
        //looping from a to b
        //for (var z = a; z <= b; z++) {
        var i = a;
        var si = setInterval(function(){
            
            if(i > b){
                clearInterval(si);
                alert('stopping');
            }
            //calculating A(i) and converting it to a binary string
            g = (Math.floor(((i * i) + 6 * i * (i % 2) + 24) / 48) >>> 0).toString(2);
            //looping through that string
            for (j = 0; j < g.length; j++) {
                //since canvas is upside down and the first digit is actually the last digit:
                if (g[g.length - 1 - j] == '1') {
                    //we create the 1 by 1 rect
                    t.rect((i - a) * 5, j * 5, 5, 5);
                    //we draw the rect
                    t.fill();
                }
            }
            i++;
            }, 500);
        //}
        //we append everything to the body
        document.body.appendChild(c);
        //parameters are put here
    })(0, 300, document.createElement('canvas'));
}, 0);