ozskywalker/grey-static.html

## grey-static.html
<html>
    <head>
        <style>
            /* for browsers wo/2d alpha disable support */
            #c {background:#000}

            html, body {
                margin: 0 !important;
                padding: 0 !important;
            }
        </style>
    </head>
    <body>
        <canvas id=c width=640 height=320></canvas>
        <script>
            var ctx     = c.getContext("2d", {alpha: false}),       // context without alpha channel.
                iData   = ctx.createImageData(window.innerWidth, window.innerHeight),
                pixData = iData.data,
                pIdx    = 0,
                gray    = 0;

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

            (function loop() {
            noise(ctx);
            requestAnimationFrame(loop)
            })()

            function noise(ctx) {
                for (var y = 0; y < c.height; y++) {
                    for (var x = 0; x < c.width; x++) {
                        // gray = Math.floor(Math.random() * 16);
                        gray = Math.random() < 0.5 ? 8 : 16;

                        pIdx = (x + y * c.width) * 4
                        pixData[pIdx] = gray;
                        pixData[pIdx+1] = gray;
                        pixData[pIdx+2] = gray;
                        pixData[pIdx+3] = 255;
                    }
                }

                ctx.putImageData(iData, 0, 0);
            }
        </script>
    </body>
</html>

## tv-static-simple.html
<html>
    <head>
        <style>
            /* for browsers wo/2d alpha disable support */
            #c {background:#000}
        </style>
    </head>
    <body>
        <!-- sourced from https://stackoverflow.com/questions/22003491/animating-canvas-to-look-like-tv-noise -->
        <canvas id=c width=640 height=320></canvas>
        <script>
            var ctx = c.getContext("2d", {alpha: false});       // context without alpha channel.
            var idata = ctx.createImageData(c.width, c.height); // create image data
            var buffer32 = new Uint32Array(idata.data.buffer);  // get 32-bit view

            (function loop() {
            noise(ctx);
            requestAnimationFrame(loop)
            })()

            function noise(ctx) {
            var len = buffer32.length - 1;
            while(len--) buffer32[len] = Math.random() < 0.5 ? 0 : -1>>0;
            ctx.putImageData(idata, 0, 0);
            }
        </script>
    </body>
</html>
	<html>
	<head>
	<style>
	/* for browsers wo/2d alpha disable support */
	#c {background:#000}

	html, body {
	margin: 0 !important;
	padding: 0 !important;
	}
	</style>
	</head>
	<body>
	<canvas id=c width=640 height=320></canvas>
	<script>
	var ctx = c.getContext("2d", {alpha: false}), // context without alpha channel.
	iData = ctx.createImageData(window.innerWidth, window.innerHeight),
	pixData = iData.data,
	pIdx = 0,
	gray = 0;

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

	(function loop() {
	noise(ctx);
	requestAnimationFrame(loop)
	})()

	function noise(ctx) {
	for (var y = 0; y < c.height; y++) {
	for (var x = 0; x < c.width; x++) {
	// gray = Math.floor(Math.random() * 16);
	gray = Math.random() < 0.5 ? 8 : 16;

	pIdx = (x + y * c.width) * 4
	pixData[pIdx] = gray;
	pixData[pIdx+1] = gray;
	pixData[pIdx+2] = gray;
	pixData[pIdx+3] = 255;
	}
	}

	ctx.putImageData(iData, 0, 0);
	}
	</script>
	</body>
	</html>