I came across this experiment by Joseph Huckaby,

It’s mesmerizing! So much so, that I wanted to save it. (So that I could keep it forever! *creepy voice*)

But when I did, I found that it wasn’t working,

What to do?

Troubleshooting required getting more familiar with functions and getting familiar with JQuery to understand what the heck was going on. The files of interest were canvascycle.html, main.js, and palette.js.

Anyway, you get the point. =)

At first, I thought the color cycling was accomplished through a series of images (much like a flip book). However as I read through palette.js, it became apparent that it was through a calculation instead.

Looking at the contents of the image.php file requested by the program, it became clear that it contained the current image’s information which is used by palette.js.

Function requesting the image.php file,

loadImage: function(name) {
    // load image JSON from the server
    this.stop();
    this.showLoading();
    var url = 'image.php?file='+name+'&callback=CanvasCycle.processImage';
    var scr = document.createElement('SCRIPT');
    scr.type = 'text/javascript';
    scr.src = url;
    document.getElementsByTagName('HEAD')[0].appendChild(scr);          
}

The request,

Contents of the requested file,

CanvasCycle.processImage({

    filename:'V08AM.LBM',
    width:640,
    height:480, 

    colors:[[0,0,0],[155,223,255],[127,207,251],[103,191,251],[91,167,255],[143,127,139],[183,127,135],
    [207,159,135],[243,191,155],[151,115,123],[255,195,155],[171,167,131],[159,155,119],[87,127,147],
    [91,115,131],[103,131,155],[99,103,131],[175,155,163],[131,95,95],[111,87,103],[79,59,67],
    [171,123,111],[223,159,127],[91,71,79],[243,191,155],[115,87,91],[167,171,131],[87,123,103],
    [71,107,111],[59,71,75],[79,63,67],...];

    cycles:[{reverse:0,rate:0,low:0,high:0},{reverse:0,rate:0,low:0,high:0},
    {reverse:0,rate:0,low:0,high:0},{reverse:0,rate:0,low:232,high:237},
    {reverse:0,rate:0,low:0,high:0},{reverse:0,rate:0,low:167,high:174},
    {reverse:0,rate:1536,low:135,high:143},{reverse:0,rate:1380,low:127,high:134}...],

    pixels:[ 111,107,108,107,107,108,107,106,105,107,107,107,107,107,107,107,107,107,106,107,107,107,107,
    107,107,107,107,107,108,108,107,107,107,107,107,107,107,107,107,107,107,107,107,106,106,106,107,108,
    108,108,106,106,106,106,106,106,108,106,106,106,106,106,105,66,66,66,64,66,64,64,17,56,59,56,17,17,
    59,56,59,59,59,59,59,59,71,66,66,64,59,59,59,...]

});

So, I saved a copy of the image.php file into my local directory. However this wasn’t enough. Using Chrome Inspector, I noticed that the image.php file was being read by the browser as plain text instead of JavaScript. To bypass, I created a duplicate but saved it as a JavaScript file (image.js).

I then commented out the following code from loadImage as no request was being sent to the server,

loadImage: function(name) {
    // load image JSON from the server
    this.stop();
    this.showLoading();
    
    /*
    var url = 'image.php?file='+name+'&callback=CanvasCycle.processImage';
    var scr = document.createElement('SCRIPT');
    scr.type = 'text/javascript';
    scr.src = url;
    document.getElementsByTagName('HEAD')[0].appendChild(scr);
    */          
}

The next step was to get the audio working. Using Chrome Inspector again, I downloaded the relevant audio file and saved it in the appropriate location. And then changed the following line of code,

startSceneAudio: function() {
    //Manually enter the respective scene idx (as never made a call to the server [both image and sound files stored locally])
    //original line: --->> var scene = scenes[ this.sceneIdx ];
    var scene = scenes[ 0 ];
    if (scene.sound && this.settings.sound && window.Audio) {
        if (this.audioTrack) {
            ...
        }
        ...

        var ext = (ua.ff || ua.op) ? 'ogg' : 'mp3';
        // save your audio file in a folder called audio
        var track = this.audioTrack = new Audio( 'audio/' + scene.sound + '.' + ext );
        track.volume = 0;
        ...

And with that, success!

Also checkout Joseph’s writeups on his project (one and two). They are good reads.