let slider, clearButton;

function setup(){
    createCanvas(windowWidth-20,windowHeight-20);
    background(200);

    slider = createSlider(1,50,1);
    slider.position(10,15);
    slider.style('width', '80px');

    clearButton = createButton('Clear');
    clearButton.position(width - 50, 10);
    clearButton.mousePressed(clearBoard)

    
}

function draw(){
    let val = slider.value();

    fill(240);
    strokeWeight(0);
    rect(0,0,width,60);
        
    fill(0);
    text(val, 100, 22.5);

    //colors
    fill(255,0,0);
    rect(120,5,50,50);

    fill(0,255,0);
    rect(170,5,50,50);

    fill(0,0,255);
    rect(220,5,50,50);

    fill(255,255,0);
    rect(270,5,50,50);

    fill(0);
    rect(320,5,50,50);

    fill(255);
    rect(370,5,50,50);

    if (mouseIsPressed === true) {
        if(mouseY <= 50){
            //not on whiteboard

            switch(true){
                case (mouseX > 120 && mouseX < 170):
                    stroke(255,0,0)
                    break;
                case (mouseX > 170 && mouseX < 220):
                    stroke(0,255,0)
                    break;
                case (mouseX > 220 && mouseX < 270):
                    stroke(0,0,255)
                    break;
                case (mouseX > 270 && mouseX < 320):
                    stroke(255,255,0)
                    break;
                case (mouseX > 320 && mouseX < 370):
                    stroke(0,0,0)
                    break;
                case (mouseX > 370 && mouseX < 420):
                    stroke(200)
                    break;
            }

        } else {
            //onwhiteboard
            strokeWeight(val);
            line(mouseX, mouseY, pmouseX, pmouseY);
        }
    }
}

function clearBoard(){
    background(200);
}