Paint JS - OpenProcessing

mySketch
xxxxxxxxxx
 
var currentColor = '#000000'; // keep track of the color in use 
var brushSize = 20; // size of the paint brush
var currentShape = 1;
​
function setup() {
  createCanvas(windowWidth, windowHeight); // take the full real estate of the screen
  background(255);
  ellipseMode(RADIUS);
}
​
function draw() {
  loadSidebar();
  noStroke();
  if (mouseX > 50 && mouseX < width - 50) { // to avoid drawing on the sidebar
    if (mouseIsPressed) {
      fill(currentColor);
      drawShape();
    } 
  }
}
​
// Left sidebar to select colors
function mouseClicked() {
  if (mouseX <= 50 && mouseX >= 0 && mouseY < 50 && mouseY >= 0) // red color box
    currentColor = '#ff6961'; 
  else if (mouseX <= 50 && mouseX >= 0 && mouseY < 100 && mouseY >= 50) // green color box
    currentColor = '#77dd77'; 
  else if (mouseX <= 50 && mouseX >= 0 && mouseY < 150 && mouseY >= 100) // violet color box
    currentColor = '#57068c'; 
  else if (mouseX <= 50 && mouseX >= 0 && mouseY < 200 && mouseY >= 150) // white color box
    currentColor = '#ffffff'; 
  else if (mouseX <= 50 && mouseX >= 0 && mouseY < 250 && mouseY >= 200) // black color box
    currentColor = '#000000'; 
}
​
// when one of the keys is pressed
function keyPressed() {
  if (keyCode === UP_ARROW && brushSize < 99) // up arrow key to increase the brush size to a maximum of 100
    brushSize += 1;
  else if (keyCode === DOWN_ARROW && brushSize > 1) // down arrow key to reduce the brush size to a minimum of 1
    brushSize -= 1;
  else if (keyCode === 67)  // 67 is key code for 'c' key
    background(255);  // Clean the canvas
  else if (keyCode === 83) // 93 is key code for 's' key
    saveCanvas('Canvas.jpg'); // Saves the canvas
  else if (keyCode === 49) // 49 is key code for '1' key
    currentShape = 1; // Change shape to circle
  else if (keyCode === 50) // 50 is key code for '2' key
    currentShape = 2; // Change shape to square
}
​
// loading the sidebars
function loadSidebar() {
  stroke(0);
  
  // containers for sidebars
  fill('#ffffff');
  rect(0, 0, 50, height);
  rect(width-50, 0, 50, height);
  
  fill('#ff6961');  // red color 
  rect(0, 0, 50, 50);
  
  fill('#77dd77'); // green color
  rect(0, 50, 50, 50);
  
  fill('#57068c'); // violet color
  rect(0, 100, 50, 50);
  
  fill('#ffffff'); // white color
  rect(0, 150, 50, 50);
  
  fill('#000000'); // black color
  rect(0, 200, 50, 50);
  
  fill(currentColor); // show the current color
  rect(width - 50, 0, 50, 50);
  
  fill('#ffffff'); 
  rect(width - 50, 50, 50, 50);
  noStroke();
  fill('#000000');
  textSize(32);
  text(brushSize, width - 40, 85); // show the brush size
  
  fill('#ffffff'); 
  stroke('#000000');
  rect(width - 50, 100, 50, 50);
  fill(currentColor);
  noStroke();
  if (currentShape === 1) 
    ellipse(width - 25, 125, 15, 15); // shows if the current shape is circle
  else if (currentShape === 2)
    rect(width - 40, 110, 30, 30); // shows if the current shape is square
}
​
function drawShape() {
  if (currentShape === 1) 
    ellipse(mouseX, mouseY, brushSize, brushSize);
  else if (currentShape === 2) {
    push();
    rectMode(RADIUS);
    rect(mouseX, mouseY, brushSize, brushSize);
    pop();
  }
}