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:

cory mood room thimbled

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)

(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!

If this kind of stuff has any value, please support me monthly on Patreon or a one time PayPal kibble toss
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *