Adapted from grid template with coordinate display by Owen Roberts (Combined with a sketch feature)

*/

var u = 20; // one unit = 20 px

var strokeColor = 'black';

var strokeWIDTH = 2;

var colorPalette = ['red', 'orange', 'yellow', 'lime', 'blue', 'purple', 'pink', 'cyan', 'black', 'white'];

var cpRows = 5; // number of colors divided by 2

var palettes = [];

var d = 30; //diameter of color palette samples

var pHeight;

​

function setup() {

  createCanvas(windowWidth, windowHeight); // color pallete

  grid(); // grid with scale of 20 px

}

​

// Palette object will store information about color swatches

function Palette(x, y, c) {

  this.x = x;

  this.y = y;

  this.pColor = c;

  print("x = " + this.x + ", y = " + this.y + ", pColor = " + this.pColor);

}

​

function draw() {

  //back of coordinates

  fill(255);

  strokeWeight(2);

  rectMode(CORNER);

  rect(0, 0, 100, 30);

  fill(0);

  displayMousePosition();

​

  // display current brush color and size

  rectMode(CENTER);

  strokeWeight(0);

  fill(150);

  rect((width - 100) + 50, pHeight + 20, 60, 60);

  strokeWeight(1);

  stroke(strokeColor);

  fill(strokeColor);

  ellipse((width - 100) + 50, pHeight + 20, strokeWIDTH);

}

​

​

// use number keys to change the strokeWeight of the line

function keyTyped() {

  if (key === '1') {

    strokeWIDTH = 2;

  } else if (key === '2') {

    strokeWIDTH = 4;

  } else if (key === '3') {

    strokeWIDTH = 6;

  } else if (key === '4') {

    strokeWIDTH = 8;

  } else if (key === '5') {

    strokeWIDTH = 10;

  } else if (key === '6') {

    strokeWIDTH = 20;

  } else if (key === '7') {

    strokeWIDTH = 30;

  } else if (key === '8') {

    strokeWIDTH = 40;

  } else if (key === '9') {

    strokeWIDTH = 50;

  }

} //end of keyTyped()

​

function mouseClicked() {

  if (mouseX > width - 100) {

    // check if user is clicking on a color palette

    var a;

    for (var i = 0; i < 10; i++) {

      a = dist(palettes[i].x, palettes[i].y, mouseX, mouseY);

      if (a < d) {

        strokeColor = colorPalette[palettes[i].pColor];

        print("palette color = " + strokeColor);

      }

    }

    // check if user is clicking on New Canvas button

    if (mouseX > (width - 100) + 8 && mouseX < (width - 100) + 92 && mouseY > pHeight + 70 && mouseY < pHeight + 100) {

      grid();

    }

  }

}

​

function mouseDragged() {

  // set stroke and strokeWeight to user settings

  stroke(strokeColor);

  strokeWeight(strokeWIDTH);

  if (mouseX < width - 100) {

    line(mouseX, mouseY, pmouseX, pmouseY)

  }

}

​

function grid() {

  background(200);

  stroke(220);

  strokeWeight(1);

  for (let x = 0; x <= width; x += u) {

    for (let y = 0; y <= height; y += u) {

      line(x, 0, x, height);

      line(0, y, width, y);

    }

  }

  //Draw color palettes

  rectMode(CORNER);

  fill(150);

  rect(width - 100, 0, 100, height)

  for (var i = 0; i < 2; i++) {

    for (var j = 0; j < cpRows; j++) {

      var c = (i) + (j * 2);

      var x = (width - 100) + 30 + i * 40;

      var y = 30 + j * 40;

      fill(colorPalette[c]);

      ellipse(x, y, d);

      palettes.push(new Palette(x, y, c));

      pHeight = y + d;

      print(pHeight);

    }

  }

  //pen size info

  text("Use 1-9 to change the brush size", width-100+15, pHeight+110, 90, 200);

  // new canvas button

  strokeWeight(1);

  stroke(80);

  rect(width - 100 + 7, pHeight + 70, 86, 30);

  fill(0);

  strokeWeight(0);

  noStroke();

  textStyle(BOLD);

  text("NEW CANVAS", width - 100 + 10, pHeight + 90);

}

​

function displayMousePosition() {

  noStroke();

  text("(x:" + floor(mouseX) + ", y: " + floor(mouseY) + ")", 10, 20);

}