I’ve recently started releasing a bunch of projects on Github, generally these a bits of code that I find to be very useful in many various projects like Event.js, or just a fun little exercise in code like porting the Inkscape Star tool into Javascript, this is an overview of some of my favorites, and code used in(…)
Sketchpad 2.1
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, an app that exhibited my furthest exploration in creating colorful enviroments. SP2.1 is great at creating background wallpapers quickly now that most of the tools work with(…)
Sketchpad 2.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 and output, that means, any drawing you make can be shared, forked, and edited. You can drag and drop images and SVGs into(…)
Making Web Magic
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 popular Chrome Experiments including Color Sphere, Color Piano, as well as my latest project Sketchpad 2.0. Here’s the description of(…)
“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’s dedicated to my sister, who is living in Tanzania the next few years teaching elementary school.(…)
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 ways Sketch Mobile was commissioned by Google as part of the Mobile Chrome Experiments released at Google I/O show in San Francisco. It(…)
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(…)
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(…)