While finishing up the code and remix for Cory’s Mood Room it dawned on me that this could be something put into Mozilla Thimble so other people could change the content or even use their own images to do the same colorizing effect (see the original version at http://lab.cogdogblog.com/cory/).
Here is a screen shot of the new version hosted on Thimble, meaning you can explore the code and tinker with it via the handy dandy Remix button:
Getting this into thimble meant taking two external javascript libraries and two external CSS files and stuffing them into the code (because to link externally requires a https url and that seems not to work on my site). I added fairly explicit commenting to show the places where you can modify:
Again the beauty of Thimble is you can edit code on the left and see the changes on the right (and get notified if you commit an HTML faux pas).
(click image to see full size)
So you can easily change the colors and the text lables for each by editing the “swatches” section. If you wanted to create your own image, you would have to generate the original base image and create a transparent PNG for the mask layer (which defines the parts that get colorized). This is explained in my original blog post.
Get into Thimble! Make/Remix the Web! Woot!
