ColorPal palettes improved!

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 also has a command-line interface, powered by Node.js. I’ve written some posts about ColorPal.

ColorPal Alpha

Introducing ColorPal, a fast color palette creation tool.

The N9, QR-Codes, and KeePassX

Update: I happened across a KeePass plugin (not the same as KeePassX) that displays passwords as QR codes, just like my hack below. Poor, glorious N9. It’s impossible not to love the N9 if you’re a geek, especially a programming, bash-loving, Linux-hankering geek. It’s like a nerd talisman. This post isn’t about the N9, specifically, so I’ll save the love-fest for another time. This post is about how difficult it can be to get text (especially passwords) onto a smartphone securely.

Bouncey returns - more canvas physics

This is a slightly upgraded version of the physics demo I showed in my last post. It is still… “a buggy, rudimentary, just-for-fun javascript physics simulator.” This version has: pre-defined initial states gravity friction It still has the “clinging” bug. I know how to fix it, but didn’t deem it important enough to spend time on it. :) The code is well commented, so feel free to hack on it.


A fun, simple, and oddly relaxing hacky simulation of bouncing circles.

Bouncey - canvas physics

This is Bouncey. It’s a simple physics demo I wrote in early/mid 2011, with some contributions and bugfixes from my good friend Greg Gardner. The description for bouncey’s github repo is: “a buggy, rudimentary, just-for-fun javascript physics simulator.” It covers Newton’s laws of motion. #cnvs { margin: 0 auto; display: block; width: 100%; border: 1px solid #464646; -webkit-box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.7 ); -moz-box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.

HTML5 canvas point operations

This is the last demo I made using JSImage. I created it some time around 2009-2010. At the time, I had checked out an imaging book from my university’s library at least ten times. Most of the exercises in that book I implemented in Python using PIL, but point operations were simple enough to port to JavaScript quickly. Point operations are image alterations that affect all pixels equally. Other operations, like blurring for example, each result pixel depends on adjacent pixels.

HTML5 tool for creating color palettes from an image

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…

How not to use CSS3

How to ruin a good thing by abusing CSS3 text shadows… CSS3! The code: // Random factors to determine x/y offsets for text shadows and amount of blur var x_factor = Math.floor(Math.random() * 20) - 10; var y_factor = Math.floor(Math.random() * 20) - 10; var blur_factor = Math.floor(Math.random() * 10) + 1; // Pretty colors var the_colors = [ "#7f9f7f", "#dca3a3", "#80d4aa", "#f8f893", "#ffcfaf", "#e89393", "#9ece9e", "#c0bed1", "#6c6c9c", "#71d3b4", "#a0afa0", "#efefef" ]; function make_it() { // MAKE IT SHINE // Build a string containing a comma-delimited list of the each shadow we want to apply // sprintf would be nice here.