Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment