Generative Logo Design

January 22, 2014 Experiments

I’ve been trying for a while to come up with a simple, yet meaningful, mark or logo that I can use to brand myself and my work.  This is something I’ve been working on since last year, when I first made a real portfolio of my grad school work.  I came up with a few concepts, but I was never really proud of, or confident in any of them.  Mentally, it is a very taxing process, because you sit in front of a blank sheet of paper with the task of coming up with a mark that represents you.  Stylistically, it needs to represent any past work your going to stamp it with, as well as any future work you do under this name.  Conceptually, it should have a reason for existing… because “I don’t know, I thought it looked cool…” is not a good answer for a potential employer.  It’s pretty intimidating.

In my latest attempt at coming up with something, I think I’ve finally found a style that fits me.  Because of my work with generative design, I began with the idea that this would be a “generative logo”.  That is, a graphic element created procedurally by a computer program.  A lot of graphic designers seem to puff up at the notion of a computer program creating logos.  But what is hard to understand, especially by people that don’t write code, is that by writing the code, you are still designing the graphical elements and how they interact, just that you now have a new set of tools for creating the form and determining the position.

Inspiration:

There are a number of ways of creating a generative logo.  A lot of people use Processing to do this, but some other use HTML and Javascript.  Here are a few that I really like:

  • The Creative Applications Logo… designed using Processing.
  • The MIT Media Lab is always doing amazing things… of course they have a generative logo.
  • A dynamic logo by NEUE for the Nordkyn tourism bureau.  See a post about it here.
  • A generative logo for Seed Media group by Richard The.

The Design:

Since I am both an industrial designer, and an engineer, I felt that I should graphically represent this in some way.  The concept I came up with relates to the viewpoint in which each profession does their designing.  Industrial designers use a “perspective” view, where the 3d model is rendered in a foreshortened view to mimic the way the eye distorts vision, while engineers use the “orthographic” view, where all projection lines are parallel, making it easier to view relationships between features of a model.  So, I decided that my mark would show the intersection of these two ways of thinking, by drawing two overlapping cubes, one in perspective view and one in orthographic view.  This image turns out to be very literal, which I then abstracted by cropping the view, removing some of the corners and leaving the viewer with an interesting series of overlapping polygons.

This is one I feel good about.  It combines subtle references to my backgrounds in both design and engineering.  And the fact that it is generative indicates my interest in applying technology to design.  And to top it off, it is also is adaptable to any color scheme or usage situation!

The Implementation:

To create the logo, I did a series of experiments using the Canvas element in HTML5.  The picture below links to the live result:

LogoGenerator-screen

 

The major feat of understanding here was creating virtual cubes and learning how to do the necessary matrix arithmetic to draw them on the canvas.  As with most information searches, I started with Wikipedia’s article on 3D Projection, and fortunately it had everything I needed.

Because you can only see 3 faces of the cube at a time, I only needed to create 3 faces, using only 7 points.  These 3D points must first be transformed and projected to serve as the corner points for the 2D polygons that get drawn on the canvas.  The first step is to rotate the points so that the faces are oriented towards the viewing direction.  In order to create a randomized orientation, I use Math.random() to change the rotation angles (theta) every time the graphic loads.  This is done using the rotation matrices (from Wikipedia) below:

 

Orthographic projection is accomplished using the following formulas that account for scaling and offset.  In my code, I introduce additional random multipliers to change the size of the cubes each time they load:

Overall, the process looks like this:

Orthographic

 

Perspective projection is a bit more complicated, where the points are projected onto a plane as seen from a specific camera point.  At first this seems intimidating:

However, with a no camera rotations, the equations simplify very nicely, where the direction vector (d) is found by subtracting the camera coordinates (c) from the point coordinates (a):

And the actual projected points (b) are found by creating a ratio with the viewing distance (e):

This is what perspective projection looks like:

Perspective

 

To take a deeper look at how I coded this, take a look at a section of my code here: ProjectionCode

With the geometric concepts down, I still had a lot to figure out to get the Canvas to work properly, enable flexibility, and then implement it on my website.  I learned a lot on this project, so here are a few of the highlights:

  • Enabling the Canvas to be saved as a PNG file.  This is awesome.  After I get a logo that I like, I can just right-click on the image and do “Save image as…”.  I learned how at  HTML5 Canvas Tutorials.
  • JSColor is a nice little piece of code that creates a simple, yet effective color choosing box.  You can find it here… http://jscolor.com/
  • YUI is a quite expansive javascript library built by some people at Yahoo!  On of the modules is called “color-harmony” and it enabled the color rules featured in the drop-down menu.  Take a look here… http://yuilibrary.com/
  • Once I had built the page version of the logo generator, I wanted to adapt it so it could sit in the header of my actual website.  To do this, I implemented a Child Theme on my current WordPress theme..
    • There are tons of posts out there about creating child themes.  This one, however, was particularly helpful.
    • Once I had created the theme, I needed to add the canvas elements to the header using Javascript.  I did so using the method described by Dustin Diaz.

Hope you enjoy it… let me know what you think about the new look!

Leave a Reply

Your email address will not be published. Required fields are marked *