A histogram is a very common tool used for editing photos, in photoshop and lightroom it gives users a quick view of how their photo’s values are distributed (some digital cameras also display a histogram).
The image histogram actually just displays a graph of how many pixels with each value appear, usually split into all three colors. Using the canvas imageData method its very easy to create a histogram. Basically its a matter of looping through the pixels, keeping track of how many appear at each value and then rendering out a graph.
I did it here. (only tested in webkit). In this example I never actually display a canvas, I use it to extract image data and then pass the dataUrl to image nodes. Canvas is awesome.
One time at a boat show I met sailboat designer Tom Wylie, famous for the Wyliecat, an unusual boat design. I asked him what the theory behind the design was. Was it faster? More efficient? He answered: “less bullshit. more sailing”. Which is to say that it may not be the fastest or best (or maybe it is) but it doesn’t matter, because the point is that there is a lot less work to sail the boat. Easier to reef, easier to tack, etc.
The point of all this is that aside from possible real, excellent uses of node.js I love hacking on it because it delivers the same thing for me. I can throw together a proof of concept really quickly, because there is no bullshit. No server config, no incomprehensible documentation. It uses the same language I use every day at work, so no context switching. If I have an idea I can get it running fast, easily and with less fuss. Less bullshit, more hacking.
This week I overdid an on-site marketing banner. Rather than a bunch of images, or god-forbid a flash animation, I through this together with CSS and teeny tiny bit of javascript. The clouds and buttons are pure html/css, as is the animation. Animation is only visible in Chrome/Safari/FF4, but everything degrades in a nice way for other browsers. (IE < gets a fallback gif.
Here it is, more or less.
This is the earliest JS written by me I could find on the internet archive (from my student web site at usc, circa 1998):
Read More »
So these guys have a contest something like the classic 5k contest. Except the rules are stupid lenient (library and FONTS don’t count). The whole fun of the 5k contest is that the limitations are so strict it causes some real creativity.
Worst still, the first entry, by this guy, is 141.04kb with 12 requests and just shows ‘hello world’.
So, because I was up at 6 with the baby this morning I re-did the example (without pretty fonts) in under 5kb and one request. (actually only 2.2k gziped)
Doesn’t actually meet the rules, because css transitions don’t work in IE 9. Also I kind of cheated by making a document that isn’t technically valid and using a much crappier image. And I double cheated by requiring Firefox 4, chrome or safari.