Color Piano, Reintroduced
Music theory for visual learners.
Miko Journal
Notes on Sketchpad, Color Piano, MIDI.js, and creative coding: process, design, and code behind browser-native tools.
Latest posts
Be Here Meow v1.0
Pause, reflect, and discover calm.
Sketchpad 5.0
Hot off the press, released January 2018! Introducing Sketchpad v5.0 (codename Fancy Fox), a year after 4.1. The biggest change: brushes now draw into layers instead of just on top of them, which opens up a pile of creat...
Sketchpad 4.1
Extra extra! Released January 2017. There’s a new SketchPad in town, focused on making it feel at home in more places around the world. Themes let you pick a look (I’m on "Deep Purple" right now), and 12 professional tra...
Sketchpad 4.0
I’m excited to announce Sketchpad 4.0! The focus of this release was making the app more colorful, faster, and easier to use. That meant rewriting a lot of the interior: real gradient editors, smoother text editing via O...
C.A.R.D.S. Project
I was recently asked to create artwork for the C.A.R.D.S. Project. Chris & John gave me no restrictions, and only one task: Create something interesting that fits on a 3.5 x 2.0 business card. For me, this was a dream pr...
Sketchpad 3.7
Sketchpad v3.7 has arrived, February 2015! This is the release I’d been hearing the most requests about: 300DPI export for print, automatic library saving so you never lose work, and path smoothing on the pencil tool so...
Made with Code
I recently had the pleasure of working on Google’s Made with Code initiative with the Red & Co. creative studio and Mash, a group of developers located in Portland Oregon. My primary focuses were creating the renderer fo...
Sketchpad for Custom Print
Sketchpad has been used in applications from scientific machine learning, to kids drawing, but we haven’t had much chance to focus on any commercial aspects. This is why we’re excited to be changing that. We’re gearing u...
Sketchpad 3.0
Sketchpad 3 is available in the Chrome Webstore (for free), combining WebGL effects with vector editing, and lots of HTML5 goodness! You can now drop a photo through webcam filters and paint onto the result in the same s...
WebcamFX - GLSL Shaders
Take photos with your webcam: mix and match combinations of filters to come up with your own unique effects. FilterStack includes a large collection of filter combinations to help get you started. Once you're happy with...
Sketchpad 2.1
UPDATE: Read about Sketchpad 3.0 Where Sketchpad 2.0 introduced non destructive vector + bitmap editing on the web. Sketchpad 2.1 (SP2.1) takes that bland package of vector tools and borrows features from Sketch Mobile o...
Sketchpad 2.0
UPDATE: Read about Sketchpad 3.0 Introducing a new way to create graphics online. Sketchpad 2.0 is a non destructive vector & image editor, built in HTML5, that you can start using right now, for free! I/O is for input a...
Presets on Google Developer Live
I recently had the honor to be part of a new series called Presets on Google Developer Live hosted by Paul Irish, and lovingly put together by Louis Grey, Phoebe Peronto amongst other Googlers. We discussed my most popul...
"Time Traveler" piano song
It’s time to start going out of my comfort zone and pursuing music a bit more! This is a song that I wrote earlier this year for the harpsichord and dulcimer, performed on the electric keyboard, and mastered in Logic. It...
Sketch Mobile
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 wa...
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 b...
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...
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,...
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 int...
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 t...
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....
Portland Ketchup
I’m thrilled to see Portland Ketchup in the Oregon Museum of Science & Industry (OMSI). This place has always held a sweet place in my heart; it was, and continues to be, an adventure to visit, from the newest exhibits t...
Color Sphere
Color Sphere was one of my 1st HTML5 projects, way back in 2007. Well, the years passed, browsers sped up, my hair grew longer, and nothing changed on Color Sphere… but the time has come! The latest rendition is bigger (...
Print-ready graphics in Canvas
Last month, I posted about the possibility of creating high resolution and print ready graphics in . Since then, it’s been in the back of my mind, but happened to be at Kinko’s today, and decided to take this experiment...
Bitwise Gems and other optimizations
One of my favorite posts in the last few years was Bitwise Gems in AS3 by Polygonal Labs , an article inspired by Bitwise Operations in C on Gamedev . This article is a summary of what I’ve learned, applied to Javascript...
ColRD: Gradient Creator
Tonight, on ColRD, we released the latest rendition of Palette Creator, along with our newest addition; the Gradient Creator! This new webapp makes it fun and easy to create CSS3 linear gradients . UPDATE: You can also d...
Color Accessibility in the Browser
Announcing the release of color blindness daltonization + simulation bookmarklets; daltonize.appspot.com The Chrome Daltonize extension is faster in many cases, and uses less bandwidth than the bookmarklet, highly recomm...
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 b...
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 y...
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...
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 wor...
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 pale...
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 on the Wayback Machine, and Lightbox. The suite has come a long way since I deve...
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 gre...
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...
HTML5: Typographic Effects
HTML5 Rocks is a website that helps inspire developers and teach how to implement those shiny new HTML5 features in real world examples. They recently asked me to write an article for their website. Working on a project...
HTML5: Typographic Metrics
Typography support between browsers has a history of being spotty. One of the major hurdles in creating the ( yet to be released) next incarnation of Sketchpad was typographic support; between browsers and even within th...
Color Piano v1
UPDATE: There is a more recent post on Color Piano. Color Piano Theory (CPT) was inspired by an interest in building an educational application that utilizes colors in teaching piano theory . CPT ties together chords, sc...
ZenBG: Background Generator
Background Generator (BG) provides the ability to edit the background of any website in real time! To give you an idea, the backgrounds of the Journal, Photos, Projects, and Labs sections of Mudcu.be were created using B...
HTML5: Unicode Profiling Project
The Unicode Profiling Project was designed to gather statistics on unicode support across systems. The software checks each symbol in your systems Unicode catalog (65,535 glyphs) to see which are visible on your computer...
Dynamic MIDI generation in the browser
UPDATE: This project has been cancelled. The MIDIBridge took this idea much further; see the archived project page on the Wayback Machine. Have you ever wanted to use MIDI in your Javascript or Flash project? It’s been a...
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...
Sketchpad 1.0
UPDATE: Read about Sketchpad 3.0 Sketchpad is a free application utilizing to allow anyone with a web connection and a recent copy of Safari, Firefox, Opera, or Chrome the ability to create beautiful drawings. Sketchpad...
Sketchpad (alpha)
Welcome to the preview of Sketchpad. Though not all browsers support we’re working hard to extend support before our official release. Until then, you lucky FireFox users (download Firefox) will be able to kick the tires...
Piano Theory widget
\[update\] Read about Color Piano Theory.I’ve been working on this widget a long time, on and off, basically whenever I’ve got a vacation. There are a lot of features in the works, so check back for more updates. I would...
Sphere Plugin
I’ve prepared a new DHTML plugin, licencened under Creative Commons. It works perfectly on all Macintosh browsers, however, I haven’t had the opportunity to test on Windows… If there are bugs there, it would be great if...
ColorJack: Sphere
Ever wonder what a computer programmer does while on vacation? The same thing we do every night. Check out the newest release from ColorJack Labs (developed in Mexico). Sphere allows you to visualize the theory behind co...
Sphere Widget
Do you like ColorJack Sphere? Want it on your desktop? Download the widget for Apple’s Dashboard!
DHTML Color Picker
I finally got all the ColorJack code into a little widget for your websites! It’s surprisingly small… the entire package weighs in at only 24.5k :) To give you an idea for comparison, it’s nearest competitor is 72.3k. Fe...