# Ghost Writing: Text, Arrays, Randomness

<p align="center">
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/love-letter.png" alt="autopilot creativity" width="80%"/>	
</p>

## Sketch: 2.0 Array + Index

```javascript
// Array + Index!

var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
var INDEX = 0;
    
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function keyTyped() {
  if(key == 'x') {
    print("Hi " + NAMES[0] + "!");
  }
}

// Reference: https://p5js.org/reference/
```

### 🤔 What are indices?

```javascript
 ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaikke"]  <--- Array (var NAMES)
     |        |         |        |         |        |
     0        1         2        3         4        5		<--- indices (var INDEX)
```

### 📚 Exercice

1. Modify sketch 2.0 so that:
* When key 'k' is typed then "Hi Karin!" is printed on the console
* When key 's' is typed then "Hi Sigrid!" is printed on the console
* When key 'n' is typed then "Hi Nanna!" is printed on the console
* When key 'm' is typed then "Hi Maaike!" is printed on the console

2. Modify sketch 2.0 so that:
* Every time key 'x' is typed then print the name of the following person in the array ("Hi David!", "Hi Karin!", "Hi Sigrid!", and so forth)

### 🤔 Who/what is "undefined"?

<p align="center">
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/undefined.png">	
</p>

## Sketch: 2.1 Array + Index + Loop

```javascript
// Array + Index + Loop!

var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
var ACTIVITIES = ["piano", "tennis", "chess", "records"];
var INDEX = 0;
    
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function keyTyped() {
  if(key == 'x') {
    for(let i = 0; i < ACTIVITIES.length; i++) {
      print(NAMES[INDEX] + " likes to play " + ACTIVITIES[i]);  
    }
  }
}

// Reference: https://p5js.org/reference/
```

### 🤔 How do for-loops work?

```javascript
for(let i = 0; i < X; i++) {
  // do_somethings();
}
```
where

```javascript
let i = 0 
// is the declaration and initialisation of the control variable (i)

i < X 
//is the loop continuation condition: if the condition is true, the statement in the loop [do_something();] is executed, otherwise exit the loop when the condition is false

i++
//is the incremental (update) statement that is executed at the end of the loop (i.e. just after the loop statement [do_something();] as been executed) 
```

### 📚 Exercice

1. Modify skecth 2.1 so that every one listed in the NAMES array have all the activities listed in the ACTIVITIES array be printed out on the console when key 'x' is typed. The console output should look something like:

```
Karin likes to play piano 
Karin likes to play tennis 
Karin likes to play chess 
Karin likes to play records 
Sigrid likes to play piano 
Sigrid likes to play tennis 
Sigrid likes to play chess 
Sigrid likes to play records 
Nanna likes to play piano 
Nanna likes to play tennis 
Nanna likes to play chess 
(etc.)
```