/* This is the code editor: Write your code here, then press compile. You should then see any error messages on the right (log). You may also add alert calls to your code, which likewise will add a log entry (no modal dialog is shown). If the code was compiled sucessfully, you can inspect the precompiled code in the bottom right box. Hit run to start a single run, as if only a single frame was processed. You'll see the result in the bottom half of the Visualization field. If it works fine for a single frame, you can hit play on the video (top half of Visualization field) to see it in motion. */ /* on each call 3 parameters are automatically passed: canvas: A wrapper for the canvas element that allows access to most canvas and 2DContext properties and methods. state: A persistent object that can be used to store data across frameupdates data: An array containing the volume in a range 0...1 for 16 frequency ranges */ /* To make sure we only run the initialization once we check if a property "initialized" exists and is set to true. If it isn't we run the init sequence and set it to make sure it won't be called a second time. colorwheel is used to change the color a bit every time a new frame is drawn. */ if(!state.initialized){ state.colorwheel=0; state.initialized=true; } /* We cache the width and height attributes of the canvas so we don't have to type them out over and over again. Note how the square brackets are replaced with calls to "get" */ w=canvas.get("width");h=canvas.get("height"); /* This copies the last frame to the current one with an opacity of 0.5 */ /* Save the current state first */ canvas.save(); /* set our drawing mode */ canvas.set("globalCompositeOperation","copy"); canvas.set("globalAlpha",0.5); /* draw the canvas onto itself, stretching the inner 90% to fill the full canvas */ canvas.drawImage( canvas, Math.floor(w*0.05),Math.floor(h*0.05),Math.floor(w*0.9),Math.floor(h*0.9), 0,0,w,h); /* Restore the previous state */ canvas.restore(); /* Calculate the average across all frequency ranges, ignoring the 6 outer ones. Note that we don't use "var". Local variables are created by simply assigning them a value. Also note how get is used to access array items.*/ average=0; for(i=3;i<data.get("length")-3;i++) average+=data.get(i); /* Normalize */ average/=data.get("length")-6; /* Increase colorwheel by 1 on each frameupdate */ state.colorwheel=(state.colorwheel+1)%360; /* draw a circle. This is a custom method that's a bit easier to use than canvas native arc. */ canvas.circle( /*center*/ Math.floor(w/2),Math.floor(h/2), /*radius*/ 15, /*stroke style or false, can be prefixed with line width*/ false, /*fill style or false*/ style.hslaf(state.colorwheel/360,average*1.5,average*1.5), /*blending mode*/ "copy" );
Source
Log
Compilation Result
Visualization
Compile
Run