Sketch Mobile is a drawing app build for mobile browsers; taking advantage of technologies such as multi-touch, the accelerometer, and the gyroscope; providing a fun & novel environment to express yourself in colorful ways Sketch Mobile was commissioned by Google as part of the Mobile Chrome Experiments released at Google I/O show in San Francisco. It(…)
HTML5
Color Picker
The latest rendition of the Color Picker “Classic”, themed after Photoshop, GIMP, and other image editors—there are no frills here, it’s a basic Hue, Saturation, Luminance, and Alpha (HSVA) color selector. It works in browsers that support the <canvas> element; Firefox 2+, Safari 3+, Opera 9+, Google Chrome, IE9+. Configuration: size—how large the saturation/luminance area(…)
MIDI.js
MIDI.js (on github) ties together, and builds upon frameworks that bring MIDI generation to the browser. Combine MIDI.js with jasmid to create a web-radio MIDI stream similar to this demo… or with Three.js, Sparks.js, or GLSL to create Audio/visual experiments. Piano/guitar simulations, Drum machines, MIDI recording, and all kinds of certified funkitude are within your grasps (with a little elbow grease)! Google Chrome is(…)
Color Piano 2.0
Learn how to play piano songs by watching notes fall towards the keyboard as color-blocks; similar to how Guitar Hero works, but with a real instrument. Color piano Theory (CPT) ties together chords, scales, inversions, octaves, key signatures, and play-by-play examples of classical compositions, getting you started with playing piano the easy way =) Color Piano is(…)
HTML5: SoundFonts
Color Piano Theory is now available on the Chrome Webstore. There haven’t been any major UI overhauls since last reported, but there has been a lot of work going on the back-end! Most importantly moving from the Java interface to native HTML5 <audio> tag (as Java isn’t supported in the Chrome Webstore). Although this sounds like a(…)
Batch Thumbnail Generator
Many times, when researching a larger project, I make smaller demos—to break up my workflow, and keep things fresh. The Batch Thumbnail Generator (BTG) is one of these offshoots, a sandbox for creating zip packages with the BlobBuilder API, and Flash based download solutions—I also used BTG to create the thumbnails for the Software page(…)
ColRD: Image DNA
Exciting news on ColRD.com! Today we’re announcing the public beta of Image DNA, available exclusively on the Chrome Webstore. Image DNA is an application that aides you with intelligent extraction of colors from images. The colors extracted are spread evenly across the humanly visible spectrum; so you’ll notice, for example, although there is not much blue in(…)
Background Generator
I worked on a future release of BG a few months back, and am excited to share some screenshots! It’s exciting to be able to produce wallpapers for my Desktop in my Browser. Since creating these images, I’ve found that by using JSZip and Downloadify the browser can generate HUGE, high-resolution and print-ready graphics. The largest file that I’ve successfully exported from(…)
Portlandia Foods: Uploader
At Portlandia Foods we’re excited to offer our customers the chance to have their photograph on Portland Ketchup bottles! Previewing what an image would look like is as simple as dragging and dropping a photograph from your desktop into the browser, or clicking “Choose file…” to browse images on your system. HTML5′s Canvas element along(…)
ColRD: website
ColRD is a new website to help you find Colors, Palettes, Gradients and Patterns. It was developed by Daniel Christopher, of LucentPDX, and myself. The best place to get started is the Discover page. There you can narrow down results using filter by colors, or types, as seen in the above (Red/Black/Brown Patterns). After many years of(…)
Music Box
Last weekend I got a chance to mess around with Mr. Doob’s rendering framework Three.js and Daniel van der Meer’s amazing MIDIBridge. I’ve been a big fan of both Ricardo and Daniel for some time now, so it was fun to work with their codebases. Three.js is a lightweight 3D engine that can render in <canvas>, <svg> and WebGL.(…)
ColRD: Color Extractor
UPDATE: Renamed to Image DNA and released as a Chrome Extension, read more. I spent last weekend working on a color palette extractor in HTML5. These examples illustrate automatically picked 7-color and the 90-color palette to represent the image. Although the results are organized by the color popularity within the palette, colors that don’t show up much are(…)
Orange Honey; Epilogue
The past four years (2007-2011) much of my energy and capital has been focused into building the Mugtug graphics suite; Sketchpad, Darkroom and Lightbox. The suite has come a long way since I developed Sketchpad during a seven month work binge of Red-Bulls! Through the collaboration of many developers we’ve moved forwards to create an entire(…)
Portlandia Foods: Locations
It’s been an exciting year at Portlandia Foods. In the past six-months we’ve gone from an idea, to a product that can be found in local stores, coops, restaurants, and public works. Alberta Coop even featured us in a great article covering a short history of Ketchup, and how to make killer BBQ-sauce! A big “Thank(…)
global Composite Operation
The standard chart (a great resource provided by Mozilla) describing the effects of the globalCompositeOperation is incomplete, as it leaves us to extrapolate how 99% of the color-spectrum, and multiple levels of opacity, will affect the composite operation. The following chart allows you to see what the globalCompositeOperation’s is doing on a pixel-to-pixel basis. The source-image contains(…)
What can 1kb of Javascript do?
JS1k is challenge presented by Peter van der Zee to design the most creative use out of 1kb of Javascript. Many beautiful demos have been added in the first few days: mr. doob, hyperandroid, and antimatter. The challenge is addicting, “How much functionality can you fit in 1024 characters?”. Here are my results: Breathing Galaxies(…)