Digital

Monday 31st October, 2011
Subdividing Equilateral Triangles in Processing

With some time to kill on the Ferry (once it got dark), I was casting about for a quick code project I could play around with. I wanted to use photography as the input to generate an image, and came up with this subdividing triangles thing.

Above: The code output. Triangles.

Above: The source image, Horseshoe Bay.

It’s a Processing sketch that draws a triangle, filled with the colour from its centre point. Clicking on a triangle subdivides it into four, each filled with a new colour from its own center. The idea is that each click will selectively increase the resolution of the image. Parts of the image can be made identifiable, albeit in a triangular-sort-of-way, through furious clicking.



The sketch is a bit quirky – there are some rounding errors that stop the lines lining up perfectly, and the recursive hit testing for clicking on a tri doesn’t always work. Rather than fix these bugs, I’m going to move on and rebuild it in Scriptographer: it’d be a nice tool to have in Illustrator.

If you do want to try it out, the sketch can be downloaded here: equilateral_triangles

Update: I’ve completed a quick Scriptographer thing of this. It’s available here.

Digital

Tuesday 18th October, 2011
Canvas: circle packing & physics

As an early experiment for my new portfolio site, I built a visualisation of my recent work using mootools and the canvas. It was my first attempt at some mootools code, and I really like its object oriented approach.


A (modified) version of the experiment is up here, and here’s the code.

At the heart of the visualisation is a circle packing algorithm. I’d been looking into build my own system for this, with something force directed to group categories together, but I discovered the excellent moocirclepack by unwieldy studios so used that instead.

I like this interface, I feel like it’s playful and encourages some exploration. But in the end, there are a few too many layers between arriving on the site and seeing my work. Actually showing the work kind of got in the way of the fun, playful physics, and quickly became a fairly convoluted system of overlays. I’ve switched the graph from being the core of the site to an extra piece visualising my skill set.

Illustration

Saturday 15th October, 2011
Stilted houses: desk toy

I’ve just uploaded my first model to Shapeways for 3D printing. It’s a mini stilted house with a wooden exterior, styled to look like some of Vancouver’s character homes. We lived in something like this when we first arrived in Vancouver. Sadly, it didn’t have stilts. It flooded repeatedly, and has since been demolished. This model therefore represents an improvement on the existing architecture of the city.

At this stage, the print is just a test for scale and fragility. I’d like to make the floors of the building modular, so that a custom property could be printed and stacked.

At a later stage it’d be nice to do the same with container homes. If you could remove the side panels of a mini-container,  a lot of container home setups could be made with duplicate prints of a single module design. Who doesn’t want an idealised container home on their desk? It’d go well with your miniature Eames chair colleciton.

Digital

Thursday 13th October, 2011
I like the part when

It’s obligatory to start at least one Tumblr. In particular, these should be about as specific and limiting a category as possible. And, inevitably, they’ll run out of steam fairly quickly.

Here’s mine: ilikethepartwhen.tumblr.com. A collection of reviews from amazon.com containing the words “I like the part when…”: a tried and tested review format. I like the part when the reviewer over explains the bit they like and why without any punctuation.

My favourite review:
“I like the part when Mr Fox chased the chickens out the henhouse and tried to catch them for his family for dinner because they are poor.”
About Fantastic Mr. Fox
Review by A Customer

Digital

Monday 10th October, 2011
Oh shit, you found a secret website.

With a couple of spare hours, Darcy and I put our heads together to come up with something meaningless and fun: ohshityoufoundasecretwebsite.com

It’s a secret, with share buttons. It’s received hundreds of views, from over 30 countries, which we’re obviously very upset about. Because you’re not supposed to tell. It’s a secret.

Illustration

Saturday 17th September, 2011
Pin Badges.

I’ve been drawing some pin badges this week – the start of what will hopefully grow to be a fairly large collection of vector graphic sketches.

Top row, Beef cuts: shank cross cut, rib roast, bottom round roast.
Middle row, Men’s hats: flat cap, trilby, pork pie.
Bottom row, Rollei cameras: Rolleiflex TLR, Rolleiflex SL66, Rollei 35.

Digital Illustration

Monday 22nd August, 2011
Offset text shadows with Scriptographer

Scriptographer is a plugin that provides a handy way to access Adobe Illustrator’s built in javascriptability. I’ve been looking for a reason to use it for a while, and found it today while manually repeating the same task ad nauseam. This is by no means the coolest use of script in illustrator (check out the gallery of scripts for that – http://scriptographer.org/gallery/), but it’s a nice way to automate a repetitive task, whilst also providing some control parameters. It also seems like an easy intro to the plugin’s use, which I’ve documented here lest someone might find it useful.

The effect we’re creating is the offset type shadow, beloved of sign painters:

In Illustrator, we’ll turn a text object from this:

To this:

Here’s the finished script, (text_shadow.js, 4KB). Make sure you have Scriptographer installed, then drag this into your scripts directory (usually created in User/documents/Scriptographer Scripts). To make your own, open the Scriptographer panel in Illustrator, and click the New Script button to create a file, and to open it in a text editor.

The effect looks simple, but in Illustrator, here is the sequence of commands you need to carry out to make it:

  1. Copy the text object, and paste in front of the original twice, to end up with three, stacked copies of the text.
  2. Offset the top layer.
  3. Send this offset layer backwards so that it’s in the middle of the three layers.
  4. Select the top two versions of the text, and create outlines of them.
  5. Convert each newly vectorised text block into a compound path.
  6. Using the pathfinder tool, subtract the front object from the back object.
  7. Offset the text shadow object that is created.

In reality, this can be done pretty quickly, but to adjust the offset values of the shadow the object needs to be remade. You could make the end result more editable by using a clipping mask instead of the pathfinder. Still, it’s more complicated that you’ll want it to be if you’re doing this often, or if you quickly want to try out different shadow sizes and offset positions.

The Script

Having broken down the steps that we’d carry out using the Illustrator interface, we can go about recreating each with code. To recap, we need to:

  1. Get the selected object.
  2. Triplicate it.
  3. Covert two copies to outlines.
  4. Move one of them.
  5. Make the outline copies into compound paths.
  6. Cut one from the other.
  7. Offset the new shadow object that is created.

1.
Get the first object that’s been selected on the canvas.

var obj = document.selectedItems.first;

This line shows us a little of Illustrator’s object hierarchy. We’re looking in the current document, getting an array of items that are currently selected, and getting the first one.

2.
We could duplicate the object using the clone method:

var objCopy = obj.clone();

2 & 3
But we can skip cloning the object, and combine steps 2 & 3 by directly creating the outlines of the original text, and assigning them to new variables:

var objCopy1 = obj.createOutline();
var objCopy2 = obj.createOutline();

4.
Move the first of the copies (which is in the middle of the stack), by creating a new point and adding it to its position attribute:

objCopy1.position += new Point(5, 5);

5.
If we cut one object from the other now, we’ll end up with one arbitrary piece of a letter. To ensure the action treats each vectorised word as a single shape, we need to make them into compound paths. The function expects an array of objects that it’ll tie together, but for our purposes we need only pass it a the single outlined word copy:

var compoundFront = CompoundPath([objCopy1]);
var compoundBack = CompoundPath([objCopy2]);

6.
To make our final shadow shape, we declare a new variable, shadow, and use Pathfinder.backMinusFront(). The Scriptographer pathfinder reference lists all the available functions (http://scriptographer.org/reference/ai/pathfinder). There are lots of optional details that can be set, but here we’re just going to pass it an array of the two objects:

var shadow = Pathfinder.backMinusFront([compoundFront, compoundBack]);

7.
Finally, we just need to move the shadow object away from the original text object (which remains unchanged by this script):

shadow.position += new Point(5,5);

8.
We’ll likely also want to move the shadow object so it’s behind the original text.

shadow.moveBelow(obj);

Parameterisation

In this example, we’ve hard coded both how large the shadow object is (in step four), and how far we place it from the object (in step seven). One of Scriptographer’s strongest features is the ease with which interface windows can be made, letting us change parameters at run time.

The Scriptographer interface tutorials are a great place to start:
Creating palette windows
Interface components

By declaring an object for values and another for components, you can script a window which looks like this:

var values = {
    color: '#727272',
    xSize: '2',
    ySize: '2',
    xOffset: '2',
    yOffset: '2',
    knockOut: false
};

var components = {
	color: {
		type: 'color', label: 'Color'
	},
	ruler1: {
        type: 'ruler'
    },
	xSize: {
		type: 'number', label: 'x width', range: [-100, 100]
	},
	ySize: {
		type: 'number', label: 'y width', range: [-100, 100]
	},
	ruler2: {
        type: 'ruler'
    },
	xOffset: {
		type: 'number', label: 'x offset', range: [-100, 100]
	},
	yOffset: {
		type: 'number', label: 'y offset', range: [-100, 100]
	},
	ruler3: {
        type: 'ruler'
    },
    knockOut: {
    	type: 'boolean', label: 'Knockout Front'
    },
    ruler4: {
        type: 'ruler'
    },
	button: {
		type: 'button', label: 'Run Script',
		value:'make shadow',
		onClick: function() {
			textShadow();
		}
	}
};

var palette = new Palette('Shadow', components, values);

To make the button run the script, wrap everything we wrote in steps 1-7 in a function called textShadow.

Reference the values for the shadow size and offset as values.xSize, values.ySize, values.xOffset and values.yOffset.

Rulers in the components object just add a line to the interface to help divide elements.

I’ve added a boolean value for ‘knockout’, which allows you to select whether or not to cut the original front object from the final shadow once it’s been moved. This could be handy if using transparencies in the front text. This uses a lot of code we used before in making the original shadow:

if(values.knockOut){
	var compFront = CompoundPath([obj.createOutline()]);
	var compBack = CompoundPath([shadow]);
	var finalObj = Pathfinder.backMinusFront([compBack, compFront]);
}

Finally, the color value can be used to set the final shadow colour. This was trickier that it seemed. Once we have a compound path, we need to loop through all the children within it, setting their color:

for(var j=0; j

Download the final script. (text_shadow.js, 4KB)

Have a look in the file – I've also wrapped some of the code into a loop to apply the shadow to all selected text objects.

Digital Print

Wednesday 27th July, 2011
Sponsor My Head

TAXI just launched ‘Sponsor My Head’, an initiative to get helmets on heads for BrainTrust Canada.

Partnering with Nutcase Helmets, we created a competition that encourages aspiring young riders across street disciplines to make a ‘sponsor me’ video wearing a free Nutcase helmet. The videos will be rated by the community, and winners selected from the top ten by a panel of judges. The grand prize winner takes home $5,000.

Visit the site at sponsormyhead.com.

Photoraphy Travel

Friday 6th May, 2011
Neon Museum, Vegas

The Neon Museum is a sign graveyard that acts as an excellent potted history of Vegas. It contains evidence of Casinos and hotels that have died, or that have shed their visual identity in a struggle to out-do each other.

I tried to get an entire alphabet. Failed.

You can see more photos from the museum at this flickr set.

Print

Wednesday 4th May, 2011
Ziploc Smartzip

In response to the National Advertising Awards competition brief, we produced these ads for Ziploc freezer bags, which have a textured zipper for ‘Freshness you can hear”.

Ziploc sound wave - carrot.

Writer: Will Seccombe, Art Director: Mike Greer.