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 given the same diversity in the 90-color palette.  For instance, in the following image, the diversity of red in the 90-color palette is given equal weight to green;

Speed is looking good, these images are taking around 200ms to process.

More to come on this, and future developments in the land of color

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 selecting colors, I haven’t come across the perfect color picker… With that in mind, the most natural for me so far has been combining the powers of RGB w/ HSL. This is what we did for the ColRD create pages, the Color Creator and the Palette Creator;

Once you create some content, or find some things you like, you can start building your own Swatch, where you can quickly find the content that you like.  Check out my page, cool stuff!  http://colrd.com/@/mud/

Let us know what you think, and how we can improve your experience!

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 Javascript is 17.5MB and 1,264 x 65,320 pixels… that’s enough resolution to print a 30×30 inch poster in 300DPI… more on this later! In the meantime, here are a few of the wallpapers that came out pretty nice:

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 otherwise excluded from perceiving. For instance, in the daltonization of an Ishihara test plate (a popular test of color vision) numbers emerge from a pattern that were once invisible to the color blind person.”

CORS is the preferable method to access images from external domains. The problem is knowing whether a server supports it or not—the following snippet is a hack to figure out whether an browser/server combination supports CORS, or not;

function hasCORS(src, callback) { // Cross-Origin Resource Sharing (CORS)
	var method = "get";
	var req = new XMLHttpRequest();
	if ("withCredentials" in req) {
		req.open(method, src, true);
	} else if (typeof XDomainRequest != "undefined") {
		req = new XDomainRequest();
		req.open(method, src);
	} else { // browser doesn't support cors
		callback(false);
	}
	if (req) { // browser supports cors
		req.onload = function(response) { // server supports cors
			callback(true);
		};
		req.onerror = function(response) { // server doesn't support cors
			callback(false);
		};
		req.send();
	}
};

Hope this helps someone with the same problems!

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 them!
• Delta Swatch:  Shows the colors most similar to the one you’re choosing of the 4096 websmart colors (in CIE-Lab color space).
• Keyboard goodness with Color Picker:  HSL, RGB, and HEX chooser.
• Preview:  See your gradient in full-screen mode before you save it.
• Flip:  Flip your gradient, so:  first is last, and last is first.
• Intriguing new interface to create gradients! …

Do we need a new gradient editor GUI?

Gradient editors haven’t changed much historically, the same dynamic is used throughout GIMP, Illustrator, Inkscape and Photoshop. For me, these interfaces are clunky, leading to repetitive stress of the wrists and fingers, which prompted me to think, “There must be a better way!”.  One of the most click-saving changes was combining the Color Picker and Gradient Creator as one unit—there are no popup windows or “Ok” buttons.

Traditionally gradient editors allow users to place a point in space that radiates it’s color in both directions evenly. This is the way that computers think about gradients; color points in space, blended (in the case of <canvas>) linearly.

Description of the Gradient Creator;

• ColRD gradient creator presents itself as color blocks—just like a palette.
• Inside each color block you will find the midpoint controller—these controllers allow you to stretch the color towards the left or the right of the block.
• To the left and right of the color block are col-resize controllers—these allow you to scale the width of the color block and the adjacent one.
• Color blocks can be reorganized by dragging and dropping, without rescaling the color block or the ones around it.
• If you drag and drop a color block onto the Color Picker, the color will be removed from your gradient (re-absorbed into color space!).

Future developments;

If you have any ideas for the future, let us know!

Random thought;

For those interested in exotic gradient editors, SpectraG is a project that uses mathematic equations to generate gradients;

http://sourceforge.net/projects/spectrag/

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 to Websafe mode and move the Saturation slider around

The colors in Color Sphere are mapped to HSL. The luminance is the radius from the center, the hue is the angle, and the saturation controls the z-index; that is to say, the zoom into the HSL color space. Technically, it’s more of a color cylinder.

Head over to the Google Chrome Webstore and pick up the free browser app! Or access it online at Color Sphere. Let me know what you think about the changes! The old version can still be accessed for IE8 and below.

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 this picture (above), the popular colors extracted will be evenly spread throughout the blue/brown spectrum—this gives you a wider range of colors to select from, with less choices.

Features:

• Drag and Drop images into the browser for automatic extraction (FileReader), or enter a URL.
• Use the EyeDropper or Color Picker for manually selecting colors.
• Zoom and pan around image to find the perfect color.
• Breakdown of top 78 unique and simultaneously most reoccurring colors.
• Download your color palette for Illustrator, Photoshop, or GIMP.
• Share your palette on ColRD.com =)

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 spare PC to test on.

The new plugin is based on our popular Sphere color chooser. The coolest part is that it’s resizable, you can make this thing as big as you want. Check it out here.

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

Hypotrochoid with dynamically changing color and diameter. Use the keyboard to change shapes mid-stream, or move the mouse to create a new shape. “When I breath out my mind is at peace… When I breath in my body is at peace…” Create a ripple in the folds of time and space.

The code for the Breathing Galaxies, 1019 bytes:

window.onload=function(){C=Math.cos;S=Math.sin;U=0;w=window;j=document;d=j.getElementById("c");c=d.getContext("2d");W=d.width=w.innerWidth;H=d.height=w.innerHeight;c.fillRect(0,0,W,H);c.globalCompositeOperation="lighter";c.lineWidth=0.2;c.lineCap="miter";var e=0,h=0;d.onmousemove=function(k){if(window.T){if(D==9){D=Math.random()*15;f(1)}clearTimeout(T)}X=k.pageX;Y=k.pageY;a=0;b=0;A=X,B=Y;R=(k.pageX/W*999>>0)/999;r=(k.pageY/H*999>>0)/999;U=k.pageX/H*360>>0;D=9;g=360*Math.PI/180;T=setInterval(f=function(l){c.save();c.globalCompositeOperation="source-over";if(!l){c.fillStyle="rgba(0,0,0,0.01)";c.fillRect(0,0,W,H)}c.restore();i=25;while(i--){c.beginPath();if(D>450||e){if(!e){e=1}if(D<0.1){e=0}h-=g;D-=0.1}if(!e){h+=g;D+=0.1}q=(R/r-1)*h;x=(R-r)*C(h)+D*C(q)+(A+(X-A)*(i/25))+(r-R);y=(R-r)*S(h)-D*S(q)+(B+(Y-B)*(i/25));if(a){c.moveTo(a,b);c.lineTo(x,y)}c.strokeStyle="hsla("+(U%360)+",100%,50%,0.75)";c.stroke();a=x;b=y}U-=0.5;A=X;B=Y},9)};j.onkeydown=function(k){a=b=0;R+=0.05};d.onmousemove({pageX:300,pageY:290})};

Micro Sketchpad

Psychodelic text effect with a hypotrochoid drawing tool.

The code for JS1k Draw, 1024 bytes:

window.onload=function(){Q=Math.random;C=Math.cos;S=Math.sin;H=0;w=window;d=document.getElementById("c");c=d.getContext("2d");c.fillRect(0,0,d.width=w.innerWidth*2,d.height=w.innerHeight*2);c.globalCompositeOperation="lighter";c.lineWidth=0.5;setTimeout(function(){c.font="210px Arial";n=360;while(n--){c.globalAlpha=n/1800;c.strokeStyle="hsl("+(n+110%360)+",99%,50%)";x=-n*C(n/360);y=250-S(n/360*2)*n/2.5;c.strokeText("JS1k",x+230,y+60);c.strokeText("Draw!",x+380,y+245)}c.globalAlpha=0.4},0);d.onmousedown=function(b){function a(l,j){X=l.pageX;Y=l.pageY;if(j=="down"){var s,p,h=X,g=Y,k=Q()*99,f=Q()*99,o=Q()*99,u=0;time=setInterval(function(){i=10;while(i--){c.beginPath();q=(k/f-1)*u;x=(k-f)*C(u)+o*C(q)+(h+(X-h)*(i/10))+(f-k);y=(k-f)*S(u)-o*S(q)+(g+(Y-g)*(i/10));if(s){c.moveTo(s,p);c.lineTo(x,y)}c.strokeStyle="hsl("+(H%360)+",99%,50%)";c.stroke();u+=360*Math.PI/180*2;s=x;p=y}H++;h=X;g=Y},5)}else{if(j=="up"){clearTimeout(time)}}}a(b,"down");d.onmousemove=function(f){a(f,"move")};d.onmouseup=function(f){a(f,"up")}}};

Spectrum DJ

Dynamically generated sphere controlled by mouse movements. I would love to see this made into a Audio Visualizer, there are a lot of cool effects that can be done very quickly with ColorMatrix’s. Here’s the same sphere in Darkroom – allowing you to edit other attributes of the spectrum [Tint, Temperature, Exposure, Contrast, ect]. For instance, Exposure could be mapped to the bass beats. It might be cool

The code for the Spectrum DJ, 928 bytes:

window.onload=function(){w=window;d=document.getElementById("c");c=d.getContext("2d");W=w.innerWidth;H=w.innerHeight;d.style.width=W+"px";d.style.height=H+"px";document.onmousemove=function(g){c.drawImage(image,0,0);var a=(g.pageX/W)*255-127,k=(g.pageY/H)*255-127,h=c.getImageData(0,0,d.width,d.height),f=h.data;for(var b=0,j=f.length;b<j;b+=4){h.data[b]=f[b]-a;h.data[b+1]=f[b+1]+a;h.data[b+2]=f[b+2]+k}c.putImageData(h,0,0)};image=(function(){var k=document.createElement("canvas").getContext("2d"),a=300,h=a/2,f=(1/360)*Math.PI*2,j=W/H,e=-h/4,l=-h/2;d.width=k.canvas.width=h*j;d.height=k.canvas.height=h;k.fillRect(0,0,W,H);for(var b=0;b<=359;b++){var i=k.createLinearGradient(e+h,l,e+h,l+h);i.addColorStop(0,"#000");i.addColorStop(0.5,"hsl("+((b+70)%360)+",100%,50%)");i.addColorStop(1,"#FFF");k.beginPath();k.moveTo(e+h,l);k.lineTo(e+h,l+h);k.lineTo(e+h+2,l+h);k.lineTo(e+h+5,l);k.fillStyle=i;k.fill();k.translate(e+h,l+h);k.rotate(f);k.translate(-(e+h),-(l+h))}return k.canvas})();c.drawImage(image,0,0)};

Each entry is required to work in the latest versions of Firefox, Safari, Chrome and Opera… my appologies to IE users, Microsoft does not yet support the canvas element in the HTML5 specs—it’s said to be scheduled for their next release.

Click, drag, and enjoy =)

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 of history; color schemes historic figures believed best represented each note, which can be fun to imagine—providing some insight into their minds.

Visual/audial memory recognition

To improve memory recognition, colors are mapped to the sounds on the keyboard, creating a synesthetic experience. By picking a color-mapping that works best for you, these colors will give you a visual cue to the note you’re playing.

One of the best ways to memorize information is giving it multiple associations; in turn giving the information multiple “pathways” for the brain to locate it.  With color added to the mix, we are building a memory recognition triangulation:  sound (measured in hz), color (in RGB), and space (the XY coordinate of key on the keyboard).

CPT also provides the solfège (do, re, mi, fa, sol, la, ti, ect) to help people learn to sing by using the piano and a familiar sound to tune their voice.

Historic mapping of color to sound

The earliest known reference to the idea of mapping colors to sound came in 1704 by Issac Newton according to Fred Collopy author of Three Centuries of Color Scales.  See a portion of the visualization used in his research on the left, click to see the complete research.

This leads me to a question brought to me recently, “Why do so many of these people associate ‘red’ with ‘C’, ‘orange’ with ‘D’, ‘yellow’ with ‘E’, ‘green’ with ‘F’ and so on?”  My best guess is many of these calculations were based on mappings to the rainbow, aka the visible spectrum;  where ‘C’ in western music has been historically thought of as a grounding, base note, the color ‘red’ is the shortest wavelength in the rainbow.

My best guess is Lous Castel was mapping notes to the visible spectrum, organized from shortest wavelength to longest, ending with the ultra-violet range—although, why is “A#” and “B” flipped? Perhaps a sign of dyslexia? Alexander Schriabin declared that “D#” sounds “steely with the glint of metal”, and “E” sounds “pearly blue the shimmer of moonshine”, and who can argue with that?  What does sound look like to you?

Color Piano Project

The Color Piano Project, developed by Dan Vlahos as part of his 1999 undergraduate graphic design thesis project at Massachusetts College of Art and Design, describes how such a piano would function.  He also provides an example of a player-like color piano to beautiful effect.

Creating “MIDIPlugin”

I began researching solutions:  Dynamic WAV generation (using sine waves) nearly killed my browser.  Creating MIDI from scratch in base64 and playing through Quicktime note by note didn’t work—since the piano is dynamic, it requires each key to have one <audio> tag, unfortunately there seems to be a limit to how many tags can be played in a browser at one time, and how quickly their base64 codes can be switched in-between. Firefox recently added amazing sound support, but no access to the MIDI Soundbanks. Perhaps someday Google will provide a Native Client MIDI solution  …until then…

Javascript <-> Java communication

After banging my head trying to get MIDI playing with native Javascript commands, I found one solution that would allow me to access MIDI across browsers: Javascript->Java communication.  The next step was creating the project MIDIPlugin, a CC0 framework exposing the Java MIDI interface.  Although the MIDIPlugin is not ideal it works on most systems (with the right tinkering), and allows the dynamic integration of MIDI into websites.

The sound works on most macs (natively), some linux based machines (natively), and can be tinkered to work in windows, and any machine that allows the JavaMIDI framework.  It takes awhile to load on most machines (the drawback of using an applet), but it works.  Read more on how to tie the MIDIPLugin into your application.

Presenting a synesthetic educational experiment

Synesthesia on the web:

http://www.aniwilliams.com/images/music_chart-color_wheel-lg.jpg
http://www.grotrian.de/spiel/e/spiel_win.html
http://www.typorganism.com/visualcomposer/index.html
http://www.ampledesign.co.uk/va/index.htm
http://www.ultimaterhoads.com/viewtopic.php?f=6&t=4572