antirez/fizzlefade.html

## fizzlefade.html
<!DOCTYPE html>
<html>
<head><title>Fizzlefade</title></head>

<body>

<canvas id="framebuffer" width="320" height="200"></canvas>

<script type="text/javascript">
/* Fizzlefade using a Feistel network.
 * Copyright (C) 2017 Salvatore Sanfilippo <antirez@gmail.com>
 * This softare is released under the terms of the BSD two-clause license.
 * See http://fabiensanglard.net/fizzlefade/index.php for more info. */

var ctx;
var pixels;
var screen_width = 320;
var screen_height = 200;
var frame = 0;

/* Create a context where we can easily write pixels. */
function init() {
    ctx = document.getElementById('framebuffer').getContext('2d');
    pixels = ctx.createImageData(screen_width, screen_height);
    setInterval(draw, 1);
};

/* Write a pixel, just set alpha and RGB channels. */
function setPixel(x,y) {
    var offset = x*4+y*4*screen_width;

    pixels.data[offset+3] = 255;
    pixels.data[offset+0] = 255;
    pixels.data[offset+1] = 0;
    pixels.data[offset+2] = 0;
}

/* Transforms the 16 bit input into another seemingly psenduo random number
 * in the same range. Every input 16 bit input will generate a different
 * 16 bit output. This is called a Feistel network. */
function feistelNet(input) {
    var l = input & 0xff;
    var r = input >> 8;
    for (var i = 0; i < 8; i++) {
        var nl = r;
        var F = (((r * 11) + (r >> 5) + 7 * 127) ^ r) & 0xff;
        r = l ^ F;
        l = nl;
    }
    return ((r<<8)|l)&0xffff;
}

/* Called once every millisecond, sets 100 pixels. */
function draw() {
    var j;

    /* Set 100 pixels per iteration otherwise it's too slow. */
    for (j = 0; j < 100; j++) {
        if (frame == 65536) break;

        var fn = feistelNet(frame);
        var x = fn % screen_width;
        var y = Math.floor(fn / screen_width);
        if (x < screen_width && y < screen_height) {
            setPixel(x,y);
        }
        frame++;
    }
    ctx.putImageData(pixels, 0, 0);
}

init();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Fizzlefade</title></head>

	<body>

	<canvas id="framebuffer" width="320" height="200"></canvas>

	<script type="text/javascript">
	/* Fizzlefade using a Feistel network.
	* Copyright (C) 2017 Salvatore Sanfilippo <antirez@gmail.com>
	* This softare is released under the terms of the BSD two-clause license.
	* See http://fabiensanglard.net/fizzlefade/index.php for more info. */

	var ctx;
	var pixels;
	var screen_width = 320;
	var screen_height = 200;
	var frame = 0;

	/* Create a context where we can easily write pixels. */
	function init() {
	ctx = document.getElementById('framebuffer').getContext('2d');
	pixels = ctx.createImageData(screen_width, screen_height);
	setInterval(draw, 1);
	};

	/* Write a pixel, just set alpha and RGB channels. */
	function setPixel(x,y) {
	var offset = x4+y4*screen_width;

	pixels.data[offset+3] = 255;
	pixels.data[offset+0] = 255;
	pixels.data[offset+1] = 0;
	pixels.data[offset+2] = 0;
	}

	/* Transforms the 16 bit input into another seemingly psenduo random number
	* in the same range. Every input 16 bit input will generate a different
	* 16 bit output. This is called a Feistel network. */
	function feistelNet(input) {
	var l = input & 0xff;
	var r = input >> 8;
	for (var i = 0; i < 8; i++) {
	var nl = r;
	var F = (((r * 11) + (r >> 5) + 7 * 127) ^ r) & 0xff;
	r = l ^ F;
	l = nl;
	}
	return ((r<<8)\|l)&0xffff;
	}

	/* Called once every millisecond, sets 100 pixels. */
	function draw() {
	var j;

	/* Set 100 pixels per iteration otherwise it's too slow. */
	for (j = 0; j < 100; j++) {
	if (frame == 65536) break;

	var fn = feistelNet(frame);
	var x = fn % screen_width;
	var y = Math.floor(fn / screen_width);
	if (x < screen_width && y < screen_height) {
	setPixel(x,y);
	}
	frame++;
	}
	ctx.putImageData(pixels, 0, 0);
	}

	init();

	</script>
	</body>
	</html>