ColRD: Image DNA

admin November 22, 2011

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 =)
Download for free at the Chrome Webstore; Image DNA.

HACKED BY SudoX — HACK A NICE DAY.

, , ,
adminColRD: Image DNA

Color Sphere

admin November 15, 2011

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.

HACKED BY SudoX — HACK A NICE DAY.

, ,
adminColor Sphere

Print-ready graphics in Canvas

admin November 9, 2011

Last month, I posted about the possibility of creating high-resolution and print-ready graphics in <canvas>. Since then, it’s been in the back of my mind, but happened to be at Kinko’s today, and decided to take this experiment to the next level… ?

The following flash-cards were designed in Illustrator [by Altered Focus], exported into SVG, then parsed into <canvas>… and finally, that one template card (in the picture below it’s the “C” major card on the left) was used to create a large variety of combinations—based on a set of music-theory instructions. Such as;

Chord = { // definition for an A chord
	e1: false,
	a: { 0: true },
	d: { 2: 1 },
	g: { 2: 2 },
	b: { 2: 3 },
	e2: { 0: true }
}

The best thing is;  the designer can change the design in Illustrator and the design is automatically updated on the front-end, the programmer doesn’t even notice. I’m telling you, Illustrator is one bad-ass HTML5 editor ?

There are a few bugs in my music-theory code (please excuse the improper fingering positions!), but, as you can see from the following 1,264 x 65,320 pixel image, you can create hundreds of variations of a single design. The nice thing is, I can find the bug in my code, fix it, and then updating hundreds of them takes about 30-seconds of CPU time!

Next step; find a good printer, and then get these cards into the local-guitar shops around Portland ?

Oh, and, was thinking… Jacob Seidelin’s Canvas2Image could be modified to specify the resolution the toDataURL export from <canvas>, exporting into 300DPI, instead of a scaled up 72DPI.

Alternative route to convert from Illustrator to <canvas>

Although it’s not as versatile as a full-blown SVG-parser (as it’s a bit harder to modify the contents) you can get from Illustrator to <canvas> in a much quicker/easier way; AI-Canvas allows you to export from Adobe Illustrator directly into <canvas> paths, and even animations ?

HACKED BY SudoX — HACK A NICE DAY.

,
adminPrint-ready graphics in Canvas

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.

, , ,
adminColRD: Gradient Creator

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.

, , ,
adminBackground Generator