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(…)
Open Source
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(…)
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(…)
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(…)
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: 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(…)
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 someone could submit the fix’s… otherwise, you’ll have to wait for me to get around to finding a(…)
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. Feel free to use the widget on any of your projects. You can find the source code <- over(…)