Canvas | Galactic.ink

C.A.R.D.S. Project

admin October 19, 2015

I was recently asked to create artwork for the C.A.R.D.S. Project. Chris & John gave me no restrictions, and only one task: Create something interesting that fits on a 3.5 x 2.0 business card. For me, this was a dream project and an exciting excuse to play around with some generative algorithms!

My goal was to create an ‘ocean scene’. To do this I used Perlin noise vector fields, bezier curves, and color cycling. The ‘creatures’ or ‘waves’ are grown based on randomized parameters such as ‘width’, ‘length’ and ‘color’. The parameters change over time; some linearly, while others are mapped to cosine/sine waves and easing functions (this resulted in a more organic feeling).

I ended up submitting 250 unique cards to the project. Each card is composed of 10-frames and took 1-2 minutes to generate. Many were thrown out in the process! From there the cards were sent to GifPop for lenticular printing.

Here’s a few of my favorites (the squid in the first image is by Justin Windle):

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.

Apps, ColRD Canvas, Color Picker, HTML5

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.

DIY Canvas, HTML5

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

Portlandia Foods: Uploader

admin October 2, 2011

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.

Portlandia Foods Canvas, HTML5, Portlandia