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 (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: 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(…)
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, scales, inversions, octaves, and key signatures. CPT is a visual interface for learning the keyboard. This application also includes a bit(…)
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(…)
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 is addicting, “How much functionality can you fit in 1024 characters?”. Here are my results: Breathing Galaxies(…)
Sketchpad 1.0
Sketchpad is a free application utilizing <canvas> to allow anyone with a web-connection and a recent copy of Safari, Firefox, Opera, or Chrome the ability to create beautiful drawings. Sketchpad includes a number of Drawing Tools — including: Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp. These tools can be used together with the(…)
Antidepressants for the World Economy
As crazy as it might seem, investors from around the world are converting their cash into US currency — even as our markets crash the value of the dollar keeps rising steadily. How can this make sense? … Well, apparently, in the grand scheme of things, our economy is a safe haven in the global(…)
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(…)
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 love to hear what you think about this widget, and any ideas you have(…)
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(…)
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 color schemes. Try messing around with “Custom” function on the color blindness menu for more advanced options.