Apps | Galactic.ink

ColRD: Gradient Creator

admin October 22, 2011

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;

GGR, SVG, and CSS3 exporting (soon, as in this week).
Desktop wallpaper generator; textures, gradients, and user defined sizing (see previous article), along with the Gradient Noise generator.
Time-machine (undo and redo).
The user could split the midpoint, creating a shadow of itself in the opposite direction, this way the user could control the color blur on one edge (as it is now), or both edges simultaneously. The shadow could be fixed to the inverse of the controller (SHIFT-KEY) to create even blurs, or controlled on it’s own independently.

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/

HACKED BY SudoX — HACK A NICE DAY.

Apps, ColRD Color, Gradient Picker, HTML5

Color Accessibility in the Browser

admin October 20, 2011

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;

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;

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

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.

Base64 proxy from external server.

Max Novakovic’s function $.getImageData using Google App Engine. This is used as a last case scenario due to bandwidth sertraline anxiety. The $.getImageData proxy is used as a last resort, as it produces bandwidth concerns.

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.

Apps Color

Background Generator

admin October 8, 2011

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.

Apps Canvas, Color, Gradient, HTML5

Music Box

admin August 8, 2011

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.

Apps HTML5, Piano, WebGL

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