Skip to content

Instantly share code, notes, and snippets.

@antirez

antirez/fizzlefade.html

Last active August 16, 2019 22:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save antirez/6d58860b221a6ae5622ced8ccdddbe47 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save antirez/6d58860b221a6ae5622ced8ccdddbe47 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. antirez revised this gist Aug 29, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion fizzlefade.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <!DOCTYPE html>
    <html>
    <head><title>Javascript RT</title></head>
    <head><title>Fizzlefade</title></head>

    <body>

  2. antirez created this gist Aug 29, 2017.
    76 changes: 76 additions & 0 deletions fizzlefade.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    <!DOCTYPE html>
    <html>
    <head><title>Javascript RT</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>