​

function setup() {

  createCanvas(600, 600);

  background(220);

  drawTool = {

    type:"line",

    sw: 5,

    c: color(28, 87, 138),

    w: 5,

    h: 5

  }

  buttons = {

    c1: color(28, 87, 138),

    c2: color(94, 145, 189),

    c3: color(143, 240, 234),

    c4: color(242, 212, 205),

    c5: color(144, 70, 64)

  }

}

​

function draw() {

  fill(0)

  strokeWeight(0)

  text("CLICK:",20,28)

  text("PRESS:", 20, 375)

  text("q: Clear", 20, 390)

  text("w: Bigger", 20, 405)

  text("e: Smaller", 20, 420)

  text("s: save img", 20, 435)

  text("g: save gif\n(quick, draw!)", 20, 450)

  drawWithTool(drawTool)

  createClickableButton(20, 40, buttons.c1, drawTool)

  createClickableButton(20, 85, buttons.c2, drawTool)

  createClickableButton(20, 85+45, buttons.c3, drawTool)

  createClickableButton(20, 85+45+45, buttons.c4, drawTool)

  createClickableButton(20, 85+45+45+45, buttons.c5, drawTool)

  strokeWeight(1)

  stroke(0)

  line(60, 270, 30, 290)

  noFill()

  rect(35, 300, 20, 20)

  ellipse(45, 340, 20, 20)

  changeSize(drawTool)

}

​

function keyPressed(){

  if (key=='q'){

    background(220)

  }

  if(key == 's'){

    save("myCanvas.jpg")

  }

  if(key == 'g'){

    saveGif('mySketch', 5) //delay 3 seconds, record 5

  }

}

​

function mousePressed(){

  if(collidePointLine(mouseX, mouseY, 60, 270, 30, 290, 0.4)){

    drawTool.type = "line"

  }

  if(collidePointRect(mouseX, mouseY, 35, 300, 20, 20)){

    drawTool.type = "rect"

  }

  if(collidePointCircle(mouseX, mouseY, 45, 340, 20)){

    drawTool.type = "circ"

  }

}

​

function drawWithTool(drawTool){

  if (mouseIsPressed){

    if(drawTool.type == "line"){

      strokeWeight(drawTool.sw)

      stroke(drawTool.c)

      line(mouseX, mouseY, pmouseX, pmouseY)

    }

    else if(drawTool.type == "rect"){

      strokeWeight(0)

      fill(drawTool.c)

      rect(mouseX,mouseY,drawTool.w, drawTool.h)

    }

    else if(drawTool.type == "circ"){

      strokeWeight(0)

      fill(drawTool.c)

      ellipse(mouseX, mouseY, drawTool.w, drawTool.h)

    }

  }

}

​

function changeSize(drawTool){

  if (keyIsPressed){

    if((key=='w' && drawTool.sw < 50) || (key=='w' && drawTool.w < 50)){

      drawTool.sw += 1

      drawTool.w += 1

      drawTool.h += 1

    }

    if((key=='e' && drawTool.sw > 1) || (key=='e' && drawTool.w > 1)){

      drawTool.sw -= 1

      drawTool.w -= 1

      drawTool.h -=1

    }

  }

}

​

function createClickableButton(x, y, c, drawToolColor){

  strokeWeight(0)

  fill(c)

  rect(x, y, 40, 40)

  if(collidePointRect(mouseX, mouseY, x, y, 40, 40)){

    drawToolColor.c = c

  }

}