Processing Symbols

Programming = rule-based processing of symbols

The symbols we deal with in a higher programming language are numbers and characters. Programming means to perform actions on and with this symbols:

on = symbols are operands (data)
with = symbols are operators (instructions)

That’s what’s called executable text: the code contains instructions, which are performed when we execute it. A lot of the instructions (operations) are performed on the code itself and define/ alter the program flow.

Variables

Variables are a very essential element of programming. We can store and access data in variables and also change this values over time, thus variables are placeholders for different possible values (data).

/* Code from the chapter Hello World without variables. */
void setup() {
  size(800, 500);
}

void draw() {
  background(map(mouseX, 0, width, 0, 255));
}
/* Code from the chapter Hello World with a variable. */
void setup() {
  size(800, 500);
}

void draw() {
  // Store a color value (between 0 and 255) inside the variable called c.
  float c = map(mouseX, 0, width, 0, 255);
  // Set the value of c as background color.
  background(c);
}

In order to use a variable we have to initiate it. For that we need a name (of our choice), which will internally point to a place in the memory of the executing machine. At this place some space is allocated and we can put data into it (assign it to the variable).

You can imagine the name of a variable as an address and the value stored inside it as the data behind that address. (As your name is kind of a mapping and address to you.)

In the outside world (our canvas in action), nothing has changed in comparison to the previous code. There is not only one possible code to perform a task, instead it’s to some point up to you.

Mattis Kuhn: sketch_150709b (2015)

Project page

Mattis Kuhn: sketch_150709b (2015)


Mattis Kuhn: sketch_150709b (2015)


Syntax and Keywords

The main restriction when writing code comes with the syntax of the language and the reserved keywords. Code is executed statement by statement = line by line. Furthermore we can group several lines of code into a block. All statements inside a block are executed together (of course line by line). In Java statements are separated by ; and a block of code is constrained through {}.

We could write the whole code in one line

void setup(){size(800, 500);}void draw(){float c = map(mouseX, 0, width, 0, 255);background(c);}

but for (human) readability it’s separated by line breaks and tabs.

In the example above the block of code inside setup() is executed once, everything inside draw() is executed line by line for every frame in our runtime.

void setup() {
  /* A block of code
  executed line
  by line
  on start. */
}

void draw() {
  /* A block of code
  executed line
  by line
  for every frame
  during the runtime. */
}

Each language comes with reserved keywords. These are words that have a meaning for the language. Everything apart from your own variable names and your data are keywords and syntax characters. Keywords are easy recognizable through syntax highlighting in your code editor.

Data types

Basic data types in common programming languages are float, int and char/ str.

float

float reference

float a = 4.3;
float b = -0.004;
float c = a * b;
println(c); 
// -0.017200002

int

int reference

void setup() {
  size(800, 500);
  textSize(32);
  fill(10);
}

void draw() {
  background(color(255, 250, 170));
  float x_float = mouseX;
  int x_int = int(x_float);
  text("float:"+ x_float, 200, 200);
  text("int:" + x_int, 200, 300);
}

char/ String

char stores only one character/ symbol, so it’s more likely to work with String, which stores text.

String reference

char single_character = 'H';
println(single_character);
String text = "Hello, World!";
println(text);

color

A specific data type of Processing is color.

color reference

void setup() {
  size(800, 500);
}

void draw() {
  // Cast the float to int before assigning it to a variable of type color.
  color c = int(map(mouseX, 0, width, 0, 255));
  background(c);
}

Variables are on the one hand useful to write more readable code:

/* with variable*/
  color c = int(map(mouseX, 0, width, 0, 255));
  background(c);
/*without variable*/
  background(map(mouseX, 0, width, 0, 255));

But the more powerful aspect is their reusability. We can use them not just once, but everywhere inside our program (where they are accessible, more on that later):

void setup() {
  size(800, 500);
}

void draw() {
  // Assign the mapped mouse position to a color variable.
  color c = int(map(mouseX, 0, width, 0, 255));
  // Set the background with that color.
  background(c);
  // Use that (color) value again, this time as the width and height
  // of an ellipse (which is slightly confusing).
  ellipse(mouseX, mouseY, c, c);
}

For readability and avoiding confusion it’s a good practice to give useful (and simple) names to variables and to use a variable of type color only for color and no other values.

void setup() {
  size(1200, 600);
}

void draw() {
  float x = mouseX;
  float y = mouseY;
  float radius = x + y;
  circle(x, y, radius); 
}

variables


variables

void setup() {
  size(800, 500);
  noStroke();
}

void draw() {
  // Cast the float to int before assigning it to a variable of type color.
  color c = int(map(mouseX, 0, width, 0, 255));
  background(c);
  // Invert c.
  c = int(map(c, 0, 255, 255, 0));
  fill(c);
  // Use color value also as radius.
  circle(mouseX, mouseY, c);
}

Scope

We’ve already seen that the variable c is available everywhere inside the draw() block. But we can’t access it outside of this block.

In opposition to this local variables global variables exist which can be accessed and modified everywhere inside the program. An example we’ve already used are the global variables width and height which are initiated and assigned automatically (100 by default, which will be overridden when the function size() is called.

A custom global variable can be defined outside of other code blocks:

int counter = 0; // global variable

void setup() {
  size(400, 600);
}

void draw() {
  circle(width/2, height/2, counter);
  counter += 1;
}

scope

int count_up = 0;
int count_down = 400;

void setup() {
  size(400, 600);
  noStroke();
}

void draw() {
  background(222);
  fill(170, 172, 204, 150);
  circle(width/2, height/2, count_up);
  count_up += 1;
  
  fill(250, 191, 171, 100);
  circle(width/2, height/2, count_down);
  count_down -= 2;
}

scope_counter_updown

For-Loop

for (int i = 0; i <= 10; i++) {
  println(i);
}
/* Output:
0
1
2
3
4
5
6
7
8
9
10
/*

/* Draw vertical lines */
void setup() {
  size(800, 600);
  background(250);
  
  for (int i = 0; i < width; i += 40) {
    line(i, 0, i, height);
  }
}

/* Draw a grid */
void setup() {
  size(800, 600);
  background(250);
  
  for (int x = 0; x < width; x += 40) {
    line(x, 0, x, height);
  }
  
  for (int y = 0; y < height; y += 30) {
    line(0, y, width, y);
  }
}

grid


/* Draw 3 objects of
- random color
- random position
- random size
with a for-loop. */

void setup() {
  size(800, 600);
  background(250);
  noStroke();
  
  int max_rect_width = 400;
  int max_rect_height = 300;
  
  for (int i = 0; i <= 2; i++) {
    fill(random(0, 255), random(0, 255), random(0, 255), random(0, 255));
    
    rect(random(0, width-max_rect_width), random(0, height-max_rect_height), 
        random(0, max_rect_width), random(0, max_rect_height));
  }
}

Instructions (processing symbols)

Instructions = programs written with symbols, which should be executed by humans or machines.

The meaning of the symbols/ code evolves through action.


Bonuspunkte (Rewe))


La Monte Young: Composition 1960 #10 to Bob Morris

Wikipedia

La Monte Young: Composition 1960 #10 for Bob Morris


Johannes Kreidler: Sheet Music (2013-)

Project page

Johannes Kreidler: Sheet Music (2013-)


Johannes Kreidler: Sheet Music (2013-)


Johannes Kreidler: Sheet Music (2013-)


Gregor Weichbrodt: BÆBEL (2015)

Project page

Gregor Weichbrodt: BÆBEL (2015)


Single pages from IKEA furniture-assembly instructions were mixed together and renumbered. The result is an instructions manual of about 700 pages. (Artist’s website)

“BÆBEL’s name suggests both staggering ambition – and if you followed its instructions, and assembled all IKEA furniture into a single fixture, what could that be but a tower to god? – and its promise of universal comprehension: IKEA’s power is predicated on communicating across languages, which is why its manuals eschew words entirely for these severe and elegant images.” ( Julia Pelta Feldman)