Lately I’ve been working on a new brand, logo, intro, and general design for my personal website and projects. I already had a company working in the corporate sphere, but I needed something that I could promote my personal art, music, and programming projects. See below the steps I took to achieving this.

I knew why I wanted to do this, but didn’t have a great vision as to how to present it. A lot of the projects I had in my mind spanned a lot of different genres; music, generative art, programming tutorials, interaction design, etc. So I had to answer the question “What is the common thread between all of these?” Well…Me! So, who am I? I’m a mid-twenties millennial living in San Diego, Ca. I have a very minimalist and modern aesthetic

I’ve always believed in the adage put forward in 37Signals book Rework “Scratch your own itch,” meaning in other words; if you have a need for a product, there will be others, and you’ll be more interested in putting in the effort to see this project through. So I asked myself; “What do I want to see?”

I drew a lot of inspiration from Chris Milk (a designer and artist who famously worked on Music Videos for OK GO and Arcade Fire). As well as a little known programming blog acko.net.

This led to me to go to a very simplistic, modern, and young brand that (perhaps too much) leaned on trends.

This could help me to focus my creative endeavors so that all of these disparate projects could feel consistent.

Now that I had a general focus I threw all my ideas at the wall. I find a lot of time in the beginning stages of my creative process, copying other ideas will spark me to come up with new (albeit derivative) concepts. Meaning, in the beginning, going to inspiration websites, and design showcases and finding things you like and attempting to make copies will help you to both understand why they designed it the way they did, and will then give you a better understanding on how to take different elements and make your own. But in the end, let’s be real; Nothing is original!

I went to behance.net and dribbble.com and looked for other people doing PG monograms, different shape concepts, artists I enjoy such as Yoga Perdana, and used those inspirations to make as many concepts as possible.

I then eliminated those I felt didn’t fit the brand or those, I just didn’t like. Which, if I might sidebar for a second, asking oneself the question “Do I like it?” Might be the most important thing an artist can do to define who they are, what their brand and style is.

I then took the remaining and user tested them. I just used a basic “What do you think?” or “What does this mean to you?” Method to my target demographic (16-36). On some projects I’ll engage IDEO’s method cards, but more on that in another article.

Finally came up with two concepts, and chose to go with my favorite.

I knew from point one I wanted to use a Low Poly background. I’ve been fascinated with low poly design for a while now, attempting to fit it into any project I could. Finally I found a use for it!

The first part was coming up with a way to dynamically generate the 3D plane. As seen on my website patrickgates.com.

PROGRAMMING NERD INCOMING

I looked at 3 or 4 ways of using Perlin Noise to generate it, I already had a landscape generator based on Perlin Noise, but this mostly just modified the Z coordinates into a nice sloping landscape, and left the vertices on a uniform X and Y distribution.

After messing with a few iterations in Processing with the hope to port it to ThreeJS for web, I decided to remove the middle man and found a good Perlin/Simplex noise Javascript library on Github and started programming. I used that to generate the vertices across the plane of the browser windows height and width

function genPoints() {
  noise.seed(Math.random());

  points = [];

  for (var i = 0; i < 100; i++) {
    var x = (Math.random()*height) - (height/2);
    var y = (Math.random()*width) - (width/2);
    var z = noise.perlin2(x/100, y/100) * 10;

    points.push([x, y, z]);
  }
}

Notice the slight variation in Z, just to give the light some places to form shadows.

Then used a Delaunay triangulation library to turn all those points into a solid plane.

function triangulate(points) {
  // Triangulate
  var delaunay = new Delaunator(points);

  // Create Faces
  var geometry = new THREE.Geometry();

  for (i = 0; i < points.length; i++) {
    geometry.vertices.push(new THREE.Vector3( points[i][0], points[i][1], points[i][2] ));
  }

  for (i = 0; i < delaunay.triangles.length; i+=3) {
    geometry.faces.push( new THREE.Face3( delaunay.triangles[i], delaunay.triangles[i+1], delaunay.triangles[i+2] ) );
  }

  geometry.computeFaceNormals();

  // Set our material
  var mat = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 });

  // Create our mesh
  mesh = new THREE.Mesh( geometry, mat );

  // Flip the mesh the correct way
  // (probably could avoid this if I did things more properly)
  // (resources, shmresources)
  mesh.rotation.y = Math.PI;

  // Add mesh to scene
  scene.add( mesh );
}

And Boom! I had a plane. Now I just needed to light it and wrap it up. The lighting was just stolen from this example, I just loved the way it looked in the Canvas library, then found some color combinations I liked, and boom, I had my lighting.

I combined and minimized all my packages and code with a nice Gulp script, threw it on Github, and you can find it here.

Now comes the fun part, putting it all together.

I wanted a way to tease it on Social, as well as I needed an intro for my Youtube Videos. I took and exported the ThreeJS dynamically generated plane (cause, why reinvent the wheel), then imported it into Blender. Now, I know what you’re saying “Why are you using Blender, I imagine you have many high end 3D software,” and the answer would be yes, but I’ve been using Blender since before I had the money to afford such software, and know it very, very well, and this project I was doing had nothing I needed inside of any of the other apps, so why bother?

Once I imported the plane, I started to try and recreate the lighting, but could never get the same effect. The lighting always created too many specular highlights and never mixed the same way that the ThreeJS one did. So once again, why reinvent the wheel. I exported frames from my ThreeJS implementation as PNGs and used that as a video texture for my plane.

Now that I had a lit plane, it was time to animate it. All I did was take the plane, and make it into a cloth. Then took a few cubes, and animated them at high speeds with the collisions turned on into the cloth simulation. Now I had those nice percussive hits to match the music I had in my head, but I felt the plane didn’t have enough “glitchy-ness.” So I put another cube behind it and gave it the force field turbulence property, and viola! I had my animated plane.

Then all I did was take and animate my logo and the camera to mimic the hits and movement of the plane, and I exported it.

ON TO THE NEXT STEP

We’re nearly there. Now I needed to take this video, and the strange music in my head, and try to put it down.

MUSIC NERD INCOMING

I had this nice 5 over 4 polyrhythm in my head, with the 4 being felt as eighth notes and the 5 being felt as quarter notes. With the hits from the video matching up to the first, second, and fifth hit of the 5 beat.

I wanted it to sound a little like Thom Yorke’s Cymbal Rush. With those scratchy synth pads, and Sine wave beeps and boops setting a cool rhythm.

So I started by putting a kick drum (Logic’s Seismic drum kit) on the 1, 2, and 5, with a grace note on the 4. And then put a beep on the eighth notes. Then (as I’m known to do), kept adding stuff.

I added some ambient generative noises from Obscurium, and ended up with this;

Then went and got rid of the ambient noises and added a cool rhythm from within Reaktor’s SineBeats2 groovebox, and some chords from Arturia’s Prophet V. I found a nice noisy, scratchy preset called BadPad3 within the Prophet that matched what I wanted to hear and tweaked it till it gave that melodic feel I wanted.

I then…deleted it all.

I found as I showed it to people, everyone told me it was too much, and wasn’t me. I had already strayed away from the brand I months prior had established (or a few paragraphs ago).

So I simplified it, deleted everything until all was left was the Prophet synth with the chords, and the kick drum. I thought about adding the eight note rhythm to keep some semblance of that polyrhythm intact, but I found that even without it, the polyrhythm was still there, thanks to where the chords sit.

It was a very simple approach to the effect I wanted to portray, and what is the main tenant of my brand, say it with me kids minimalism.

The Final product was a logo, website, and video intro that fit me, and I could use as I move forward into my many upcoming creative ventures.

Hope y’all enjoy it!