soundCanvas

canvas that reacts to sound based on microphone input. Works in Chrome.

by Jose Jimenez

HTML

<p style="text-align: center">Click Start and begin speaking.  Inspired by work done by <a href="http://hci.uncc.edu/~clatulip/clwp/12-2/sound-interaction/">Dr. Celine Latulipe</a>

</p>
<canvas id="canvas" width="400" height="400"></canvas>
<p id="controls">
    <input type="button" id="start_button" value="Start">&nbsp; &nbsp;
    <input type="button" id="stop_button" value="Stop">
</p>

CSS

#canvas {
     margin-left: auto;
     margin-right: auto;
     display: block;
     background-color: white;
 }
 #controls {
     text-align: center;
 }
 #start_button, #stop_button {
     font-size: 16pt;
 }

JavaScript

// Hack to handle vendor prefixes
    navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback, element) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    window.AudioContext = (function () {
        return window.webkitAudioContext || window.AudioContext || window.mozAudioContext;
    })();

    // Global Variables for Audio
    var audioContext;
    var analyserNode;
    var javascriptNode;
    var amplitudeArray; // array to hold frequency data
    var audioStream;
    var redrawRow = 0;
    var redrawColumn = 0;


    var config = {
        sampleSize: 4096 * 0.25, // number of samples to collect before analyzing
        // decreasing this gives a faster sonogram, increasing it slows it down
        gridStep: 50, // canvas grid x and y steps
        canvasWidth: 400, // needs to be in lockstep with css value at the time the canvas object is created

        canvasHeight: 400, //     otherwise the circles are scaled strangely
        wobbleFactor: 50, // moves the center of the circles within a random orbit around the grid points of the canvas
        circleMax: 100, // maximum size of a circle
        circleMin: 1, // minimum size of a circle
        amplitudeMax: 300, // what the maximum amplitude might be
        amplitudeMin: 0.0, // what the minimum amplitude might be
        transparency: 0.75, // the transparency of the circles
        addScaled: false, // copy the scaled image to the top corner for each cycle.
        // functions to calculate various things below including the wobble of the positioning of the circles,
        //  the radius of the circles
        // and the color of the circles.
        wobble: function () {
            return...