dist and text

1.Basics.md

@@ -115,4 +115,43 @@ function mouseMoved() {
   print("Moved: " + mouseX + " - " + mouseY) ;              // see the console below ↓  
 }
 
-// Reference: https://p5js.org/reference/```
+// Reference: https://p5js.org/reference/
+```
+
+### Sketch: Distance and Text
+
+```javascript
+// Distance and Text!
+
+var previous_mouseX_pressed = 0;    
+var previous_mouseY_pressed = 0;    
+var distance_previous_current = 0;  
+
+function setup() {
+  createCanvas(400, 400);        
+}
+
+function draw() {
+  background(220);
+  
+  distance_previous_current = dist(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY);    // calculate distance
+  
+  circle(previous_mouseX_pressed, previous_mouseY_pressed, 5);              // draw circle at the previous location
+  line(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY);   // draw line between previous and current
+  circle(mouseX, mouseY, 5);                                                // draw circle at the current location
+  
+  text(distance_previous_current, mouseX, mouseY);                          // write distance as text at the current location
+    
+  if(mouseIsPressed) {
+    let current_mouseX_pressed = mouseX;  
+    let current_mouseY_pressed = mouseY;  
+    
+    print("Pressed: " + current_mouseX_pressed + " - " + current_mouseY_pressed) ; 
+        
+    previous_mouseX_pressed = current_mouseX_pressed;
+    previous_mouseY_pressed = current_mouseY_pressed;
+  }
+}
+
+// Reference: https://p5js.org/reference/
+```