Programming for Visual Designers

Today I spoke to a group of advanced graphic design students in ART 467 at the University of Hawaii at Manoa. If you’re interested in having me speak at your conference/convention please contact me.

The Goal of my Talk

I am not going to explain how computers work in this talk.

You can watch a documentary on Youtube that explains how computers work. And these websites will show you how to code:

Today I want to get you excited about using computers to produce rather than consume. I want you to see that it’s not as difficult as other people would have you believe. But the most important thing is that you start today.

Are you qualified to give this talk?

I feel qualified to give this talk on Programming for visual designers because I nearly double-majored in Graphic Design and Computer Science. I took a lot of courses. I love the visual representation of ideas. Ocular input trumps all the other senses.

DOOM

Video games got me into computers. Specifically the video game Doom. This was the first game with blood, insane guns, demons vs space marines, and a killer frame-rate. Some of my friends got head-aches while I got more pizza and pepsi. I recently read the book Masters of Doom: How Two Guys Created an Empire and Transformed Pop Culture. It’s a fantastic read if you grew up playing Doom.

You don’t have to be good at math to program computers. It definitely helps but it’s not necessary. The primary requirement of a programmer is the ability to sustain focus for a very long time. That and the ability to hold many details in your head all at once. This is why an interest in meditation is common among programmers.

Meditation

Meditation strengthens your focus. I enjoy Zazen Meditation with emphasis on the book Zen Mind Beginner’s Mind by Suzuki Roshi.

Everything is a system. A model. A simulation. A learning experience.

Life and everything that makes it up are systems. Programming is about Systems and how they are designed. What can we learn from a simulation? How will a 3D model bridge behave in extreme weather conditions? How will our house look?

Enjoy breaking things down to their most essential parts, prioritizing that list, and getting the computer to perform that meaningful task.

If you want to talk to a computer programmer and keep their attention, focus on the following:

  • Precision
  • Efficiency
  • Forethought

This is why some of us are really into chess, or cooking, or astronomy. This is why Steve Jobs wore a black turtleneck and jeans every single day — he valued simplicity by removing the non-essential. Why waste 3 minutes picking out what you’re going to wear every single day? Systematize the regular, the mundane, and the trivial. And leave more room for Black Swans in your RAM.

MusicMaker v0.01

I’ve been coding a procedurally generated MusicMaker. Last night I booted up the program and recorded 10 tracks on my iPhone. The software works by creating a list of random notes in a musical key. Then it builds the sequence on 8 bar arrangements. The computer actually picks the notes it’s going to play.

If you would like to contribute to this project, please check out MusicMaker on GitHub.

Computers are like the microwave in Back to the Future 2. And they’re 1,000,000 times faster.

Life ticks by Microseconds

Our concept of time has been evolving since the invention of mechanized time in 1657.

If life feels like it’s speeding up it’s because it really is. Life doesn’t just tick by seconds anymore. There are new hands on the clock. Now, life ticks by microseconds.

A microsecond is an SI unit of time equal to one millionth (0.000001 or 10−6 or 1/1,000,000) of a second.Wikipedia

yt8NbAz

Computers are getting faster and faster.

Back in 1979, the first Apple computer used an Intel 8088 chip that maxed out at 0.75 Million Instructions Per Second at 10 MHz.

Now, the Intel Core i7 5960x processor in this futuristic-looking metal block is capable of doing 298,190 Million Instructions Per Second at 3.0 GHz.

Pro-tip for getting your ideas out of your head

4973990528_61258f6d34_z

Notepad + Tab = Invincible

Tabbed Systems modeling is a deceptively simple process that allows us to decouple, delineate, and decompose complex ideas into actionable items.

  1. Start with your problem.
  2. Write it out.
  3. Press return and insert a tab.
  4. List out the things you need to do to get this accomplished.
  5. For each of those items, break them down into simpler steps.
  6. Re-prioritize the list.
  7. Repeat ad nauseum.
  8. Get started on the top task.

Keep doing this and your problem will bend to your will. You’ll know what you need to do first. And that’s always the most important part.

Processing.org for Visual Designers

The Processing programming language is a subset of Java. You can download the entire programming tool from processing.org. Batteries are included. There is no need to install anything else. You now have everything you need to create and run an interactive project.

Here’s the code to create a spaceship like the one in Asteroids. Just copy and paste it into your Processing project and run it.

float shipX;//initial location
float shipY;//initial location
float shipAngle;
float direction;//ships's direction
PVector location;//ships's location
PVector velocity;//ship's speeds
PVector accel;//ship acceleration
 
 
 
void setup() {
  size(500, 500);
 
 
  location = new PVector(width/2, height/2, 0);
  velocity = new PVector();
  accel = new PVector();
 
  shipX = width/2;
  shipY = height/2;
 
  shipAngle = 0.0;
 
}
 
 
 
void draw() {
 
  checkKeys();
 
  background(0);
  stroke(0);
 
  velocity.add(accel);
  location.add(velocity);
  drawShip();
 
  accel.set(0, 0, 0);
  if (velocity.mag() != 0) velocity.mult(0.99);
 
  //wrap function
  if (location.x<0) {
    location.x = location.x+width;
  }
   if (location.x>width) {
      location.x = 0;
    }
    if (location.y<0) {
      location.y = location.y+height;
    }
    if (location.y>height) {
      location.y = 0;
    }
}
 
  void drawShip() {
 
 
  pushMatrix();
    // Translate ship origin
    translate(location.x, location.y);
 
    // Rotate ship
    rotate(direction);
 
    // Display the ship
    fill(105,95,95);
    stroke(255,0,0);
    triangle(-10, 20, 10, 20, 0, -20);
 
    // if the ship is accelerating draw a thruster
    if (accel.mag() != 0) {
 
    float thrusterCol = random(0,255);//thuster feature that appears behind the ship when accelerating
    fill(thrusterCol, thrusterCol/2, 0);
    triangle(-5, 22, 5, 22, 0, 40);
  }
  popMatrix();
 
  }
 
//moving the ship
void checkKeys() {
   if (keyPressed && key == CODED) {
    if (keyCode == LEFT) {
      direction-=0.1;
    }
    else if (keyCode == RIGHT) {
      direction+=0.1;
    }
    else if (keyCode == UP) {
      float totalAccel = 0.2;                 // how much ship accelerates
      accel.x = totalAccel * sin(direction);  // total accel
      accel.y = -totalAccel * cos(direction); // total accel
    }
   }
}
cited code source

Global Game Jam

You could learn to code by watching other people code. Of you could attend the Global Game Jam and meet other people who are interested in making things. Share your favorites. And meet new programmer friends. Check out my blog post on the Global Game Jam to learn more.

Ready for Coffee and Code?

I’d like to help you get started. If you want to learn more about programming for visual designers contact me and let’s set up a coffee meeting. Aloha! Happy Processing!

Author: David Neely

Professional Software Developer. Technology and Web Coordinator at the University of Hawaii's Manoa Career Center.