An experiment using NodeBox, jQuery and CSS

Posted: 2012-01-18

Mother Teresa generated with css Marilyn Monroe generated with css

Playing around with the fabulous Nodebox the other day and found the core_image library. This library easily allows for pixel sampling from an image, I was messing around with saving out the colour data if files when i realised you could easily save out the RGB values to a css file then use jQuery to render out the image again in a Chuck Close style.

Anyway thought I'd put some of these together so others could maybe take this and play a bit further? If you haven't tried out Nodebox and are interested in visualization and programming I can't recommend it enough. It's a great way to learn Python and to play! I'd love any feedback or thoughts on how this could be used or taken further. Next steps would be to do the image sampling server side.

I've created these samples with fixed pixel widths/heights I can imagine though if the math was figured out with ems you could create a responsive version, also if you play around with the start count var in the js file you can start to get nice interesting effects. Would love to do more work on that and will post more versions as I mess about a bit more.

Check out the samples and code