Recitation2: Interactive Drawing [A Drawing Tool]

https://editor.p5js.org/calistalu/full/fOf7zNscp

Brief Description and Concept:

This is a user-friendly drawing tool with which you can draw some simple and fundamental shapes. You can select a color from the pallet to draw a line by using the four arrows on keyboard; draw a circle or star in random color to decorate your drawing; press “spacebar” to clear background and press “d” to dark mode.

Demo:

Coding:

function mousePressed() {
if (shapeMode == 2) {
h = random(100);
s = random(100);
fill(h, s, 100, 60);
size = random(10,70);
noStroke();
circle(mouseX, mouseY, size);
}

if (shapeMode == 1) {
h = random(100);
s = random(100);
fill(h, s, 100, 60);
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, random(20, 80), random(20, 80) / 10);
rect(mouseX, mouseY, random(20, 80) / 10, random(20, 80));
}
}

My original goal is to draw a circle or star in random color and random size, but I found the if ( mouseIsPressed ) statement causes the shape to continuously change its color during the few seconds I pressed the mouse. So credit to my LA Cissy who kindly reminded me to use the function mousePressed to handle the problem. At first we tried to use dist (mouseX, mouseY, pmouseX, pmouseY) to make it draw one circle at a time. However, it didn’t work because the second before we clicked the mouse to draw, the mouse didn’t move. So we changed it to function mousePressed and finally it worked!

Reflection:

1. I used the variable shapeMode to change the drawing from line to circle to star and boolean isDarkMode to determine if the program is running in dark mode.  It seems to serve as a symbol to help distinguish some executions. Moreover, variable h and s are used to adjust hue and saturation continuously and visually.
2. If statement is used to control the program to perform only in some certain conditions, which enables the user interaction through keyboard.