Skip to content

Instantly share code, notes, and snippets.

@danielflower

danielflower/realtimeasciiart.html

Created September 22, 2012 08:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danielflower/3765557 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danielflower/3765557 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. danielflower revised this gist Sep 22, 2012. 1 changed file with 18 additions and 21 deletions.
    39 changes: 18 additions & 21 deletions realtimeasciiart.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,10 @@
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var ROW_PIXELS = 8;
    var COL_PIXELS = 5;


    function onVideoLoaded(video) {
    var width = video.clientWidth;
    var height = video.clientHeight;
    @@ -18,32 +22,30 @@
    var backCanvas = document.createElement("canvas");
    backCanvas.width = width;
    backCanvas.height = height;
    var backContext = backCanvas.getContext("2d");

    setTimeout(draw, 20, video, width, height, backCanvas);

    var context = canvas.getContext("2d");
    context.font = (ROW_PIXELS + 4) + "px courier";

    setTimeout(draw, 20, video, width, height, backContext, context);
    }



    var DARK_TO_LIGHT = "@$BW#MQ8ERN95D06&HgGOS3%UPKFIp2ZbAdq4wCha[]1{}JXekVliofunjLTz7Yst=><?)(|+xcmvr^/\_*!y;,-':`.".split("");
    var DARK_TO_LIGHT = "@$BW#MQ8ERN95D06&HgGOS3%UPKFIp2ZbAdq4wCha[]1{}JXekVliofunjLTz7Yst=?)(|+xcmvr^/\_*!y;,-':`.".split("");
    var NORMALISER = DARK_TO_LIGHT.length / 256;

    function getChar(luminance) {
    var index = Math.floor(luminance * NORMALISER);
    return DARK_TO_LIGHT[index];
    }

    var ROW_PIXELS = 8;
    var COL_PIXELS = 5;

    function drawToCanvas(canvas, backContext, width, height) {
    var sourceImageData = backContext.getImageData(0, 0, width, height);
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, width, height);
    function drawToCanvas(context, sourceImageData) {

    var sourcePixels = sourceImageData.data;
    var numCols = sourceImageData.width;
    var numRows = sourceImageData.height;
    context.font = (ROW_PIXELS + 3) + "px courier";

    for (var row = 0; row < numRows; row += ROW_PIXELS) {
    var rowOffset = row * numCols * 4;
    @@ -54,24 +56,19 @@
    var b = sourcePixels[offset + 2];
    var luminance = Math.ceil(0.299 * r + 0.587 * g + 0.114 * b);

    var char = getChar(luminance);
    var c = getChar(luminance);
    context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    //context.fillRect(col, row, ROW_PIXELS, ROW_PIXELS);
    context.fillText(char, col, row);
    context.fillText(c, col, row);
    }
    }

    }


    function draw(video, width, height, backCanvas) {
    var backContext = backCanvas.getContext("2d");
    function draw(video, width, height, backContext, context) {
    backContext.drawImage(video, 0, 0, width, height);
    var canvas = document.querySelector("canvas");

    drawToCanvas(canvas, backContext, width, height);

    setTimeout(draw, 40, video, width, height, backCanvas);
    context.clearRect(0, 0, width, height);
    drawToCanvas(context, backContext.getImageData(0, 0, width, height));
    setTimeout(draw, 40, video, width, height, backContext, context);
    }

    navigator.getUserMedia({video:true}, function (stream) {
  2. danielflower created this gist Sep 22, 2012.
    94 changes: 94 additions & 0 deletions realtimeasciiart.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Real time ascii art</title>
    <script>

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

    function onVideoLoaded(video) {
    var width = video.clientWidth;
    var height = video.clientHeight;
    var canvas = document.querySelector("canvas");
    canvas.width = width;
    canvas.height = height;

    var backCanvas = document.createElement("canvas");
    backCanvas.width = width;
    backCanvas.height = height;

    setTimeout(draw, 20, video, width, height, backCanvas);
    }



    var DARK_TO_LIGHT = "@$BW#MQ8ERN95D06&HgGOS3%UPKFIp2ZbAdq4wCha[]1{}JXekVliofunjLTz7Yst=><?)(|+xcmvr^/\_*!y;,-':`.".split("");
    var NORMALISER = DARK_TO_LIGHT.length / 256;

    function getChar(luminance) {
    var index = Math.floor(luminance * NORMALISER);
    return DARK_TO_LIGHT[index];
    }

    var ROW_PIXELS = 8;
    var COL_PIXELS = 5;

    function drawToCanvas(canvas, backContext, width, height) {
    var sourceImageData = backContext.getImageData(0, 0, width, height);
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, width, height);

    var sourcePixels = sourceImageData.data;
    var numCols = sourceImageData.width;
    var numRows = sourceImageData.height;
    context.font = (ROW_PIXELS + 3) + "px courier";

    for (var row = 0; row < numRows; row += ROW_PIXELS) {
    var rowOffset = row * numCols * 4;
    for (var col = 0; col < numCols; col += COL_PIXELS) {
    var offset = rowOffset + 4 * col;
    var r = sourcePixels[offset];
    var g = sourcePixels[offset + 1];
    var b = sourcePixels[offset + 2];
    var luminance = Math.ceil(0.299 * r + 0.587 * g + 0.114 * b);

    var char = getChar(luminance);
    context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    //context.fillRect(col, row, ROW_PIXELS, ROW_PIXELS);
    context.fillText(char, col, row);
    }
    }

    }


    function draw(video, width, height, backCanvas) {
    var backContext = backCanvas.getContext("2d");
    backContext.drawImage(video, 0, 0, width, height);
    var canvas = document.querySelector("canvas");

    drawToCanvas(canvas, backContext, width, height);

    setTimeout(draw, 40, video, width, height, backCanvas);
    }

    navigator.getUserMedia({video:true}, function (stream) {
    var video = document.querySelector("#video");
    video.src = window.URL.createObjectURL(stream);
    setTimeout(onVideoLoaded, 2000, video);
    }, function (e) {
    alert("Failed to capture video: " + JSON.stringify(e, null, 2));
    });
    </script>

    </head>
    <body>

    <video id="video" autoplay></video>

    <canvas></canvas>

    </body>
    </html>