CCLab Mini Project 2: Interactive Drawing

Introduction

This project is an online sketchpad with several basic functions.

↑ A brief demo.

Functions & Features

Functions

Brushes

#1 Pencil Drawing

You can draw equal weight lines using your mouse.

#2 Pen Drawing

You can draw unequal weight lines using your mouse. The weight of the lines depends on your speed of moving the mouse.

#3 Highlighter Drawing

You can draw equal but very heavy lines using your mouse.

 

Colors

#1 Various Preset Colors

Orange, Yellow, Green, Red, Black, Lightblue, Pink, Violet, and Darkblue have already been set as your drawing colors.

#2 Custom Colors

You can input the HEX color code to draw any color you want to use.

 

Tools

#1 Eraser

You can erase your drawing.

#2 Ruler

You can draw straight lines by clicking 2 points on the canvas.

#3 Triangle

You can draw triangles by clicking 3 points on the canvas.

#4 Clear

You can clear the canvas with a single click.

 

Features

UI Design

#1 Aesthetic Dimension

The tab and all the buttons are rounded rectangles with the same diameter which ensures the united visual design. 

#2 Interactive Dimension

• When the mouse is on the brushes and tools which all are interactive buttons, the button will inverse the color to prompt the user that the button is clickable.
• When any of the functions is selected, other functions will be deselected and the black line will appear around the button to prompt the user.
• When any of the colors are selected, other colors will be deselected and the selected color will fill up the whole button to prompt the user.

#3 Functions Dimension

I’ve designed several often-used functions in this sketchpad. You can also customize your color which is quite useful (maybe).

Code Analysis

#1 How to achieve the feature “when one function is selected, other functions will be deselected”

If any of the functions is selected, a boolean related to the function will become true while other functions will become false.

//Pencil as an Example
function mouseClicked() {
  //pencil
  if (dist(mouseX, mouseY, line1, row1 - 20) < 25) {
    pencil = !pencil;
    pen = false;
    highlighter = false;
    erazer = false;
    ruler = false;
    theTriangle = false;
  }
}

#2 How to achieve the feature “Custom Color”

I utilize prompt() to ask the user to input the color code and use a parameter to store the color information. But I found a bug which is if the user clicks ‘cancel’ the parameter will receive nothing and the program will crash. So I add a while loop if the parameter receives nothing, the program will continue asking the color code.

while (
  dist(mouseX, mouseY, line1, row5) < 25 ||
  dist(mouseX, mouseY, line3, row5) < 25 ||
  (mouseX < 160 && mouseX > 40 && mouseY < row5 + 25 && mouseY > row5 - 25)
) {
  theColor = prompt("Please input a HEX color code. Sample: #FFFFFF");
  if (theColor == null) {
    continue;
  } else {
    orange = false;
    yellow = false;
    theGreen = false;
    theRed = false;
    black = false;
    lightBlue = false;
    pink = false;
    violet = false;
    darkBlue = false;
    custom = true;
    break;
  }
}

 

#3 How to achieve the feature “Inverse the color to prompt the user that the button is clickable”

I use the if statement to check if the mouse is on the button. If yes, draw the inverse layer on the original button.

//Eraser Button as an Example
if (dist(mouseX, mouseY, line1, row6) < 25) {
  noStroke();
  fill(0);
  circle(line1, row6, 50);
  fill(255);
  stroke(255);
  rect(line1, row6 - 2, 10, 14);
  fill(0);
  rect(line1, row6 + 7, 10, 5);
}

Planned Updates

#1 Sticker & Emoji Brush → 😅

#2 Adjusting Brush Weight

#3 Transparent Highlighter

Reflections

The parameter is really important and useful when programming. I use more than 32 parameters on this program.

Although the function part is quite simple, I’m satisfied with the interactive part and the UI design. I think it shows the respect to your users.

In this mini project, I’ve gained some skills to interact with mouses and keyboard(although the project has nothing to do about the keys lol). The interactive program is quite attractive and enjoyable.

——————————————-More Info——————————————

Thanks

Appreciate the guidance from IMA professor on the code for “Pen” function

Links

If you’re interested in the complete code, you can click me to find them.

If you want to play with the program, you can click me to find it.

p5.js link: https://editor.p5js.org/AndyHyprillion/sketches/m8W-EHeL5