exercises and defaults

1.Basics.md

@@ -23,11 +23,11 @@
 // This is a comment
 
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 800);
 }
 
 function draw() {
-  background(220);
+  background("yellow");
   print("Hello World");          // see the console below ↓
 }
 ```
@@ -44,28 +44,33 @@ function draw() {
 // Key Events!
 
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 800);
 }
 
 function draw() {
-  background(220);
+  background("yellow");
   // Only when keyIsPressed? 
   print("Hello World");
 }
 
 // Reference: https://p5js.org/reference/
 ```
+
+### 📚 Exercise
+
+1. Modify the sketch 1.0 so that "Hello World" is printed only when a key is pressed. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/). 
+
 ## Sketch: 1.1 Mouse Events
 
 ```javascript
 // Mouse Events!
 
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 800);
 }
 
 function draw() {
-  background(220);
+  background("yellow");
   if(mouseIsPressed) {
     print("Pressed: " + mouseX + " - " + mouseY) ;          // see the console below ↓  
   }
@@ -78,6 +83,11 @@ function mouseMoved() {
 
 // Reference: https://p5js.org/reference/
 ```
+### 📚 Exercises
+
+1. Modify sketch 1.1 so that a circle is draw on the screen at the location where the mouse is each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/). 
+
+2. What do you observe with the circle being drawn on the screen? Can you modify the sketch so that a trace of the movement on the mouse stay on the screen and erase this trace when the mouse is pressed?
 
 ## 🤔 What are (x,y) coordinates (in p5js)?
 
@@ -94,11 +104,11 @@ var previous_mouseX_pressed = 0;  // global "var" variable
 var previous_mouseY_pressed = 0;  // global "var" variable
 
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 800);
 }
 
 function draw() {
-  // background(220);
+  // background("yellow");
   if(mouseIsPressed) {
     let current_mouseX_pressed = mouseX;  // local "let" variable valid within "{" brackets "}"
     let current_mouseY_pressed = mouseY;  // local "let" variable valid within "{" brackets "}"
@@ -118,6 +128,12 @@ function mouseMoved() {
 // Reference: https://p5js.org/reference/
 ```
 
+### 📚 Exercises
+
+1. Modify sketch 1.2 so that a line is drawn between the location of current mouse press and the previous location. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/). 
+
+2. Modify the sketch further and try erasing what is drawn each time a key is pressed. 
+
 ### Sketch: 1.3 Distance and Text
 
 ```javascript
@@ -128,11 +144,11 @@ var previous_mouseY_pressed = 0;
 var distance_previous_current = 0;  
 
 function setup() {
-  createCanvas(400, 400);        
+  createCanvas(800, 800);        
 }
 
 function draw() {
-  background(220);
+  background("yellow");
   
   distance_previous_current = dist(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY);    // calculate distance
   
@@ -156,6 +172,13 @@ function draw() {
 // Reference: https://p5js.org/reference/
 ```
 
+### 📚 Exercise
+
+1. Modify sketch 1.3 so that:
+  * if the calculated distance between the previous and current mouse pressed locations is less than 300 then display "🍕" as text at the current mouse location and "PIZZA" at the previous
+  * if the calculated distance between the previous and current mouse pressed locations is less than 600 then display "🍍" as text at the current mouse location and "ANANAS" at the previous
+  * Otherwise display "😵‍💫" as text at the current mouse location and "WOOOOO" at the previous
+
 ## 🤔 What are conditional statements (i.e. if-statements)?
 
 ```javascript