126 lines
3.1 KiB
Markdown
126 lines
3.1 KiB
Markdown
# 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.)
|
|
```
|
|
|
|
|
|
|