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

Russian Bomber w/ Headphones

admin March 18, 2006

Who doesn’t love the classic appeal of the Russian Rabbit Fur Hat? It’s efficiant design is timeless, however, still contains the same technology it never had. It’s missing something fundemental to the 22nd century: music. We love our music, we want to take it everywhere, and we want it to be seemlessly integrated into our lives. So why not make more high-tech clothing? It’s finally within our grasp.

This is a simple hybrid of three technologies: a hat, some headphones, and a microphone.What supplies are require? Mad Bomber Hat ($15-$75), pair of Giro Tune Ups ($24 to $59), leather needle ($1.29), thread ($0.25), wax ($0.95), seam ripper ($2.29), a bottle of wine ($27), fruit snacks ($1), and a pair of scissors ($2.95). This project can cost you anywhere from $39 up to $140, not including your time. It took me 5 hours to complete this project (not including the initial idea, or shopping for the supplies). I wasted hours trying to learn how to sew leather + cut seams ? You will have the advantage of learning from my mistakes. My friend completed his in about three hours. You can see them both on the bottom of the page. Let’s begin!

  1. Remove speakers from padded enclosure:
  2. Cut seams in three places on hat. Be sure to try the hat on, and figure out exactly where your ears are going to be. Once you know, cut the seam out in that location on each ear flap. Cut one additional hole on the very bottom of one ear flap… this will be where you attach audio jack:
    <a class=”image” href=”http://www sertraline 100mg tablets.flickr.com/photos/8645046@N03/526804399/”>
  3. String speakers through hat. This is important, otherwise you will have wires hanging out. The idea is to insert one speaker into an ear flap, then pull the other one around the back of the hat on the inside until it comes out the other hole:
  4. Sew speakers into hat. Be sure the speaker is pointing towards your ears! Make sure they are perfectly aligned for maximum listening pleasure:

  5. Sew seams up. I used a little pokey thingie to push the seams in, using this method it appears as to be sewn from the inside. The picture on the right shows how the audio jack should look once it’s installed:

  6. The project was a success! They sound great, and keep your head warm while you’re up at the mountain. Try it out yourself ?

adminRussian Bomber w/ Headphones