|Chrome rendering the visualisation algorithm.|
HTML5 is very powerful if you can think laterally about how to pass processing off from the CPU to the GPU. Here I show a simple trick which produces shockingly complex visuals as part of the Sonic Field project.
Here is a video demonstrating the code working [I go on to show how it works in script lower down the page]:
Below is the script which produced this effect. It uses the requestAnimationFrame method which synchronises repaints with the machine's refresh rate and so stops the script from exhausting the computer's resources. It also uses two canvases, only one of them is visible. The trick is here:
hContext.putImageData(imgD1,0,0); context.scale(scaleFactor,scaleFactor); var sx=canvas.width*scale/2; var sy=canvas.height*scale/2; context.translate(-sx+1.6,-sy+1.1) context.globalAlpha=0.1; context.drawImage(hCanvas,0,0); context.globalAlpha=1.0;
I take what ever is on the canvas and copy it to the invisible canvas. I then set the scale on the canvas and put the image back over the top of the original but scale up a bit. This makes the image slowly move to the edges and blend with its self. The constant change is then added by rendering different sized and coloured circles in the middle of the canvas.
To turn this into a true visualizer, I will use a web socket (or similar) to push even/time information from the server to the script which will then alter the size,colour and shape of the drawing in the center. But time is limited so this is far as I have gotten today!