Make instructions clearer

docs/sketch.js

@@ -1,5 +1,5 @@
 let redSlider, greenSlider, blueSlider;
-let brushSize = 2;
+let brushSize = 0;
 
 function setup() {
   createCanvas(600, 600);
@@ -17,17 +17,19 @@ function setup() {
   //text instructions
   fill(100);
   textSize(14);
-  text(`Press 's' or 'm' or 'l' for small, medium, or large brush size`,20,30);
-  text(`Eraser: press 'e'`, 20, 50);
-  text(`Clear canvas: press 'c'`, 20, 70);
+  text(`To start drawing:\n Press 's' or 'm' or 'l' to select brush size, and then click the mouse`,20,30);
+  text(`To erase: press 'e' and then click the mouse`, 20, 70);
+  text(`To clear canvas: press 'c' and then reselect your brush size`, 20, 90);
+  fill(255);
+  text(`Select your colour here:`,420,15);
 
   //create sliders for red, green and green color:
   redSlider = createSlider(0,255,127);
-  redSlider.position(600,0);
+  redSlider.position(600,20);
   redSlider.size(100);
 
   greenSlider = createSlider(0,255,127);
-  greenSlider.position(600,40);
+  greenSlider.position(600,50);
   greenSlider.size(100);
 
   blueSlider = createSlider(0,255,127);
@@ -39,11 +41,11 @@ function setup() {
 
   fill(255,0,0);
   textSize(15);
-  text(`red:`,550,15);
+  text(`red:`,550,35);
 
   fill(0,255,0);
   textSize(15);
-  text(`green:`,550,55);
+  text(`green:`,550,65);
 
   fill(0,0,255);
   textSize(15);
@@ -59,6 +61,7 @@ function draw() {
     } 
   } else if (key == 'c'){
     clearCanvas();
+    drawLine();
   } 
 }
 
@@ -77,7 +80,7 @@ function keyPressed(){
 function drawCircle(){
     noStroke();
     fill(242, 234, 191); //match the background colour
-    circle(mouseX, mouseY,50); 
+    circle(mouseX, mouseY,30); 
 }
 
 function colour(){
@@ -104,20 +107,22 @@ function clearCanvas(){
   //text instructions
   fill(100);
   textSize(14);
-  text(`Press 's' or 'm' or 'l' for small, medium, or large brush size`,20,30);
-  text(`Eraser: press 'e'`, 20, 50);
-  text(`Clear canvas: press 'c'`, 20, 70);
+  text(`To start drawing:\n Press 's' or 'm' or 'l' to select brush size, and then click the mouse`,20,30);
+  text(`To erase: press 'e' and then click the mouse`, 20, 70);
+  text(`To clear canvas: press 'c' and then reselect your brush size`, 20, 90);
+  fill(255);
+  text(`Select your colour here:`,420,15);
 
   //add labels to sliders
   noStroke();
 
   fill(255,0,0);
   textSize(15);
-  text(`red:`,550,15);
+  text(`red:`,550,35);
 
   fill(0,255,0);
   textSize(15);
-  text(`green:`,550,55);
+  text(`green:`,550,65);
 
   fill(0,0,255);
   textSize(15);