Hello World
Contents
Hello World¶
Mapping is a very basic cognitive method. Simple organisms (single-cell organisms) already developed a basic form of mapping: Through sensors they can perceive their environment and react on that information. The stimuli from outside change the inner state of the organism, which will react and thus change the environment. This relation between inside and outside the organism can be seen as a mapping.
The same sort of exchange between inside and outside is the subject of the famous “Hello, World!” program.
Processing is a language (environment) focusing on visual art, so their equivalent to the written “Hello, World!” is
line(15, 25, 70, 90);
When executed, we see the code (inside) on the one hand and the result in the world (outside) on the other hand.
Processing reference for line()
Mapping between code and output¶
Programming is typically a practice of stepwise approaching between desired output and real output. Write some code, execute it, analyse the results and modify the code (+ remove errors) until it produces the desired output (or an output even better than imagined).
Coordinate system¶
A coordinate system is another mapping. It’s also an invention, as nothing comparable existed in the world before. In computer graphics the zero position is in the top left corner. In a 2d-space commonly the first axis is the width/ x-position, the 2nd the height/ y-position (increasing from top to bottom).
void setup() {
// Lines which start with // are comments, so not executed as code.
// Create a canvas of 800px width and 500px height.
size(800, 500);
// Draw a line from the upper left corner to the center of the canvas.
line(0, 0, width/2, height/2);
// Draw a line from the center of the canvas to the upper right corner.
line(width/2, height/2, width, 0);
}
(Looks like an envelope. Icons = Mappings.)
Task: Draw some more lines or shapes with lines.
Human-Machine-Interaction¶
The picture shows Douglas Engelbart’s hand demonstrating the first computer mouse. We see a mapping of physical movements to numbers to virtual movements on a screen. Video on YouTube.
void setup() {
size(800, 500);
noStroke();
fill(102);
}
void draw() {
circle(mouseX, mouseY, 5);
}
Task: Insert comments into the code.
In Processing, setup() is called once at the beginning and initializes the program. Thus all code inside the {} of setup() will be executed once. On the other hand, draw() is called repeatedly (depending on the framerate) during the lifetime of the program. The code inside the {} is executed on every iteration of the loop.
/* Mouse movement with a dissapearing trace. */
void setup() {
size(800, 500);
noStroke();
}
void draw() {
fill(220, 50);
rect(0, 0, width, height);
fill(102);
ellipse(mouseX, mouseY, 16, 10);
}
/* Similar effect with the use of the previous
mouse position (pmouseX, pmouseY).
Source: https://processing.org/tutorials/interactivity
*/
void setup() {
size(800, 500);
strokeWeight(8);
}
void draw() {
background(204);
line(mouseX, mouseY, pmouseX, pmouseY);
}
In Engelbart’s view our intelligence relies on our tools and methods, which are artificial, consequently our human intelligence is already artificial:
“In a very real sense, the development of »artificial intelligence« has been going on for centuries.” (Engelbart, Douglas C. „Augmenting Human Intellect: A Conceptual Framework“.)
Excursion: Keyboard Layout¶
The common keyboard layout is QWERTY/Z. It was designed with the aim of creating large distances between common key pairings, in order to reduce typing errors. Nowadays a huge amount of keyboard layouts is being developed with the opposite aim: Reducing the distance between common keys (pairings) so that the necessary movement of the fingers is reduced.
The layouts map characters to positions in space. These positions map characteristics of characters into space, most obviously frequent characters are mapped to the home row. Furthermore, when using a keyboard we also develop a mental model (mapping) of that layout (backed by physical knowledge through movements).
Mapping between digital values¶
It’s very common (and very easy) to map some data to some other data in the digital world. The established relation can be somewhat arbitrary (and often is). We’ll see more of that in the next chapters.
A simple mapping function in Processing is map(), which performs a linear mapping between two ranges of numbers.
void setup() {
size(800, 500);
}
void draw() {
background(map(mouseX, 0, width, 0, 255));
}