This mini-project finally give me the feeling of I am taking a look into the door on using P5.
Although I am struggling to move beyond the requirements, in the end, I feel like I at least created something that is considerable.
The first part of the mini-project is to give this drawing tool a pencil to draw. This is the easiest part, as the professor had already taught this in the class, and luckily I remembered it, and have it stuck in my brain.
Then the second part becomes tricky. I will have to start using if functions to add more variety to my drawing tool, and it wasn’t writing the code gives me the trouble, but it was where to place these codes.
I first start writing the code like this:
if (mouseIsPressed) {
strokeWeight(thickness);
line(pmouseX, pmouseY, mouseX, mouseY);
}
if (keyIsPressed && key == “p”) {
thickness = thickness + 1;
}
while thickness is set to 1, the function seems to work, but when I run this code, no matter how many times I have pressed on the p button, the thickness of the line never changed. To better track the change of the thickness value, I used the Console.log function to give me instant feedback every time when I pressed the button, and I found out that every time I pressed the P button, the thickness of the line did change to 2, but it will quickly return to 1.
I was stuck here for quite a while, never figured out why it is so, desperately I start moving the code, then I found out, the problem is solved.
Because the coding of changing the thickness of the line function is placed after the mouseispreesed function, so every time when draw function is repeated, it will always regenerate the original thickness value before looking at the change.
After finding out such a mistake, the codes afterward are no big deal.
Here is my final product, much more details I haven’t mentioned can be found inside.
https://editor.p5js.org/hz2504/sketches/aboZ1b4ks
The Video: