I spent a bit of time this weekend building an RGB color cube for ColorPal, using Three.js. Drag and drop any image, and you’ll see a cube with all the pixels of your image mapped into 3D space.
Launch live demo! and view the code.
Your web browser must support WebGL, which at this point in history means a fairly recent Firefox or Chrome. In case your web browser doesn’t support WebGL, here’s a video to enjoy while you download Firefox Nightly.
Tired of creating color palettes with ColorPal’s simple, intuitive drag-and-drop interface? Me too! Use this handy command instead.
This is a speedy post about a speedy update I made today to ColorPal, an HTML5 tool I wrote that automatically generates color palettes from a photograph.
Previously, ColorPal provided hex codes for each color extracted from the image. Eight individual <input>s at the bottom of the page displayed the colors.
I use ColorPal a lot (my own dogfood and all that) when designing websites, and it wasn’t long before I got fed up (hah!
A basic implementation of indexed color palettes for HTML5 canvas.
In my last post on the subject, I introduced ColorPal, my HTML5 color palette generation tool. It didn’t perform well with certain types of images, so I fixed it. :)
Color palettes will now match the image even better. Especially for images with infrequent but important colors. Here’s a comparison of the old and new methods, on an image that is mostly black:
You can see that with the old method, the black pixels definitely took over the palette.
ColorPal is an HTML5 color palette generator. Here’s a gif demonstrating how to use ColorPal. The color quality in gifs is pretty terrible, but you can still see the basic usage.
Try it out at colorpal.org.
ColorPal also has a command-line interface, powered by Node.js.
I’ve written some posts about ColorPal.
Introducing ColorPal, a fast color palette creation tool.
Point operations are image alterations that affect all pixels equally. Other operations, like blurring for example, each result pixel depends on adjacent pixels.
For an HCI class project in Fall 2009, I pulled together some of my previous demos to make this integrated tool. It was just a prototype, and I haven’t taken the time to get the code set up and working on this blog. If anyone is interested, I can dig up the code and send it along.
In retrospect, it really could have used some narration…
This is another demo from 2009-ish. When I started experimenting with canvas, I felt uncomfortable with the 1-dimensionality of CanvasPixelArray. I wrote this script to convert it into a more logical format: X by Y by RGBA. Let me rephrase that. By “more logical”, I mean “more logical, to me, at the time). 1D is fine, and I can’t think of any use for this script. But, nonetheless, here it is, including the original description.
This is a demo from late 2009. It’s an extension of the single-pixel eyedropper I wrote previously.
It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be fooled by the 2011 commits, those are just artifacts from svn->git migration. No guarantees that the histo’s are actually correct. :)
Click and drag to set the image border to the average of the selected pixels.
An HTML5 Canvas eyedropper.