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 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.”

Read more about the daltonization algorithm used on daltonize.org.

Technical hurdles with Cross Domain policies;

The following highlight some of the options to get around Cross Domain issues with images;

  1. CORS (Cross-Origin Resource Sharing)
    • Must be recorded in the header of the image hosting website, and the browser must support CORS. This is the best option, it handles the image as if it were any other image. When creating the image use; image.crossOrigin = true;
  2. Flash (crossdomain.xml)
    • The website must have a crossdomain.xml in their root directory, and the browser must have Flash installed. When that is all in place, you can use the ExternalInterface to copy the base64 from Flash into a Image tags src, and subsequently onto <canvas>.
  3. UniversalXPConnect (Firefox)
    • Certain versions of Firefox support this… I haven’t been able to get it working lately, anyone? When it works, it requires the user to click “Accept” to a security box.
  4. Base64 proxy from external server.

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!

HACKED BY SudoX — HACK A NICE DAY.

adminColor Accessibility in the Browser

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 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:

HACKED BY SudoX — HACK A NICE DAY.

adminBackground Generator

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 with the File API and Drag and Drop are the technologies used to create the demo.

HACKED BY SudoX — HACK A NICE DAY.

adminPortlandia Foods: Uploader

ColRD: website

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!

HACKED BY SudoX — HACK A NICE DAY.

adminColRD: website

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.  Ricardo (Mr. Doob) claims this framework is written “for dummies”, which is perfect for me, because that is exactly where I’m at with 3D programming ?  Creating this wall of interactive color blocks was simple with Three.js.

MIDIBridge allows Javascript to connect to Java’s internal MIDI synthesizer. The author, Daniel, is working on a Javascript to Flash bridge that uses SoundFont2 to map amazing libraries of sound.  There are thousands of SoundFont2 patches available, which opens up the doors to all sorts of new creativity.  The framework is easy to tie into by sending direct midi messages to specific channels.  For instance, the message code 128 turns the note off whereas 144 turns it on.

Matt West’s MIDI file reader jasmid was extremely useful to parse the MIDI files from the server on the client-side using Javascript.  I’ve tweaked the script slightly to allow for pausing, and resuming of songs.  The collection of royalty free classical piano pieces comes from Disklavier World.  Thank you to all, amazing contributions!

Here’s the WebGL Music Box that reads a selection of classical music such as Tchaikovsky’s Waltz of the Flowers from the Nutcracker. And then there is the interactive version that you can control the notes with your mouse.

This demo has been tested on Mac in Google Chrome, Safari, and Firefox.

HACKED BY SudoX — HACK A NICE DAY.

adminMusic Box