#7 - Processing Language

Processing is a very simple scripting language used to develop graphics.  In this post, I'll demonstrate a very simple and cool graphic that I developed in a little under an hour.

To begin, have a visit at http://processing.org/ and download the package for your platform.  Typically you don't need to install it and you can find an executable interface inside, where you can quickly begin your scripting and be on your merry way to graphical goodness.

A few tutorials will show that most programs should have a standard flow.  To begin with, let's setup the setup() function which will handle most needed initialization parameters and create the window for your graphic to be drawn onto.

void setup() {
  size(640, 480);
}

The next step is to setup the draw() function, which will continuously loop while the script is running, up until the window is closed.  Most drawing occurs with the use of primitives such as quadrilaterals or triangles, but there are more complex tools at the disposal of the more advanced Processing programmer.  I stuck with using quads the most, and built a space ship fighter by piecing together a ship hull, two wings, a gun on each wing, a nose cap, a thruster base, and the thruster flames.  (The image for my inspiration is from Star Wars: http://wallpapersus.com/wp-content/uploads/2012/09/Star-Wars-X-Wing-Fighter-Space-Ship.jpg)

Once the ship and its primitives were assigned coordinates, we give the shapes a fill color and an outline (stroke) color.  This is easily done with the stroke() and fill() commands prior to drawing any primitive.  Finally, to show the ship off in all its glory with a little more flair, we rotate the ship as though it were gliding in its hangar as though prancing down an outfitter's runway, using the rotate and translate commands (these are tricky).  But the secret is to translate the origin of the drawing panel to the center of your graphic, do the rotation, then translate the origin back to where it was.  The code all in all is as follows:

float angle;

float jitter;

void setup() {

  size(640, 480);
}
void draw() {
 
  color fire_engine_red = color(206, 32, 41);
  color chrome = color(225, 237, 207);
 
 
  fill(255);
 
  background(51);
  fill(chrome);
  stroke(0);
 
  // Angle for Ship Hangar Rotation
  jitter = 0.02;
  angle = angle + jitter;
 
  // Rotate the Ship in its Hangar
  translate(340,200);
  rotate(angle);
  translate(-340,-200);
  // Ship Hull
  quad(300,300, 380, 300, 345, 110, 335, 110);
 
  // Ship Left Wing
  quad(300,300, 210, 285, 220, 225, 310, 240);
 
  // Ship Right Wing
  quad(380,300, 470, 285, 460, 225, 370, 240);
 
  // Ship Rear Thruster Component
  quad(300,300, 380, 300, 380, 330, 300, 330);
 
  // Ship left Gun
  quad(220, 225, 238, 130, 242, 130, 240, 228);
 
  // Ship Right Gun
  quad(460, 225, 436, 130, 432, 130, 440, 228);
 
  // Ship Nose
  arc(340, 110, 10, 20, PI, TWO_PI);
 
  // Ship Thruster
  fill(fire_engine_red);
  arc(340, 330, 80, 120, 0, PI);
}