peterlevi · April 5, 2019 17:57
diff --git a/fire.html b/fire.html
 <html>

 <body style="margin: 0; padding: 0;">
    <canvas id="canvas" style="width: 200px; height: 200px" width="200" height="200">

    </canvas>
    <table id="colors" width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse; display: inline;">
        <tbody>
            <tr>
                <td style="background-color: #070707">&nbsp;</td>
                <td style="background-color: #1f0707">&nbsp;</td>
                <td style="background-color: #2f0f07">&nbsp;</td>
                <td style="background-color: #470f07">&nbsp;</td>
                <td style="background-color: #571707">&nbsp;</td>
                <td style="background-color: #671f07">&nbsp;</td>
                <td style="background-color: #771f07">&nbsp;</td>
                <td style="background-color: #8f2707">&nbsp;</td>
                <td style="background-color: #9f2f07">&nbsp;</td>
                <td style="background-color: #af3f07">&nbsp;</td>
                <td style="background-color: #bf4707">&nbsp;</td>
                <td style="background-color: #c74707">&nbsp;</td>
                <td style="background-color: #DF4F07">&nbsp;</td>
                <td style="background-color: #DF5707">&nbsp;</td>
                <td style="background-color: #DF5707">&nbsp;</td>
                <td style="background-color: #D75F07">&nbsp;</td>
                <td style="background-color: #D7670F">&nbsp;</td>
                <td style="background-color: #cf6f0f">&nbsp;</td>
                <td style="background-color: #cf770f">&nbsp;</td>
                <td style="background-color: #cf7f0f">&nbsp;</td>
                <td style="background-color: #CF8717">&nbsp;</td>
                <td style="background-color: #C78717">&nbsp;</td>
                <td style="background-color: #C78F17">&nbsp;</td>
                <td style="background-color: #C7971F">&nbsp;</td>
                <td style="background-color: #BF9F1F">&nbsp;</td>
                <td style="background-color: #BF9F1F">&nbsp;</td>
                <td style="background-color: #BFA727">&nbsp;</td>
                <td style="background-color: #BFA727">&nbsp;</td>
                <td style="background-color: #BFAF2F">&nbsp;</td>
                <td style="background-color: #B7AF2F">&nbsp;</td>
                <td style="background-color: #B7B72F">&nbsp;</td>
                <td style="background-color: #B7B737">&nbsp;</td>
                <td style="background-color: #CFCF6F">&nbsp;</td>
                <td style="background-color: #DFDF9F">&nbsp;</td>
                <td style="background-color: #EFEFC7">&nbsp;</td>
                <td style="background-color: #FFFFFF">&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var w = canvas.width;
        var h = canvas.height;
        console.log('w', w);
        console.log('h', h);
        var ctx = canvas.getContext("2d");
        var canvasData = ctx.getImageData(0, 0, w, h);
        var colorLen = document.querySelectorAll("#colors td").length;

        var colors = [];
        for (var color = 0; color < colorLen; color++) {
            colors[color] = document.querySelectorAll("#colors td")[color].style['background-color'];
        }

        var fire = [];
        for (var i = 0; i < h; i++) {
            fire[i] = [];
        }

        function drawPixel(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, 1, 1);
        }

        function draw(x, y, colorIdx) {
            var color = colors[colorIdx];
            drawPixel(x, y, color);
        }

        for (var y = 0; y < h; y++) {
            for (var x = 0; x < w; x++) {
                fire[y][x] = 0;
                fire[0][x] = colorLen - 1;
            }
        }

        function doFire() {
            for (var y = 1; y < h; y++) {
                for (var x = 0; x < w; x++) {
                    spreadFire(x, y);
                }
            }
        }

        function spreadFire(x, y) {
            var rand = Math.round(Math.random() * 4) - 2;
            var srcx = Math.max(0, Math.min(w - 1, x + rand));
            var r = Math.random();
            fire[y][x] = r < 0.5 ? fire[y][x] :
                Math.min(colorLen, Math.max(0,
                    fire[y - 1][srcx] - 
                    (Math.random() < 0.35 ? 1 : 0)) + 
                    (Math.random() < 0.05 ? 1 : 0));
        }

        function drawFire() {
            for (var i = 0; i < w; i++) {
                for (var j = 0; j < h; j++) {
                    draw(i, h - j, fire[j][i]);
                }
            }
        }

        setInterval(function () {
            doFire();
            drawFire();
        }, 1);
    </script>

 </body>

 </html>
	<html>

	<body style="margin: 0; padding: 0;">
	<canvas id="canvas" style="width: 200px; height: 200px" width="200" height="200">

	</canvas>
	<table id="colors" width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse; display: inline;">
	<tbody>
	<tr>
	<td style="background-color: #070707"> </td>
	<td style="background-color: #1f0707"> </td>
	<td style="background-color: #2f0f07"> </td>
	<td style="background-color: #470f07"> </td>
	<td style="background-color: #571707"> </td>
	<td style="background-color: #671f07"> </td>
	<td style="background-color: #771f07"> </td>
	<td style="background-color: #8f2707"> </td>
	<td style="background-color: #9f2f07"> </td>
	<td style="background-color: #af3f07"> </td>
	<td style="background-color: #bf4707"> </td>
	<td style="background-color: #c74707"> </td>
	<td style="background-color: #DF4F07"> </td>
	<td style="background-color: #DF5707"> </td>
	<td style="background-color: #DF5707"> </td>
	<td style="background-color: #D75F07"> </td>
	<td style="background-color: #D7670F"> </td>
	<td style="background-color: #cf6f0f"> </td>
	<td style="background-color: #cf770f"> </td>
	<td style="background-color: #cf7f0f"> </td>
	<td style="background-color: #CF8717"> </td>
	<td style="background-color: #C78717"> </td>
	<td style="background-color: #C78F17"> </td>
	<td style="background-color: #C7971F"> </td>
	<td style="background-color: #BF9F1F"> </td>
	<td style="background-color: #BF9F1F"> </td>
	<td style="background-color: #BFA727"> </td>
	<td style="background-color: #BFA727"> </td>
	<td style="background-color: #BFAF2F"> </td>
	<td style="background-color: #B7AF2F"> </td>
	<td style="background-color: #B7B72F"> </td>
	<td style="background-color: #B7B737"> </td>
	<td style="background-color: #CFCF6F"> </td>
	<td style="background-color: #DFDF9F"> </td>
	<td style="background-color: #EFEFC7"> </td>
	<td style="background-color: #FFFFFF"> </td>
	</tr>
	</tbody>
	</table>
	<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	var w = canvas.width;
	var h = canvas.height;
	console.log('w', w);
	console.log('h', h);
	var ctx = canvas.getContext("2d");
	var canvasData = ctx.getImageData(0, 0, w, h);
	var colorLen = document.querySelectorAll("#colors td").length;

	var colors = [];
	for (var color = 0; color < colorLen; color++) {
	colors[color] = document.querySelectorAll("#colors td")[color].style['background-color'];
	}

	var fire = [];
	for (var i = 0; i < h; i++) {
	fire[i] = [];
	}

	function drawPixel(x, y, color) {
	ctx.fillStyle = color;
	ctx.fillRect(x, y, 1, 1);
	}

	function draw(x, y, colorIdx) {
	var color = colors[colorIdx];
	drawPixel(x, y, color);
	}

	for (var y = 0; y < h; y++) {
	for (var x = 0; x < w; x++) {
	fire[y][x] = 0;
	fire[0][x] = colorLen - 1;
	}
	}

	function doFire() {
	for (var y = 1; y < h; y++) {
	for (var x = 0; x < w; x++) {
	spreadFire(x, y);
	}
	}
	}

	function spreadFire(x, y) {
	var rand = Math.round(Math.random() * 4) - 2;
	var srcx = Math.max(0, Math.min(w - 1, x + rand));
	var r = Math.random();
	fire[y][x] = r < 0.5 ? fire[y][x] :
	Math.min(colorLen, Math.max(0,
	fire[y - 1][srcx] -
	(Math.random() < 0.35 ? 1 : 0)) +
	(Math.random() < 0.05 ? 1 : 0));
	}

	function drawFire() {
	for (var i = 0; i < w; i++) {
	for (var j = 0; j < h; j++) {
	draw(i, h - j, fire[j][i]);
	}
	}
	}

	setInterval(function () {
	doFire();
	drawFire();
	}, 1);
	</script>

	</body>

	</html>