When you live in the sewer open flames is something you want to avoid, just in case the methane flows in ways you didn’t discover.

The TMNT IT department came up with a solution – and although it might not give physical warmth, it certainly is deeply heartfelt.

HTML5 Canvas tags with fun script never fails. This adds to the main/article tags used at SOME blogging from the interwebs | Arctic Cloud Developer Challenge Submissions (acdc.blog)

Some code illustrating the fire effect.. ping us for the demoFX main module.

var Fire = (function() {
    function Fire() {
        this.palette = new Uint8Array(256 * 4);
        this.screen = new Uint8Array(0);
    }
    Fire.prototype.init = function(width, height) {
        return __awaiter(this, void 0, void 0, function() {
            var vOfs, v;
            return __generator(this, function(_a) {
                this.width = width;
                this.height = height;
                this.screen = new Uint8Array(this.width * (this.height + 2));
                vOfs = 0;
                for (v = 0; v < 256; v++) {
                    this.palette[vOfs++] = v >> 1;
                    this.palette[vOfs++] = v >> 3;
                    this.palette[vOfs++] = v >> 4;
                    vOfs++;
                }
                return [2];
            });
        });
    };
    Fire.prototype.render = function(ctx, _) {
        var dest = ctx.getImageData(0, 0, this.width, this.height);
        var ofs = 0;
        for (; ofs < this.width * this.height; ofs++) {
            var y1 = (this.screen[ofs + this.width - 1] +
                this.screen[ofs + this.width]) >> 1;
            var y2 = (this.screen[ofs + this.width * 2] +
                this.screen[ofs + this.width * 2 + 1]) >> 1;
            this.screen[ofs] = Math.max(((y1 + y2) >> 1) - 2, 0);
        }
        for (; ofs < this.width * (this.height + 2); ofs++) {
            this.screen[ofs] = Math.random() > 0.5 ? 255 : 0;
        }
        ofs = 0;
        for (var destOfs = 0; destOfs < this.width * this.height * 4;) {
            var pix = this.screen[ofs++] * 4;
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = 0xff;
        }
        ctx.putImageData(dest, 0, 0);
    };
    return Fire;
}());
demoFX.register("fire", new Fire());
</script>
<canvas id="fire" width="80" height="50" style="width: 100%; height:100%">
</canvas>
<input style="display:none" id="startfire" type="button" onclick="toggle('fire', this)" value="Run">
<script>
	document.getElementById("startfire").click()
</script>