random

2.Ghost-Writing.md

@@ -104,7 +104,7 @@ i++
 
 ### 📚 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:
+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:
 
 ```
 Karin likes to play piano 
@@ -121,5 +121,95 @@ Nanna likes to play chess
 (etc.)
 ```
 
+## Sketch: 2.2 Array + Index + Randomness
 
+Randomness in p5js is based on generating a random number between 0 and a specified maximum. 
+
+Typically a random number is produced with the following statement: 
+```javascript
+random(X); // picks a random number between 0 and X
+````
+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.
+
+The first problem we have to solve is that random gives a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" numbers (5, 2, 7, etc.). 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 "Math.floor: function:
+
+```javascript
+let random_number = Math.floor(random(10)); // assign a random integer number between 0 and 10 to variable random_number
+````
+
+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"];
+
+let random_index_names = Math.floor(random(NAMES.length));
+
+print(NAMES[random_index_names]);
+````
+
+This will indeed print a random name in the array NAMES each time it is executed. 
+
+But what if we would like to print a random activity from the ACTIVITIES array as well? 
+
+```javascript
+var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
+var ACTIVITIES = ["piano", "tennis", "chess", "records"];
+
+let random_index_names = Math.floor(random(NAMES.length));
+let random_index_activities = Math.floor(random(ACTIVITIES.length));
+
+print(NAMES[random_index_names] + " likes to play " +  ACTIVITIES[random_index_activities]);
+````
+
+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!
+
+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) {
+	let random_index = Math.floor(random(array_to_choose_from.length));
+	return array_to_choose_from[random_index];
+}
+````
+
+```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) {
+	let random_index = Math.floor(random(array_to_choose_from.length));
+	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/
+````