Get your textbook online or a free pdf (older version but close enough).

Getting Started with Processing
Casey Reas, Ben Fry
Second Edition, 2015
Maker Media
ISBN-13: 978-1457187087
ISBN-10: 1457187086

A Brief History of Computer Coding

The history of computing devices and the gizmos used to program them goes way, way, back..

Hardware

Automatons & Music Boxes

1206
Al-Jazari described programmable humanoid automata with a programmable drum to control a boat with automatic musicians.

1800 Video of an Automaton programmed with rotating disks

Contemporary Video of Arthur Ganson riffing on the same technique

1804 The Jacquard Loom was programmed to create complex patterns by using a "chain of cards."

Jacard Loom Programming Card

Late 1800s Player Pianos use paper scrolls with wholes punched in them to program a self-playing piano

Computing Machines & Code Breakers

Mid 1800's
Charles Babbage's Analytical Engine - Never built in his lifetime. The first general-purpose computer

William Gibson and Bruce Sterling wrote a classic Steam Punk scifi novel about what the world would be like if Babbage had succeeded in building his machine.

The Engine would have used punch cards like the Jacquard loom.

Lady Ada Lovelace (1815-1852) was the first person to figure out how to program the non-existent thing.

1943
Colossus Computer, invented to crack German cryptographic codes in WWII

By in large, these machines had fixed programs - they were minimally programmable—reprogramming them meant re-wiring them. The next generation of machines allowed for programming with (usually) punch-cards

Commercial Computers

1951 UNIVAC I (UNIVersal Automatic Computer I)

1953-1969IBM 650, or "Big Iron."
Coding done with punch-cards

1960s & 70s Mainframes rule the world of computing. Computer coding becomes a real thing.

1980s Personal Computing comes of age

Coding

Coding creates this

Types of Coding Languages

Coding languages break down into two major categories: Scripting and Compiled

Compiled Languages

Compiled languages require an intermediary step in order to do what they are intended to do. It has to be run through a process called "compiling" where it's fed through an application that turns it into an "executable" stand-alone application. That is, it will run as an application after it's been compiled. Examples of compiled applications include:

• Photoshop
• Google Chrome
• Garage Band
• Microsoft Word
• Apple Mail

Basically, every program you use on your computer or mobile device. Even programs like Processing!

Without a doubt, C++ is the most common compiled language used today, closely followed by Java.

Here's an example of some code written in C++:

#include<stdio.h>
#include<stdlib.h>
#include<string.h>
#include<unistd.h>
 
#define OK 0
#define MOVE_MADE 1
#define OUT_OF_RANGE 2
#define WINNER 3
#define EXIT 666
 
char player[] = {'O', 'X'};
char grid[3][3][2];
int computer = 0;
 
int wins[] = {0, 0, 0, 0, 0, 0, 0, 0}; 
 
void format_grid(){
  int x, y;
  char ch = '\0';
 
  for(x = 0, y = 0; x < 3; x++){
    while(y < 3){
      grid[x][y][0] = ' ';
      grid[x][y][1] = ch;
      y++;
    }
    y = 0;
  }
}

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

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

Processing

Thinking is more interesting than knowing, but less interesting than looking.

Johann Wolfgang Von Goethe

We tend to break down into different categories of thinking styles:

• Visual
• Kinesthetic
• Musical
• Mathematical
• Verbal

Artists and designers tend to be visual thinkers (duh!), while coders tend to be Mathematical. This has a lot to do with why so few classes in coding work for designers and artists. (Interesting fact: Research suggests that dyslexia is a symptom of a predominant visual/spatial learner.)

Why Processing

Processing is for people who think visually, not mathematically (although the best mathematicians do often think visually - Albert Einstein with his thought experiments and Micheal Faraday and his intuitions about electro-magnetism)

It makes it possible to get immediate visual results with just a line or two of code. Try that with JavaScript, Java or C++!

Let's Code!

You should install Processing on your own computer. Get it at: https://processing.org/download/

1. Start up the Processing application
2. In the application window, type:

PROCESSING

line(10, 80, 30, 40);

3. Click on the Run button in the upper left corner of the app window

4. Voila! You just ran your first Processing program!

5. Now let's extend that with this:

line(10, 80, 30, 40); // Left line
line(20, 80, 40, 40);
line(30, 80, 50, 40); // Middle line
line(40, 80, 60, 40);
line(50, 80, 70, 40); // Right line

6. Click on the Run button in the upper left corner of the app window

7. Let's extend it even more

background(0);        // Set the black background
stroke(255);          // Set line value to white
strokeWeight(5);      // Set line width to 5 pixels
line(10, 80, 30, 40); // Left line
line(20, 80, 40, 40);
line(30, 80, 50, 40); // Middle line
line(40, 80, 60, 40);
line(50, 80, 70, 40); // Right line

6. Click on the Run button in the upper left corner of the app window

Cool, huh?

Homework

In your textbook, Getting Started with Processing, read the preface and up to page 12. Wherever you see some code examples, type them out yourself and run them to see what happens.

Get a copy online or use this: getting_started_with_processing.pdf. But having the actual paper book is really handy for taking notes in the margins.

I'm basically going to have you type out every example in the book, so get used to it!