Galactic.ink | Code & Design

ColRD: Color Extractor

admin August 1, 2011

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 ?

HACKED BY SudoX — HACK A NICE DAY.

Apps, ColRD Color, Color Picker, HTML5

Orange Honey; Epilogue

admin July 16, 2011

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 framework that blurs the line between “web-app” and “desktop-app”…

Due to my own budgetary constraints, and differing visions within the corporation, the time has come for me to move on from Orange Honey. The projects will continue under the direction of my good friend Charles Pritchard. He is without a doubt the most knowledgable developer I’ve worked with.

The following highlight a few of my final contributions to Mugtug; made possible with HTML5;

– Layer Styles; this module creates effects such as InnerShadow, OuterShadow, InnerGlow, and OuterGlow. These are similar to what Photoshop achieves—the difference is, my version has the ability to do what I’ve coined “style stacking”. Style stacking allows the designer to add multiple fills (solid, gradient, pattern) to, for instance, InnerShadow;

– SVG Parser; this module converts .svg files into <canvas> commands, accepting complex examples, supporting features from <gaussianblur> to the <use> element;

This is an image from OpenClipart rendered in the SVG->Canvas parser;

There is no Gaussian blur in HTML5’s <canvas>, and to do a “true” Gaussian blur takes a lot of processing, and computational time. I ended up using Mario Klingemann’s StackBlur to polyfill the support in the SVG parser, the results are pretty good; I think some of the blurring wasn’t turned up enough do to my own Matrix scaling issues. Canvas left, SVG right;

– Radial Gradient; this demo shows how fun radials and gradients can be ?

– Composite Erase; this module creates a new composite mode, allowing you to erase colors based on the color of a brush;

– Brushes; this module adds some fun new brushes to play with, like galaxy (left);

– Marquee; this module creates a “magick wand” with marching ants, for selecting portions of an image, and modifying them with fills, filters, and other effects;

HACKED BY SudoX — HACK A NICE DAY.

Code Art Canvas, HTML5, Typography

Portlandia Foods: Locations

admin May 7, 2011

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 you!” to everyone who has helped make this possible; Jeff Bergadine, Boni Deal, Daniel Christopher, Kamila Loupal, the fine people at Alexis Foods and GloryBee Natural Foods, and the support from so many others; we couldn’t of gotten this far without ya!

To keep up with what’s going on at Portlandia Foods, and find the nearest place that carries Portland Ketchup we’re introducing a new “locations” page that will make the process a snap! The Google Maps API was a pleasure to work with–conveniently, their API provides directions for Bicycling and Walking to locations; many thanks to Google for providing these resources freely to all ?

Without further ado; http://www.portlandiafoods.com/locations/

HACKED BY SudoX — HACK A NICE DAY.

Portlandia Foods HTML5

global Composite Operation

admin April 15, 2011

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 strictly 0% and 100% opaque pixels. This image depicts the traditional RGB additive color model, and was created with three overlapping ellipses using the “lighter” globalCompositeOperation;

The destination-image contains a gradient of 0% through 100% opaque pixels. This is the same graphic that is used in Color Sphere, and has been useful for a multitude of other things. This was created with lots of triangles and linear-gradients;

NOTES:

Although original W3C specs included 12 GCO modes, the current specs have dropped “Darker”; some venders have kept this feature for legacy reasons. The problem was no one could agree on a standard formula. Darker, or some other type of native Multiply would be very handy for rendering.
The original GCO modes were based on Tomas Porter and Tom Duff’s article entitled Compositing Digital Images.
There is missing support for GCO modes between browsers that needs to be sorted out. Currently, six-modes work without fail across browsers (IE9, Chrome, Safari, Firefox, and Opera): source-over, source-atop,-over, destination-out, lighter, and xor. For a more detailed report on which browsers support what check out Mike Rekim’s report.

HACKED BY SudoX — HACK A NICE DAY.

Open Source Canvas, HTML5

HTML5: Typographic Effects

admin March 1, 2011

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);

… Spaceage;

… and many other fun effects. The following ones are using a CSS->Canvas converter; the CSS used in the converter was sourced from Line25, and Stereoscopic, and Shadow 3D;

HACKED BY SudoX — HACK A NICE DAY.

Open Source Canvas, HTML5, Tutorial, Typography