# 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)**.
```java
/* Code from the chapter Hello World without variables. */
void setup() {
size(800, 500);
}
void draw() {
background(map(mouseX, 0, width, 0, 255));
}
```
```java
/* 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](https://mattiskuhn.com/en/work/sketch-150709b)
```{margin}
Mattis Kuhn: sketch_150709b (2015)
Video, software (processing), 12:15
```
![Mattis Kuhn: sketch_150709b (2015)](img/MattisKuhn-sketch-150709b-1.jpg)
```{margin}
Mattis Kuhn: sketch_150709b (2015)
Video, software (processing), 12:15
```
![Mattis Kuhn: sketch_150709b (2015)](img/MattisKuhn-sketch-150709b-3.jpg)
## 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
```java
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.
```java
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](https://processing.org/reference/float.html)
```java
float a = 4.3;
float b = -0.004;
float c = a * b;
println(c);
// -0.017200002
```
### int
[int reference](https://processing.org/reference/int.html)
```java
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](https://processing.org/reference/String.html)
```java
char single_character = 'H';
println(single_character);
String text = "Hello, World!";
println(text);
```
### color
A specific data type of Processing is `color`.
[color reference](https://processing.org/reference/color_datatype.html)
```java
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:
```javascript
/* 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):
```java
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.
```java
void setup() {
size(1200, 600);
}
void draw() {
float x = mouseX;
float y = mouseY;
float radius = x + y;
circle(x, y, radius);
}
```
![variables](img/variables.png)
![variables](img/variables_invert.png)
```java
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:
```java
int counter = 0; // global variable
void setup() {
size(400, 600);
}
void draw() {
circle(width/2, height/2, counter);
counter += 1;
}
```
![scope](img/scope.png)
```java
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](img/scope_counter_updown.png)
## For-Loop
```java
for (int i = 0; i <= 10; i++) {
println(i);
}
/* Output:
0
1
2
3
4
5
6
7
8
9
10
/*
```
```java
/* Draw vertical lines */
void setup() {
size(800, 600);
background(250);
for (int i = 0; i < width; i += 40) {
line(i, 0, i, height);
}
}
```
```java
/* 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](img/grid.png)
```java
/* 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.
```{margin}
Bonuspunkte
(Rewe)
```
![Bonuspunkte (Rewe))](img/Mapping_Supermarkt.jpg)
### La Monte Young: Composition 1960 #10 to Bob Morris
[Wikipedia](https://en.wikipedia.org/wiki/Compositions_1960)
```{margin}
La Monte Young: Composition 1960 #10 to Bob Morris
[Image source](https://www.fondazionebonotto.org/it/collection/fluxus/younglamonte/2121.html)
```
![La Monte Young: Composition 1960 #10 for Bob Morris](img/LaMonteYoung_Compositions_10.jpg)
### Johannes Kreidler: Sheet Music (2013-)
[Project page](http://www.sheetmusic-kreidler.com/leinwaende/)
```{margin}
Johannes Kreidler: Sheet Music (2013-)
Overview
[Image source](http://www.sheetmusic-kreidler.com/leinwaende/)
```
![Johannes Kreidler: Sheet Music (2013-)](img/JohannesKreidler_Sheetmusic_Overview.jpg)
```{margin}
Johannes Kreidler: Sheet Music (2013-)
The Last Supper
[Image source](http://www.sheetmusic-kreidler.com/leinwaende/)
```
![Johannes Kreidler: Sheet Music (2013-)](img/JohannesKreidler_Sheetmusic_The-last-supper.gif)
```{margin}
Johannes Kreidler: Sheet Music (2013-)
German Police
[Image source](http://www.sheetmusic-kreidler.com/leinwaende/)
```
![Johannes Kreidler: Sheet Music (2013-)](img/JohannesKreidler_Sheetmusic_german-police.gif)
### Gregor Weichbrodt: BÆBEL (2015)
[Project page](https://gregorweichbrodt.de/project/baebel.html)
```{margin}
Gregor Weichbrodt: BÆBEL (2015)
685 pages
```
![Gregor Weichbrodt: BÆBEL (2015)](img/GregorWeichbrodt_Baebel_34+35.jpg)
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)