Skip to content

Instantly share code, notes, and snippets.

@mmchugh
Last active August 29, 2015 14:18

Revisions

  1. mmchugh revised this gist Apr 6, 2015. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions stream_canvas_test.js
    Original file line number Diff line number Diff line change
    @@ -17,10 +17,8 @@ function render(data) {
    if (blue > 255) {
    blue = 0;
    }
    console.log("blue: " + blue)
    context.fillStyle = "rgba(0, 0, " + blue + ", 1)";
    context.fillRect (255, 10, 235, 480);
    //draw a thing
    }

    function incrementColour() {
    @@ -29,10 +27,7 @@ function incrementColour() {
    red = 0;
    }
    render_stream.write("rgba(" + red + ", 0, 0, 1)");
    console.log("red: " + red);
    setTimeout(incrementColour, 100);
    }

    incrementColour();

    render_stream.on('data', render);
    setInterval(incrementColour, 100);
  2. mmchugh created this gist Apr 6, 2015.
    38 changes: 38 additions & 0 deletions stream_canvas_test.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    var rAS = require('request-animation-stream');

    var canvas_el = document.getElementById('main-canvas');
    var context = canvas_el.getContext('2d');

    var render_stream = rAS(true, true);

    var blue = 0;
    var red = 0;

    function render(data) {

    context.fillStyle = data
    context.fillRect (10, 10, 235, 480);

    blue += 5;
    if (blue > 255) {
    blue = 0;
    }
    console.log("blue: " + blue)
    context.fillStyle = "rgba(0, 0, " + blue + ", 1)";
    context.fillRect (255, 10, 235, 480);
    //draw a thing
    }

    function incrementColour() {
    red += 5;
    if (red > 255) {
    red = 0;
    }
    render_stream.write("rgba(" + red + ", 0, 0, 1)");
    console.log("red: " + red);
    setTimeout(incrementColour, 100);
    }

    incrementColour();

    render_stream.on('data', render);