var strokeWIDTH = 2;

var colorPalette = ['red','orange','yellow','lime','blue','purple',

                    'pink','cyan','maroon','green','black','white'];

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

var palettes = [];

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

var pHeight;

​

function setup() { 

  createCanvas(windowWidth, windowHeight);

  background(150);

  // drawing canvas

  strokeWeight(0);

  fill('khaki');

  rect(100,0,windowWidth, windowHeight);

    // color pallete

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

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

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

      var x = 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);

    }

  }

  // new canvas button

  strokeWeight(1);

  stroke(80);

  rect(7,pHeight+70,86,30);

  fill(0);

  strokeWeight(0);

  noStroke();

  textStyle(BOLD);

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

}

​

// 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() {

  if(mouseIsPressed && mouseX<100) {

    // check if user is clicking on a color palette

    var a;

    for(var i = 0; i < 8; 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>8 && mouseX<92 && mouseY>pHeight+70 && mouseY<pHeight+100) {

      fill('khaki');

      strokeWeight(0);

      rectMode(CORNER);

          rect(100,0,windowWidth, windowHeight);

    }

  }

  // display current brush color and size

  rectMode(CENTER);

  strokeWeight(0);

  fill(150);

  rect(50,pHeight+20,50,50);

  strokeWeight(1);

  stroke(strokeColor);

  fill(strokeColor);

  ellipse(50,pHeight+20,strokeWIDTH);

  // set stroke and strokeWeight to user settings

  stroke(strokeColor);

  strokeWeight(strokeWIDTH);

    if(mouseIsPressed && mouseX>100 && pmouseX>100) {

    line(mouseX,mouseY,pmouseX,pmouseY)

  }

}

​

​

// 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;

  } 

}

​