A3 - Gen­e­r­a­t­i­v­e Ske­t­c­h­p­a­d

by Paolo Dylim

Background

For this project, my goal was to create a sketchpad that would provide users the freedom to generate various patterns based on pre-set drawing tools. If users like their pattern, they could then save it and have it printed on things like a mobile device case.

alt text

Final Sketch (Preview)

  • Show Code
/* @peep sketch */
 
// Initialize Booleans
boolean drawing;
boolean redActive, blueActive, yellowActive;      // boolean to check active color
boolean purpleActive, greenActive, orangeActive;  // boolean to check active color
boolean brownActive, greyActive, blackActive;     // boolean to check active color
boolean red_c, blue_c, yellow_c;                  // custom color values for simplicity
boolean purple_c, green_c, orange_c;              // custom color values for simplicity 
boolean brown_c, grey_c, black_c;                 // custom color values for simplicity
boolean drawA, drawB, drawC;
 
// Global Controller
 
// Default Settings
color defaultFill = color(255);   // white
color defaultBG = color(250);     // offwhite
float margin = 10;
float tileSize = 25;              // size of each color tile
float brushOptSize = 40;
float orgnX = 10;                 // upper left corner of the first color tile (x)
float orgnY = 10;                 // upper left corner of the first color tile (y)
float dtX = 10;  
float dtY = 250;
 
 
// Color Tiles - Constructors: Color Value, x-Pos, y-Pos
/* Red    */  float[] red_c     =   { color(255,102,102) , orgnX                 , orgnY };
/* Blue   */  float[] blue_c    =   { color(51,153,255)  , orgnX + tileSize      , orgnY };
/* Yellow */  float[] yellow_c  =   { color(225,225,0)   , orgnX + tileSize * 2  , orgnY };
/* Purple */  float[] purple_c  =   { color(153,51,255)  , orgnX                 , orgnY + 25  };
/* Green  */  float[] green_c   =   { color(0,204,102)   , orgnX + tileSize      , orgnY + 25  };
/* Orange */  float[] orange_c  =   { color(255,153,51)  , orgnX + tileSize * 2  , orgnY + 25  };
/* Brown */   float[] brown_c   =   { color(151,103,82)  , orgnX                 , orgnY + 50  };
/* Grey  */   float[] grey_c    =   { color(160,160,160) , orgnX + tileSize      , orgnY + 50  };
/* Black */   float[] black_c   =   { color(64,64,64)    , orgnX + tileSize * 2  , orgnY + 50  };
 
// Drawing Tools - Constructors: xPos, yPos, minX, maxX, minY, maxY // sets the location where user can choose which drawing tool option
/* 1 */ float[] toolA = { dtX, dtY,                                 dtX,  dtX + brushOptSize, dtY,  dtY + brushOptSize                                    };
/* 2 */ float[] toolB = { dtX, dtY + brushOptSize + margin,         dtX,  dtX + brushOptSize, dtY,  (dtY + brushOptSize + margin + brushOptSize)          };
/* 3 */ float[] toolC = { dtX, dtY + ((brushOptSize + margin) * 2), dtX,  dtX + brushOptSize, dtY,  (dtY + ((brushOptSize + margin) * 2) + brushOptSize)  };
 
void setup() {
  size(500, 400);
  background(defaultBG);
}
 
void draw() {
  // test_cmd // println("Status is " + statusUpdate);
 
  // drawA = true;
  // drawB = true;
  // drawC = true;
 
  // VIEW
  drawPalette();
  drawBrushOptions();
 
  // CONTROLLER
  if (drawing == true) {
    // test_cmd // println("drawing is " + drawing); // make sure interaction is working properly
    fill(defaultBG); // default white fill value
 
    if  (redActive == true)     { stroke(red_c[0])    ; } // red
    if  (blueActive == true)    { stroke(blue_c[0])   ; } // blue
    if  (yellowActive == true)  { stroke(yellow_c[0]) ; } // yellow
    if  (purpleActive == true)  { stroke(purple_c[0]) ; } // purple
    if  (greenActive == true)   { stroke(green_c[0])  ; } // green
    if  (orangeActive == true)  { stroke(orange_c[0]) ; } // orange
    if  (brownActive == true)   { stroke(brown_c[0])  ; } // brown
    if  (greyActive == true)    { stroke(grey_c[0])   ; } // grey
    if  (blackActive == true)   { stroke(black_c[0])  ; } // black
 
    if (drawA == true) { // basic line
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY); // draw line
    }
 
    if (drawB == true) { // variation 1
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY);
      ellipse(pmouseX,pmouseY,5,5);
      ellipse(mouseX,mouseY,10,10);
      line(pmouseX,pmouseY, mouseX - 10, mouseY - 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX - 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY - 10); 
    }
 
    if (drawC == true) {  // variation 2
      strokeWeight(0.5);
      ellipse(pmouseX,pmouseY,15,15);
      ellipse(mouseX,mouseY,15,15);
      line(pmouseX,pmouseY,mouseX,mouseY);
    }
 
  }
  noStroke(); // resets the stroke value so that the tile does not contain any outline
}
 
void mousePressed() {
 
    // COLOR OPTIONS
 
    if(mouseX > red_c[1] && mouseX < red_c[1] + tileSize && mouseY > red_c[2] && mouseY < red_c[2] + tileSize) 
    {  
        redActive = true;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    } 
    else if (mouseX > blue_c[1] && mouseX < blue_c[1] + tileSize && mouseY > blue_c[2] && mouseY < blue_c[2] + tileSize) 
    {
        redActive = false;
        blueActive = true;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    } 
    else if (mouseX > yellow_c[1] && mouseX < yellow_c[1] + tileSize && mouseY > yellow_c[2] && mouseY < yellow_c[2] + tileSize) 
    {
        // println("success");
        redActive = false;
        blueActive = false;
        yellowActive = true;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > purple_c[1] && mouseX < purple_c[1] + tileSize && mouseY > purple_c[2] && mouseY < purple_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = true;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > green_c[1] && mouseX < green_c[1] + tileSize && mouseY >green_c[2] && mouseY < green_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = true;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > orange_c[1] && mouseX < orange_c[1] + tileSize && mouseY > orange_c[2] && mouseY < orange_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = true;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > brown_c[1] && mouseX < brown_c[1] + tileSize && mouseY > brown_c[2] && mouseY < brown_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = true;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > grey_c[1] && mouseX < grey_c[1] + tileSize && mouseY > grey_c[2] && mouseY < grey_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = true;
        blackActive = false;
    }
    else if(mouseX > black_c[1] && mouseX < black_c[1] + tileSize && mouseY > black_c[2] && mouseY < black_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = true;
    }
    else if (mouseX > toolA[2] && mouseX < toolA[3] && mouseY > toolA[4] && mouseY < toolA[5] ) {
        drawA = true;
        drawB = false;
        drawC = false;
    }
    else if (mouseX > toolB[2] && mouseX < toolB[3] && mouseY > toolB[4] && mouseY < toolB[5] ) {
        drawA = false;
        drawB = true;
        drawC = false;
    }
    else if (mouseX > toolC[2] && mouseX < toolC[3] && mouseY > toolC[4] && mouseY < toolC[5] ) {
        drawA = false;
        drawB = false;
        drawC = true;
    }
    else
    {  
      return drawing = true;  
    }
 
    // DRAWING OPTIONS
 
 
}
 
void mouseReleased() {
  drawing = false;
}
 
void drawPalette() {
  fill( red_c[0] );
  rect( red_c[1], red_c[2], tileSize, tileSize);
  fill( blue_c[0] );
  rect( blue_c[1], blue_c[2], tileSize, tileSize);
  fill( yellow_c[0] );
  rect( yellow_c[1], yellow_c[2], tileSize, tileSize);
  fill( purple_c[0] );
  rect( purple_c[1], purple_c[2], tileSize, tileSize);
  fill( green_c[0] );
  rect( green_c[1], green_c[2], tileSize, tileSize);
  fill( orange_c[0] );
  rect( orange_c[1], orange_c[2], tileSize, tileSize);
  fill( brown_c[0] );
  rect( brown_c[1], brown_c[2], tileSize, tileSize);
  fill( grey_c[0] );
  rect( grey_c[1], grey_c[2], tileSize, tileSize);
  fill( black_c[0] );
  rect( black_c[1], black_c[2], tileSize, tileSize);
}
 
void drawBrushOptions() {
 
  fill(255);
  strokeWeight(0.5);
  stroke(88,88,88);
 
  // tool A 
  rect(toolA[0],toolA[1],brushOptSize,brushOptSize);
  line(toolA[0] + margin, toolA[1] + margin, toolA[0] + brushOptSize - margin, toolA[1] + brushOptSize - margin)
 
  // tool B
  rect(toolB[0],toolB[1],brushOptSize,brushOptSize);
  ellipse(toolB[0] + (brushOptSize/2), toolB[1] + (brushOptSize/2) ,15,15);
  line(toolB[0] + margin, toolB[1] + margin, toolB[0] + brushOptSize - margin, toolB[1] + brushOptSize - margin);
  line(toolB[0] + margin, toolB[1] + brushOptSize - margin, toolB[0] + brushOptSize - margin, toolB[1] + margin);
 
  // tool C
  rect(toolC[0],toolC[1],brushOptSize,brushOptSize);
  ellipse(toolC[0] + (brushOptSize/2) , toolC[1] + (brushOptSize/2) ,15,15);
  line(toolC[0] + margin, toolC[1] + brushOptSize - margin, toolC[0] + brushOptSize - margin, toolC[1] + margin);
 
}

Process

The first step was to ensure that I had a basic drawing tool that adapted the color value of the corresponding tile.

  • Show Code
/* @peep sketch */
 
color defaultFill = color(255);
boolean statusUpdate;
boolean drawing;
 
void setup() {
  size(500,250);
  background(0);
}
 
void draw() {
 
  //  println("Status is " + statusUpdate);
 
  rect(100,100,25,25);
 
  if (drawing == true) {
    // println("drawing is " + drawing);
    stroke(255);
    // next step would be to change stroke into a boolean color
    line(pmouseX,pmouseY,mouseX,mouseY);
  }
 
 
}
 
void mousePressed() {
 
  if(mouseX > 100 && mouseX < 125 && mouseY > 100 && mouseY < 125) {
 
      return statusUpdate = true;
 
  } else {
 
      return drawing = true;
 
  }
 
}
 
void mouseReleased() {
 
  drawing = false;
 
}

After I got that down, I expanded on the drawing cursor and included a few different color variations.

  • Show Code
/* @peep sketch */
 
// Initialize Booleans
boolean drawing;
boolean redActive, blueActive, yellowActive;      // boolean to check active color
boolean purpleActive, greenActive, orangeActive;  // boolean to check active color
boolean red_c, blue_c, yellow_c;                  // custom color values for simplicity
boolean purple_c, green_c, orange_c;              // custom color values for simplicity 
boolean drawA, drawB, drawC;
 
// Global Controller
 
// Default Settings
color defaultFill = color(255);   // white
float tileSize = 25;              // size of each color tile
float orgnX = 10;
float orgnY = 10;
 
// Color Tiles - Color Value, x-Pos, y-Pos
/* Red    */  float[] red_c    = { color(255,102,102) , orgnX                 , orgnY };
/* Blue   */  float[] blue_c   = { color(51,153,255)  , orgnX + tileSize      , orgnY };
/* Yellow */  float[] yellow_c = { color(225,225,0)   , orgnX + tileSize * 2  , orgnY };
/* Purple */  float[] purple_c = { color(153,51,255)  , orgnX                 , orgnY + 25  };
/* Green  */  float[] green_c  = { color(0,204,102)   , orgnX + tileSize      , orgnY + 25  };
/* Orange */  float[] orange_c = { color(255,153,51)  , orgnX + tileSize * 2  , orgnY + 25  };
 
 
void setup() {
  size(500,500);
  background(250);
}
 
void draw() {
  // test_cmd // println("Status is " + statusUpdate);
 
  // drawA = true;
  drawB = true;
  // drawC = true;
 
  drawPalette();
 
  if (drawing == true) {
    // test_cmd // println("drawing is " + drawing); // make sure interaction is working properly
    fill(255); // default white fill value
 
    if  (redActive == true)     { stroke(red_c[0])    ; } // red
    if  (blueActive == true)    { stroke(blue_c[0])   ; } // blue
    if  (yellowActive == true)  { stroke(yellow_c[0]) ; } // yellow
    if  (purpleActive == true)  { stroke(purple_c[0]) ; } // purple
    if  (greenActive == true)   { stroke(green_c[0])  ; } // green
    if (orangeActive == true)   { stroke(orange_c[0]) ; } // orange
 
    if (drawA == true) { // basic line
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY); // draw line
    }
 
    if (drawB == true) { // variation 1
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY);
      ellipse(pmouseX,pmouseY,5,5);
      ellipse(mouseX,mouseY,10,10);
      line(pmouseX,pmouseY, mouseX - 10, mouseY - 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX - 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY - 10); 
    }
 
    if (drawC == true) {
      strokeWeight(0.5);
      ellipse(pmouseX,pmouseY,15,15);
      ellipse(mouseX,mouseY,15,15);
      line(pmouseX,pmouseY,mouseX,mouseY);
    }
 
  }
  noStroke(); // resets the stroke value so that the tile does not contain any outline
}
 
void mousePressed() {
 
 
    if(mouseX > red_c[1] && mouseX < red_c[1] + tileSize && mouseY > red_c[2] && mouseY < red_c[2] + tileSize) 
    {  
        redActive = true;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
    } 
    else if (mouseX > blue_c[1] && mouseX < blue_c[1] + tileSize && mouseY > blue_c[2] && mouseY < blue_c[2] + tileSize) 
    {
        redActive = false;
        blueActive = true;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
    } 
    else if (mouseX > yellow_c[1] && mouseX < yellow_c[1] + tileSize && mouseY > yellow_c[2] && mouseY < yellow_c[2] + tileSize) 
    {
        // println("success");
        redActive = false;
        blueActive = false;
        yellowActive = true;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
    }
    else if(mouseX > purple_c[1] && mouseX < purple_c[1] + tileSize && mouseY > purple_c[2] && mouseY < purple_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = true;
        greenActive = false;
        orangeActive = false;
    }
    else if(mouseX > green_c[1] && mouseX < green_c[1] + tileSize && mouseY >green_c[2] && mouseY < green_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = true;
        orangeActive = false;
    }
    else if(mouseX > orange_c[1] && mouseX < orange_c[1] + tileSize && mouseY > orange_c[2] && mouseY < orange_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = true;
    }
    else
    {  
      return drawing = true;  
    }
 
}
 
void mouseReleased() {
  drawing = false;
}
 
void drawPalette() {
 
  fill( red_c[0] );
  rect( red_c[1], red_c[2], tileSize, tileSize);
  fill( blue_c[0] );
  rect( blue_c[1], blue_c[2], tileSize, tileSize);
  fill( yellow_c[0] );
  rect( yellow_c[1], yellow_c[2], tileSize, tileSize);
  fill( purple_c[0] );
  rect( purple_c[1], purple_c[2], tileSize, tileSize);
  fill( green_c[0] );
  rect( green_c[1], green_c[2], tileSize, tileSize);
  fill( orange_c[0] );
  rect( orange_c[1], orange_c[2], tileSize, tileSize);
 
}

After playing around with it for a while, I was able to come up with the base color palette as well as a set of 3 various drawing tools. This would produce the final sketch and graphic generator.

  • Show Code
/* @peep sketch */
 
// Initialize Booleans
boolean drawing;
boolean redActive, blueActive, yellowActive;      // boolean to check active color
boolean purpleActive, greenActive, orangeActive;  // boolean to check active color
boolean brownActive, greyActive, blackActive;     // boolean to check active color
boolean red_c, blue_c, yellow_c;                  // custom color values for simplicity
boolean purple_c, green_c, orange_c;              // custom color values for simplicity 
boolean brown_c, grey_c, black_c;                 // custom color values for simplicity
boolean drawA, drawB, drawC;
 
// Global Controller
 
// Default Settings
color defaultFill = color(255);   // white
color defaultBG = color(250);     // offwhite
float margin = 10;
float tileSize = 25;              // size of each color tile
float brushOptSize = 40;
float orgnX = 10;                 // upper left corner of the first color tile (x)
float orgnY = 10;                 // upper left corner of the first color tile (y)
float dtX = 10;  
float dtY = 250;
 
 
// Color Tiles - Constructors: Color Value, x-Pos, y-Pos
/* Red    */  float[] red_c     =   { color(255,102,102) , orgnX                 , orgnY };
/* Blue   */  float[] blue_c    =   { color(51,153,255)  , orgnX + tileSize      , orgnY };
/* Yellow */  float[] yellow_c  =   { color(225,225,0)   , orgnX + tileSize * 2  , orgnY };
/* Purple */  float[] purple_c  =   { color(153,51,255)  , orgnX                 , orgnY + 25  };
/* Green  */  float[] green_c   =   { color(0,204,102)   , orgnX + tileSize      , orgnY + 25  };
/* Orange */  float[] orange_c  =   { color(255,153,51)  , orgnX + tileSize * 2  , orgnY + 25  };
/* Brown */   float[] brown_c   =   { color(151,103,82)  , orgnX                 , orgnY + 50  };
/* Grey  */   float[] grey_c    =   { color(160,160,160) , orgnX + tileSize      , orgnY + 50  };
/* Black */   float[] black_c   =   { color(64,64,64)    , orgnX + tileSize * 2  , orgnY + 50  };
 
// Drawing Tools - Constructors: xPos, yPos, minX, maxX, minY, maxY // sets the location where user can choose which drawing tool option
/* 1 */ float[] toolA = { dtX, dtY,                                 dtX,  dtX + brushOptSize, dtY,  dtY + brushOptSize                                    };
/* 2 */ float[] toolB = { dtX, dtY + brushOptSize + margin,         dtX,  dtX + brushOptSize, dtY,  (dtY + brushOptSize + margin + brushOptSize)          };
/* 3 */ float[] toolC = { dtX, dtY + ((brushOptSize + margin) * 2), dtX,  dtX + brushOptSize, dtY,  (dtY + ((brushOptSize + margin) * 2) + brushOptSize)  };
 
void setup() {
  size(500, 400);
  background(defaultBG);
}
 
void draw() {
  // test_cmd // println("Status is " + statusUpdate);
 
  // drawA = true;
  // drawB = true;
  // drawC = true;
 
  // VIEW
  drawPalette();
  drawBrushOptions();
 
  // CONTROLLER
  if (drawing == true) {
    // test_cmd // println("drawing is " + drawing); // make sure interaction is working properly
    fill(defaultBG); // default white fill value
 
    if  (redActive == true)     { stroke(red_c[0])    ; } // red
    if  (blueActive == true)    { stroke(blue_c[0])   ; } // blue
    if  (yellowActive == true)  { stroke(yellow_c[0]) ; } // yellow
    if  (purpleActive == true)  { stroke(purple_c[0]) ; } // purple
    if  (greenActive == true)   { stroke(green_c[0])  ; } // green
    if  (orangeActive == true)  { stroke(orange_c[0]) ; } // orange
    if  (brownActive == true)   { stroke(brown_c[0])  ; } // brown
    if  (greyActive == true)    { stroke(grey_c[0])   ; } // grey
    if  (blackActive == true)   { stroke(black_c[0])  ; } // black
 
    if (drawA == true) { // basic line
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY); // draw line
    }
 
    if (drawB == true) { // variation 1
      strokeWeight(0.5);
      line(pmouseX,pmouseY, mouseX,mouseY);
      ellipse(pmouseX,pmouseY,5,5);
      ellipse(mouseX,mouseY,10,10);
      line(pmouseX,pmouseY, mouseX - 10, mouseY - 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX - 10, mouseY + 10); 
      line(pmouseX,pmouseY, mouseX + 10, mouseY - 10); 
    }
 
    if (drawC == true) {  // variation 2
      strokeWeight(0.5);
      ellipse(pmouseX,pmouseY,15,15);
      ellipse(mouseX,mouseY,15,15);
      line(pmouseX,pmouseY,mouseX,mouseY);
    }
 
  }
  noStroke(); // resets the stroke value so that the tile does not contain any outline
}
 
void mousePressed() {
 
    // COLOR OPTIONS
 
    if(mouseX > red_c[1] && mouseX < red_c[1] + tileSize && mouseY > red_c[2] && mouseY < red_c[2] + tileSize) 
    {  
        redActive = true;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    } 
    else if (mouseX > blue_c[1] && mouseX < blue_c[1] + tileSize && mouseY > blue_c[2] && mouseY < blue_c[2] + tileSize) 
    {
        redActive = false;
        blueActive = true;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    } 
    else if (mouseX > yellow_c[1] && mouseX < yellow_c[1] + tileSize && mouseY > yellow_c[2] && mouseY < yellow_c[2] + tileSize) 
    {
        // println("success");
        redActive = false;
        blueActive = false;
        yellowActive = true;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > purple_c[1] && mouseX < purple_c[1] + tileSize && mouseY > purple_c[2] && mouseY < purple_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = true;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > green_c[1] && mouseX < green_c[1] + tileSize && mouseY >green_c[2] && mouseY < green_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = true;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > orange_c[1] && mouseX < orange_c[1] + tileSize && mouseY > orange_c[2] && mouseY < orange_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = true;
        brownActive = false;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > brown_c[1] && mouseX < brown_c[1] + tileSize && mouseY > brown_c[2] && mouseY < brown_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = true;
        greyActive = false;
        blackActive = false;
    }
    else if(mouseX > grey_c[1] && mouseX < grey_c[1] + tileSize && mouseY > grey_c[2] && mouseY < grey_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = true;
        blackActive = false;
    }
    else if(mouseX > black_c[1] && mouseX < black_c[1] + tileSize && mouseY > black_c[2] && mouseY < black_c[2] + tileSize) 
    { 
        redActive = false;
        blueActive = false;
        yellowActive = false;
        purpleActive = false;
        greenActive = false;
        orangeActive = false;
        brownActive = false;
        greyActive = false;
        blackActive = true;
    }
    else if (mouseX > toolA[2] && mouseX < toolA[3] && mouseY > toolA[4] && mouseY < toolA[5] ) {
        drawA = true;
        drawB = false;
        drawC = false;
    }
    else if (mouseX > toolB[2] && mouseX < toolB[3] && mouseY > toolB[4] && mouseY < toolB[5] ) {
        drawA = false;
        drawB = true;
        drawC = false;
    }
    else if (mouseX > toolC[2] && mouseX < toolC[3] && mouseY > toolC[4] && mouseY < toolC[5] ) {
        drawA = false;
        drawB = false;
        drawC = true;
    }
    else
    {  
      return drawing = true;  
    }
 
    // DRAWING OPTIONS
 
 
}
 
void mouseReleased() {
  drawing = false;
}
 
void drawPalette() {
  fill( red_c[0] );
  rect( red_c[1], red_c[2], tileSize, tileSize);
  fill( blue_c[0] );
  rect( blue_c[1], blue_c[2], tileSize, tileSize);
  fill( yellow_c[0] );
  rect( yellow_c[1], yellow_c[2], tileSize, tileSize);
  fill( purple_c[0] );
  rect( purple_c[1], purple_c[2], tileSize, tileSize);
  fill( green_c[0] );
  rect( green_c[1], green_c[2], tileSize, tileSize);
  fill( orange_c[0] );
  rect( orange_c[1], orange_c[2], tileSize, tileSize);
  fill( brown_c[0] );
  rect( brown_c[1], brown_c[2], tileSize, tileSize);
  fill( grey_c[0] );
  rect( grey_c[1], grey_c[2], tileSize, tileSize);
  fill( black_c[0] );
  rect( black_c[1], black_c[2], tileSize, tileSize);
}
 
void drawBrushOptions() {
 
  fill(255);
  strokeWeight(0.5);
  stroke(88,88,88);
 
  // tool A 
  rect(toolA[0],toolA[1],brushOptSize,brushOptSize);
  line(toolA[0] + margin, toolA[1] + margin, toolA[0] + brushOptSize - margin, toolA[1] + brushOptSize - margin)
 
  // tool B
  rect(toolB[0],toolB[1],brushOptSize,brushOptSize);
  ellipse(toolB[0] + (brushOptSize/2), toolB[1] + (brushOptSize/2) ,15,15);
  line(toolB[0] + margin, toolB[1] + margin, toolB[0] + brushOptSize - margin, toolB[1] + brushOptSize - margin);
  line(toolB[0] + margin, toolB[1] + brushOptSize - margin, toolB[0] + brushOptSize - margin, toolB[1] + margin);
 
  // tool C
  rect(toolC[0],toolC[1],brushOptSize,brushOptSize);
  ellipse(toolC[0] + (brushOptSize/2) , toolC[1] + (brushOptSize/2) ,15,15);
  line(toolC[0] + margin, toolC[1] + brushOptSize - margin, toolC[0] + brushOptSize - margin, toolC[1] + margin);
 
}

Overall, I am somewhat content with the outcome. Although it doesn't speak as much visually, the logic of the structure is there, which will allow me to expand on it in the future with more complex drawing tools and color palettes.

Comments

Nobody has said anything yet.