Learn how to play piano songs without knowing sheet-music; instead, watch 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 =) [...]
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 [...]
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, to it’s oldest classics! Who could forget being part of a zero-gravity simulation, having their friends [...]
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 (easier to see), more accurate (pixel perfect), and looks really cool when you switch it [...]
Print-ready graphics in <canvas>
Last month, I posted about the possibility of creating high-resolution and print-ready graphics in <canvas>. 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 to the next level… The following flash-cards were designed in Illustrator [by Altered Focus], exported into SVG, then [...]
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 summery of what I’ve learned, applied to Javascript, plus a few other tricks. What’s the wisdom in using bitwise? Bitwise operations can be [...]
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 download the Gradient Creator as a Chrome webapp. Features: Drag & Drop GIMP Gradient (.GGR) files into the browser to view [...]
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 recommended when Google Chrome is an option! What is daltonization? “Daltonization is a process performed by the computer that allows people with color vision deficiencies to distinguish a range of detail they are [...]
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 [...]
CSS3 Maximizer
Do you find it tedious to manually type in the variants for border-radius, linear-gradients, and other CSS3 properties? Then CSS3 Maximizer is for you. This project was created to help make web-developers lives easier in the constantly complexifying world of W3C. Here’s an example, say you are working in webkit, and you are developing with css that [...]
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, provided by Mozilla (the most popular rendition), describing the effects of the globalCompositeOperation leaves us to extrapolate 99% of the spectrum, as well as multiple levels of opacity. This may come easy to some, but for others the following chart builds on Mozilla’s interlaced circle/square chart—hopefully these updates will help you figure out what the [...]
HTML5: 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 BG. BG allows you to create fancy Web 3.0 backgrounds without getting dirty with Photoshop, GIMP, ect. The project includes a collection [...]
1 2