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 value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Become a patron at Patreon!
Profile Picture for CogDog The Blog
An early 90s builder of web stuff 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. And he is 100% into the Fediverse (or tells himself so) Tooting as @cogdog@cosocial.ca

Leave a Reply

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