I was late night tinkering on a current remix effort of For The Remix, an open invitation to generate remixes from Jonathan Worth’s photos of author Cory Doctorow (also a ds106 assignment)

For this go around, I wanted to do something in code, and in the web. I cannot remember where the dim light bulb first flickered on, but my idea is a modernization of the 1970′s mood rings which purported to indicate a person’s mood when really it reacted to skin temperature (disclaimer: I honestly owned one) (( never wore it in public).

To jump to the final remix chase, my concept reflects that Cory has many things on his mind- books, privacy issues, technology, copyright– and in his private think space he can ponder these and his skin would radiate a mood color. As you mouse over some of these topics, see how his mood color changes. See it in action at http://lab.cogdogblog.com/cory/:

I started with a screen sized version of the photo of Cory where he is seated on his chair, library behind him (with irony, I used the same image on my last remix) this is image Cory 004f1 duo. This one works well because he has bright skin color on his hand, face, and chest that I figured I could find a way to dynamically colorize.

In my original idea, I would place little objects on the shelf to represent the topics, but for a first cut, I found a jquery code library designed to allow web sites to create color options for products like t-shirts — Niko Rablin’s Product Colorizer jQuery Plugin. I used the basic example to color one item, in the original it looks like:

When you click a color chip, the t-shirt changes. The method uses two images- one a JPG of the entire scene making sure the thing to be colored was light toned. The second needed image is a mask, a transparent PNG image where the parts that are to be colored are transparent.

These are the two final images:

Background image

Doing this involved some meticulous PhotoShop selection work, especially since some of the margins were not clean boundaries. I ended up using some new techniques, especially the pen selection converted to a selection I learned from Michael Branson Smith.

There are about 8 different contiguous sections to deal with.

I zoomed in on the area and use the pen tool to select the general shape I would fine tune and diffuse the selection later.

Pressing command-Return (on Mac OSX) turns the pen path into a selection. I then go to the menu Select -> Save Selection…. This saves the selection as an alpha mask channel– everything selected is white, and what is not selected is black, like a mask.

I continued doing this for all the light skin spots, loading about 7 selections. I added tow more which were shaded (I named them “minus” so I would know the difference) parts of his hand and the shadow under his nose that are shaded.

Next it is time to make a layer mask to combine all of these. I duplicated my base image to a new layer. I then go through a process of using Select -> Load Selection… to each time select a new area and make sure I click the option to “Add to Selection” (the very first one is of course “New Selection”)

And for the twi “minus” selections, I change the option to “Subtract from Selection”. When done, I save this entire selection to one called “Final Skin”

I still have some fine tuning to do as it has some sharp edges and some places where some shadows should be eased out. I do this by activating this channel, and I can use paint/erase tools to deal with this using black and white as colors, remembering that black is what is blocked and white is what is seen through. I can go back and forth to my main image, and load this selection to test my mods.

For the final mask, I make a copy once again of the main image, load the selection, and finally delete. Hiding all the other layers shows me the image, which I save as a transparent PNG.

If you want to see the Photoshop file, here ya go
http://cogdogblog.com/code/cory-mood-psd.zip

Now i have the two images needed for my template. I actually made a copy of the demo code for the Product Colorizer jQuery Plugin, and remove everything but the demo (taking out text). I resized a few of the dimensions in the style sheet.

For the background I use a trick I use on several other sites, the jQuery back stretch. This enables me to have a single image which changes in size as the window changes to fill in cleanly. I used a creative commons licensed flickr image of mood ring.

Each of the colors is done by creating in the index.html file a link that looks like:

<a rel="r,g,b" href="#mask" title="Topic">Topic</a>


where r,g,b are 0-255 colors (I used the photoshop color picker to get these values). The name in the title and the link are what it repreresents.
Now where did this topics come from? A melange of guessing and googling about Cory Doctorow. From my notes:

DRM (one of the things he really hates)
Mickey Mouse (for his first book “Down and Out in the Magic Kingdom”)
Blagofaire (his Red Caped persona that appears in xkcd http://xkcd.com/239/
Gold Farming (Reference to “For The Win”) 
Canada (because he was born in Toronto)
Boing Boing (his big big blog http://boingboing.net/)
Tor Books (his publisher which supports his open sharing of his works http://www.tor.com/) 
OpenCola (one his his early tech companies http://en.wikipedia.org/wiki/Opencola_(company))
EasyTether (technology he uses to end-around tethering blocks from mobile carriers http://www.mobile-stream.com/easytether/android.html?)
Banshee(his favorite open source music software http://banshee.fm) 
Prism (Since NSA snooping makes him feel really dark)
Dragnet Surveillance (another thing he worries about in terms of privacy)
Mostly Signs Some Portents (his tumblr http://mostlysignssomeportents.tumblr.com/)
Cassette Design (he recently tweeted this https://twitter.com/doctorow/status/403339278236647424)
Nexus 4 Lock Pattern (from an article of someone who met him a book signing http://aaroneiche.com/2013/02/12/10-minutes-with-cory-doctorow/)

Some sources for these include:
Tech Essentials: How Cory Doctorow Gets Around (Wall Street Journal)

http://online.wsj.com/news/articles/SB10001424127887324354704578635792701857784
I’m Cory Doctorow, and This Is How I Work (Lifehacker)

http://lifehacker.com/5993401/im-cory-doctorow-and-this-is-how-i-work
The NSA’s Prism: why we should care (The Guardian)

http://www.theguardian.com/technology/blog/2013/jun/14/nsa-prism
I cannot say the colors really indicate much, except for the dark tones for negative ones.
I did not like the functionality that you have to click on a chip to change the color, so I edited jquery.productColorizer.js and moved the code that changed the color  from $(swatches).click $(swatches).hover (actually removed the click code completeley). I also added an empty div to index.html to fold the text above Cory’s head

<div id="marquee"></div>

positioning it absolutely to be in this spot via my CSS

#marquee {
  color: #fff;
  display:inline;
  position: absolute;
  top: 80px;
  left: 80px;
  width: 500px;
  font-size: 180%;
}


Then back in  jquery.productColorizer.js I added some code to update this text based on what item is being hovered over

$('#marquee').text('This is my ' + $(this).attr('title') + ' Mood');


I also added some more code to make this disappear (set the text to blank) when a mouse leaves a swatch

$(swatches).mouseleave(function(e) {
   e.preventDefault();
   $('#marquee').text(''); 
});  


I likely lost y’all with the code. Sigh, I swear I spend 3 times as long writing things up than creating. 
But if you want to poke around, I share:
a full archive of the site (you can run this from your desktop) just open index.html

http://cogdogblog.com/code/cory-mood.zip