100 lines
2.6 KiB
Markdown
100 lines
2.6 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 pressed then "Hi Karin!" is printed on the console
|
|
* When key 's' is pressed then "Hi Sigrid!" is printed on the console
|
|
* When key 'n' is pressed then "Hi Nanna!" is printed on the console
|
|
* When key 'm' is pressed then "Hi Maaike!" is printed on the console
|
|
|
|
2. Modify sketch 2.0 so that:
|
|
* Every time key 'x' is pressed 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 < 4; 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 the 3 statements
|
|
```
|
|
-> "let i = 0" is the declaration and initialisation of the control variable (i)
|
|
-> "i < X" is the continuation condition (i.e. if the condition is true, then executed the statement in the loop > do_something();, exit the loop when it is false)
|
|
-> "i++" is the incremental/update statement that is executed at the end of the loop (i.e. after the statement in the loop as been executed)
|
|
```
|
|
|
|
|