Revisiting-Concepts-Notatio.../2.Ghost-Writing.md

253 lines
8.7 KiB
Markdown
Raw Normal View History

2023-01-15 11:13:49 +01:00
# Ghost Writing: Text, Arrays, Randomness
2023-01-15 11:17:06 +01:00
<p align="center">
2023-01-15 14:23:32 +01:00
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/love-letter.png" width="80%"/>
2023-01-15 11:17:06 +01:00
</p>
2023-01-15 11:32:42 +01:00
## Sketch: 2.0 Array + Index
2023-01-15 11:13:49 +01:00
```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/
```
2023-01-15 11:32:42 +01:00
### 🤔 What are indices?
2023-01-15 11:13:49 +01:00
```javascript
["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaikke"] <--- Array (var NAMES)
| | | | | |
0 1 2 3 4 5 <--- indices (var INDEX)
2023-01-15 11:32:42 +01:00
```
2023-01-15 14:49:48 +01:00
### 📚 Exercise
2023-01-15 11:32:42 +01:00
1. Modify sketch 2.0 so that:
2023-01-15 14:21:11 +01:00
* 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
2023-01-15 11:32:42 +01:00
2. Modify sketch 2.0 so that:
2023-01-15 14:21:11 +01:00
* 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)
2023-01-15 11:40:47 +01:00
### 🤔 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>
2023-01-15 12:17:36 +01:00
## 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') {
2023-01-15 12:34:36 +01:00
for(let i = 0; i < ACTIVITIES.length; i++) {
2023-01-15 12:17:36 +01:00
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();
}
```
2023-01-15 12:21:11 +01:00
where
```javascript
let i = 0
2023-01-15 12:22:25 +01:00
// is the declaration and initialisation of the control variable (i)
2023-01-15 12:21:11 +01:00
i < X
2023-01-15 12:34:36 +01:00
//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
2023-01-15 12:22:25 +01:00
2023-01-15 12:21:11 +01:00
i++
2023-01-15 12:34:36 +01:00
//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)
2023-01-15 12:17:36 +01:00
```
2023-01-15 14:49:48 +01:00
### 📚 Exercise
2023-01-15 12:34:36 +01:00
2023-01-15 14:19:02 +01:00
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 (this is called a nested loop!). The console output should look something like:
2023-01-15 12:34:36 +01:00
```
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.)
```
2023-01-15 14:13:18 +01:00
## Sketch: 2.2 Array + Index + Randomness
2023-01-15 12:34:36 +01:00
2023-01-15 14:13:18 +01:00
Randomness in p5js is based on generating a random number between 0 and a specified maximum.
2023-01-15 14:19:02 +01:00
Typically a random number is produced with the ```random``` function:
2023-01-15 14:13:18 +01:00
```javascript
2023-01-15 14:19:02 +01:00
random(X); // generates a random number between 0 and X
2023-01-15 14:13:18 +01:00
````
Here is an example:
```javascript
let random_number = random(10); // assign a random number between 0 and 10 to variable random_number
````
Rudimentary indeed, but there are many things we can build with this simple function!
### 🤔 How to select a random element in an array?
Since we access elements of an array with indices, we can generate a random index between 0 and the length of an array so to select a random element in it.
2023-01-15 14:19:02 +01:00
The first problem we have to solve is that the ```random``` functions generates a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" numbers (5, 2, 7, etc.).
2023-01-15 15:44:40 +01:00
We thus need to round the "real" numbers produced by random (4.993319470244624 -> 5, 1.9486631456631776 -> 2, 7.1841821754535813 -> 7). We do this with the ```floor``` function:
2023-01-15 14:13:18 +01:00
```javascript
2023-01-15 15:44:40 +01:00
let random_number = floor(random(10)); // assign a random integer number between 0 and 10 to variable random_number
2023-01-15 14:13:18 +01:00
````
With this "fix" we can generate a random index (integer) between 0 and the length of a given array.
```javascript
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
2023-01-15 15:44:40 +01:00
let random_index_names = floor(random(NAMES.length));
2023-01-15 14:13:18 +01:00
print(NAMES[random_index_names]);
````
2023-01-15 14:19:02 +01:00
This will indeed print a random name in the array ```NAMES``` each time it is executed.
2023-01-15 14:13:18 +01:00
2023-01-15 14:19:02 +01:00
But what if we would like to print a random activity from the ```ACTIVITIES``` array as well?
2023-01-15 14:13:18 +01:00
```javascript
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
var ACTIVITIES = ["piano", "tennis", "chess", "records"];
2023-01-15 15:44:40 +01:00
let random_index_names = floor(random(NAMES.length));
let random_index_activities = floor(random(ACTIVITIES.length));
2023-01-15 14:13:18 +01:00
print(NAMES[random_index_names] + " likes to play " + ACTIVITIES[random_index_activities]);
````
2023-01-15 14:49:48 +01:00
This will work, but it is not "elegant"... We have here two variables (```random_index_names```, ```random_index_activities```) that are assigned a random value with the respective arrays' length (```NAMES.length```, ```ACTIVITIES.length```). What if we had many arrays? We would need as many variables as there are arrays to select from right? The code would be very long!
2023-01-15 14:13:18 +01:00
To remediate this tedious need to write too much code, how about writing a function that selects a random element from an "generic" array?
Here is an example of a custom "choice" function taking an array as input and returns a randomly selected elements from the array:
```javascript
// function selecting a random element from an array
function choice(array_to_choose_from) {
2023-01-15 15:44:40 +01:00
let random_index = floor(random(array_to_choose_from.length));
2023-01-15 14:13:18 +01:00
return array_to_choose_from[random_index];
}
````
2023-01-15 14:49:48 +01:00
2023-01-15 14:13:18 +01:00
```javascript
// Array + Index + Randomness!
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
var ACTIVITIES = ["piano", "tennis", "chess", "records"];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
// function selecting a random element from an array
function choice(array_to_choose_from) {
2023-01-15 15:44:40 +01:00
let random_index = floor(random(array_to_choose_from.length));
2023-01-15 14:13:18 +01:00
return array_to_choose_from[random_index];
}
function keyTyped() {
if(key == 'x') {
print(choice(NAMES) + " likes to play " + choice(ACTIVITIES) + " with " + choice(NAMES));
}
}
// Reference: https://p5js.org/reference/
````
2023-01-15 12:17:36 +01:00
2023-01-15 14:49:48 +01:00
### 📚 Exercise
1. Modify sketch 2.2 by adding a day of the week when an activity is taking place. For example:
```
David likes to play records with Karin on Tuesday
```
2. Come up with your own random sentences! Remember you can add as many arrays to select from as you want and most languages are structured "systems" having nouns, verb, adjectives, adverbs, etc. Here is what I came up with (can you guess what my code looks like?):
```
Laura wears a blue sweater when Sigrid plays tennis
Karin wears a black cap when Karin plays records
2023-01-15 15:44:40 +01:00
Laura wears a expensive scarf when Karin plays records
2023-01-15 14:49:48 +01:00
Karin wears a yellow jacket when Sigrid plays chess
2023-01-15 15:44:40 +01:00
David wears a ridiculous scarf when Sigrid plays records
2023-01-15 14:49:48 +01:00
Karin wears a black jacket when Maaike plays chess
```
2023-01-15 17:55:16 +01:00
## ✍️ Christopher Strachey's Love Letters
2023-01-15 15:44:40 +01:00
<p align="center">
2023-01-15 15:47:46 +01:00
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/Strachey-Mark1.png" width="100%"/>
2023-01-15 15:44:40 +01:00
</p>
2023-01-15 17:55:16 +01:00
So now that we have a better understanding of how arrays, indices, randomness, and functions work, let's write love letters!
One of the first non-scientific computer programme that was ever written is Christopher Strachey's Love Letters programme for the Manchester Mark I (so called [Baby](https://content.presspage.com/uploads/1369/1920_themanchestermk1computerbuiltbyextendingthebaby.jpg?10000)). In fact, this computer programme (making use of randomness) is arguably the first art-inspired programme! Christopher Strachey was a computer programming pioneer who worked along Alan Turing in the very early days of computing at the University of Manchester. Strachey's story is amazing and there is a great article about [him and the love letters in Rhizome's Queer History of Computing](https://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/) written by Jacob Gaboury.
2023-01-15 15:44:40 +01:00
2023-01-15 14:49:48 +01:00