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 [...]
Javascript
HTML5 Guitar Chords
Announcing the release of Guitar Player my latest free-app on the Chrome Webstore! It’s in the early stages, and not as developed as Color Piano, but is already useful in learnings songs. There is sure to be some bugs, so please report them when you find them! How to use To change the song click on [...]
Color Piano v2
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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 for Google was inspiring (even if there was no pay involved)! … Neon Rainbow Jitter; … Sleek Zebra (inspired by WebDesignerWall); [...]
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 the <canvas> specs. One pitfall of the <canvas> tag is the lack of text-metrics support (past calculating the width via ctx.measureText). This prevents us from [...]
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 using <canvas> and Javascript. The data generated from your computer will help profile the state of unicode support on the web. Your computers unicode [...]
HTML5: Font Detection
So you want to detect fonts in a HTML5 webapp? Presenting a fast-native solution for accurately detecting fonts installed on your system — this demo utilizes Javascript and the <canvas> tag and requires a browser that supports ctx.fillFont(), and ctx.getImageData() — including Chrome, Firefox, IE9, Opera and Safari. This plugin would make sense a website such as TypeTester [...]
Dynamic MIDI generation in the browser
UPDATE: This project has been cancelled, the MIDIBridge (which takes this idea much further) is what you’re looking for; http://www.abumarkub.net/abublog/?p=505 Have you ever wanted to use MIDI in your Javascript or Flash project? It’s been a long time dream of mine. After a long search I came up with one solution that would provide the best [...]
Sketchpad (alpha)
Welcome to the preview of Sketchpad. Though not all browsers support <canvas> 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 and hold the wheel of what we believe will become the new standard in Web-authoring. Sketchpad uses the [...]