diff --git a/docs/sketch.js b/docs/sketch.js index a485146..fe40f0a 100644 --- a/docs/sketch.js +++ b/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);