The construction of a WebGL particle physics gravity simulation slash interactive art installation.
Dimo: Particles is an artistic particle physics simulation and interactive art exhibit I created (along with fellow Red Hat engineers Ian Hands and Ben Pritchett) for the SPARKcon festival in 2014.
Launch live demo!
Pictures These pictures are from the art exhibit at geekSPARK in 2014.
After the event, I wrote this opensource.com article about the experience.
The source code is, of course, open.
A player walks up Fayetteville St in Raleigh, North Carolina. SPARKcon has begun, and dozens of artists are …
Pale Blue Pixel is this blog. I write technical posts about web development
image processing amateur graphics and generally celebrating the art and craft of programming. The name Pale Blue Pixel is a meek tribute to Carl Sagan’s Pale Blue Dot. It’s currently powered by:
Python - a large and powerful snake Pelican - an awkwardly-shaped sea bird CSS Grid - framework-free CSS thanks to grid and flexbox LESS - CSS preprocessor GitHub pages - hosting
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.
Speed-hacking an old project for fun and… fun.
Drop64 is an easy drag-and-drop tool for generating Data URIs from any file.
Check it out at drop64.com.
Here’s a demo recording of how easy it is.
Some benefits of Data URIs are:
Fewer HTTP requests means faster page loads avoid cross-origin resource loading issues (fonts in Firefox, for example) you can paste the Data URI directly into your web browser URL bar to view the file (occasionally convenient) If you noticed the similarity to ColorPal, well done!
By accident, I discovered that GIMP number fields evaluate math expressions. So convenient!
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.