# 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!"](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program) program.
[Processing](https://processing.org/) is a language (environment) focusing on visual art, so their equivalent to the written "Hello, World!" is
```java
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.
![](img/hello_world.png)
[Processing reference for line()](https://processing.org/reference/line_.html)
## 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).
![](img/coordinates.png)
```java
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.
[Processing tutorial about coordinates and shapes.](https://processing.org/tutorials/coordinatesystemandshapes)
## Clock
[Processing Example: Clock](https://processing.org/examples/clock.html)
![clock](img/clock.png)
## Human-Machine-Interaction
![](img/mapping_mouse_demo.jpg)
The picture shows [Douglas Engelbart](https://www.dougengelbart.org/)'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](https://www.youtube.com/watch?v=M5PgQS3ZBWA).
```java
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.
```java
/* 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);
}
```
```java
/* 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.
[Neo Layout (DE)](https://neo-layout.org/)
[Workman Layout](https://workmanlayout.org/)
[Arensito Layout](https://www.pvv.ntnu.no/~hakonhal/main.cgi/keyboard)
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.
```java
void setup() {
size(800, 500);
}
void draw() {
background(map(mouseX, 0, width, 0, 255));
}
```