EZ Paint

Mouse & keyboard inputs

Arrays & design strategy

User Guide

  • Hold down left mouse button to draw
  • Press C to change pen Color,   S to change pen Size (thickness)
  • Press B to set Background color,  E to erase to background color

Design Strategy

  • Define an array of colors
  • Change color by changing the index to the array
     
  • Define an array of pen sizes (thicknesses)
  • Change pen size by changing the index to the array
     
  • Define color constants, such as TEXT_COLOR, to be used multiple times

1. Define an Array of Colors

  • Define an array of colors for both the pen and the background
    • var < name> = [ ...comma separated values... ];
    • An array variable has a name like any other variables, and contains multiple values inside square brackets ("[" and "]")
    • name[index]  is the value at a specified index of array name
  • Define pen & background colors as indices of the color array (bgColorIndex & penColorIndex)
// --- Color options and current pen & background color
var colors = [
    color(255,255,255),  // white
    color(255, 0, 0),    // red
    color(0, 255, 0),    // green
    color(0, 0, 255),    // blue
    color(255, 255, 0),  // yellow
    color(255, 0, 255),  // pink
    color(0, 255, 255),  // aqua
    color(0, 0, 0)       // black
];

var bgColorIndex = 0;    // colors[0] = white
var penColorIndex = 1;   // colors[1] = red

References

2. Define Array of Pen Sizes

  • Define an array for the possible pen sizes (thicknesses)
  • Define sizeIndex as an index of the pen size array
// --- Pen size choices and current pen size
var penSizes = [ 2, 4, 8, 16 ];
var sizeIndex  = 1;

References

2. Define Array of Pen Sizes

  • Put the drawing code inside the draw() function
  • Draw only if [mouseIsPressed]
    • Call stroke() with the current pen color in the color array
    • Call strokeWeight() with the current pen size in the size array
    • Draw line from previous mouse position to current mouse position [See pmouseX, pmouseY] 
draw = function() { 
    if (mouseIsPressed) {
       stroke(_____);        // pen color
       strokeWeight(_____);  // pen size
       // draw line from PREVIOUS mouse location to CURRENT mouse location
       line(pmouseX, pmouseY, mouseX, mouseY);
    }
};

3. Next Index and Wrap Around

  • Define the function next (index, array)
    • input parameters: current index value, and the array
    • returns the next index value, and wrap around if at the end
// --- Provide next array index and wrap around
var next = function (index, array) {
    index += 1;
    if (index >= array.length) {
        index = 0;
    }
    return index;
};

4. Change Pen Color and Size

  • Put the drawing code inside the draw() function
  • Define the [keyPressed()] function to be called when a key is pressed
    • "C".charCodeAt() converts the string "C" into a numeric code for comparing with the input keyCode
    • If the key input matches, change the pen color to the next value in the color array by  calling next() 
keyPressed = function () {
    if (keyCode === "C".charCodeAt()) {          // change pen Color
        penColorIndex = next(penColorIndex, colors);
    } else if (keyCode === "S".charCodeAt()) {   // change pen Size
        sizeIndex = next(sizeIndex, penSizes);
    }
};

5. Change Background Color

  • Put the drawing code inside the draw() function
  • Add to the [keyPressed()] function checks for keycodes:
    • "B" - change the background color
    • "E"  - erase background to the specified color
keyPressed = function () {
    if (keyCode === "C".charCodeAt()) {          // change pen Color
        penColorIndex = next(penColorIndex, colors);
    } else if (keyCode === "S".charCodeAt()) {   // change pen Size
        sizeIndex = next(sizeIndex, penSizes);
    } else if (keyCode === "B".charCodeAt()) {   // change Background color
        bgColorIndex = next(bgColorIndex, colors);
    } else if (keyCode === "E".charCodeAt()) {   // erase to background color
        background(colors[bgColorIndex]);
    }  
};

6. Menu: Pen Size & Color

  • Define TEXT_COLOR constant to be re-used
  • Draw menu background, pen color, and pen size
  • Call menu() inside draw()
var menu = function () {
    var TEXT_COLOR = color(0, 43, 255);
    // menu background
    noStroke();
    fill(222, 247, 246);           // light blue
    rectMode(RADIUS);
    rect(width/2, 30, width/2, 30);
    // Pen color display
    fill(TEXT_COLOR);
    text("[C]olor", 10, 32);
    fill(______);                  // current pen color
    ellipseMode(RADIUS);
    ellipse(70, 30, 18, 18);
    // Pen Size display
    fill(TEXT_COLOR);
    text("[S]ize", 100, 32);
    fill(0, 0, 0);           // black
    rect(160, 28, 18, _____, 10);  // current pen size
}

draw = function() { 
    if (mouseIsPressed) { ... };
    menu();  // draw menu last, on top of everything else
};

7. Menu: Bkground & Pen Status

  • Add to function menu() code to display the background color
  • Also  display pen up/down status based on [ mouseIsPressed] 
var menu = function () {
    ... Pen color and pen size menu ...
    // Background menu display
    fill(TEXT_COLOR);
    text("[B]ackground", 200, 26);
    text("[E]rase BG", 200, 44);
    fill(colors[bgColorIndex]);  // background
    rect(300, 30, 18, 18);
    
    // Pen up/down status
    fill(TEXT_COLOR);
    if (mouseIsPressed) {
        text("DOWN", width-50, 32);   
    } else {
        text("UP", width-50, 32);
    }
};

Text

Exercise Name: EZ Paint

Made with Slides.com