web

Make a Kimotion!

Kimotion is a new framework for building interactive art exhibits. It will appeal mostly to the Programmer Artist types. Think “Warrior Poet”, but with keyboards.
thumbnail for 'Make a Kimotion!'

WebAssembly is the Keystone

Within the last two days, WebAssembly (wasm) has graced the eyeballs of every JavaScript developer. If wasm is new to you, the articles linked at the end of this post fully describe what wasm is. Since that’s been covered, I’d like to talk about one impact wasm will hopefully have on future of computing. To set the scene, a quote from the man himself: Meanwhile, I took one quick step that would demonstrate the concept of the Web as a universal, all-encompassing space.
thumbnail for 'WebAssembly is the Keystone'

Naming Names - Anonymity is Dead

Naming things is hard enough, and JavaScript doesn’t make it any easier. Should anonymous functions be considered harmful?
thumbnail for 'Naming Names - Anonymity is Dead'

RGB WebGL Color Cube

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.
thumbnail for 'RGB WebGL Color Cube'

ColorPal Output Update

Hi pals. 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!
thumbnail for 'ColorPal Output Update'

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.
thumbnail for 'ColorPal palettes improved!'

ColorPal Alpha

Introducing ColorPal, a fast color palette creation tool.
thumbnail for 'ColorPal Alpha'

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.
thumbnail for 'Bouncey returns - more canvas physics'

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.
thumbnail for 'Bouncey - canvas physics'

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.
thumbnail for 'How not to use CSS3'

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.
thumbnail for 'HTML5 canvas point operations'

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…
thumbnail for 'HTML5 tool for creating color palettes from an image'

HTML5 canvas 3D pixel array

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.
thumbnail for 'HTML5 canvas 3D pixel array'

HTML5 canvas area selection averaging

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.
thumbnail for 'HTML5 canvas area selection averaging'