Mini Project 2: Draw Freely
Link: https://editor.p5js.org/wl3223/sketches/l_5Alz5ab
Brief Description and Concept
In this project, the mouse acts as a brush, and the keyboard plays a role as a control panel. I created a project to draw freely on the canvas. Not only can you change the thickness of the brush, but also there are two color palettes as well as four hidden colors for you to explore.
Demo/Visual Documentation
Coding
let r, g, b, v;
let q, w, e;
let sw = 1;
function setup() {
createCanvas(500, 500);
}
function draw() {
//stroke()
//here I'm changing the strokeweight
if (keyIsPressed == true) {
if (key == "q") {
// strokeWeight(3);
sw = 3;
} else if (key == "w") {
// strokeWeight(8);
sw = 8;
} else if (key == "e") {
//strokeWeight(15);
sw = 15;
}
//here I'm changing the color
if (keyIsPressed) {
if (key == "r") {
r = 255;
g = 0;
b = 0;
} else if (key == "g") {
r = 0;
g = 255;
b = 0;
} else if (key == "b") {
r = 0;
g = 0;
b = 255;
} else if (key == "f") {
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
} else if (key == "v") {
r = 130;
g = 54;
b = 168;
}
}
}
//here I'm drawing
if (mouseIsPressed) {
stroke(r, g, b);
if (mouseIsPressed) {
if (mouseX > 10 && mouseX < 50 && mouseY > 10 && mouseY < 50) { r = 232; g = 99; b = 107; } else if (mouseX > 10 && mouseX < 50 && mouseY > 50 && mouseY < 90) { r = 255; g = 161; b = 153; } else if (mouseX > 10 && mouseX < 50 && mouseY > 90 && mouseY < 130) { r = 255; g = 208; b = 153; } else if (mouseX > 10 && mouseX < 50 && mouseY > 130 && mouseY < 170) { r = 175; g = 214; b = 173; } else if (mouseX > 10 && mouseX < 50 && mouseY > 170 && mouseY < 210) { r = 124; g = 182; b = 160; } else if (mouseX > 10 && mouseX < 50 && mouseY > 230 && mouseY < 270) { r = 247; g = 201; b = 242; } else if (mouseX > 10 && mouseX < 50 && mouseY > 270 && mouseY < 310) { r = 224; g = 201; b = 247; //224,201,247 } else if (mouseX > 10 && mouseX < 50 && mouseY > 310 && mouseY < 350) { r = 213; g = 185; b = 253; //213,185,253 } else if (mouseX > 10 && mouseX < 50 && mouseY > 350 && mouseY < 390) { r = 194; g = 218; b = 253; //194,218,253 } else if (mouseX > 10 && mouseX < 50 && mouseY > 390 && mouseY < 430) {
r = 200;
g = 244;
b = 255;
}
}
strokeWeight(sw);
line(pmouseX, pmouseY, mouseX, mouseY);
}
stroke(255, 178, 1);
strokeWeight(4);
fill(255, 217, 102);
textSize(40);
text("Draw!", 220, 50);
noStroke();
fill(0, 119, 61);
textSize(20);
text("Choose the color and brush thickness", 100, 80);
//here I'm developing color palettes
stroke(0);
strokeWeight(1);
fill(232, 99, 117);
rect(10, 10, 40, 40);
fill(255, 161, 153);
rect(10, 50, 40, 40);
fill(255, 208, 153);
rect(10, 90, 40, 40);
fill(175, 214, 173);
rect(10, 130, 40, 40);
fill(124, 182, 160);
rect(10, 170, 40, 40);
I had difficulties with the proper sequence of codes and layer after layer of conditionals. For example, I found that after I used the keyboard to change the thickness of the brush, the stroke weight of the squares and strings would change at the same time. Thanks to Professor Marcela and fellow assistant Carrot, I ultimately solved the problem. One solution is to redefine the stroke weight at the end of the code. Another one is to change the order of the code, that is to say, put all the graphics and strings with strokes at the end because new loops will cover the previous one. The last solution is to use “push and pop”, which can make a string of codes unaffected by other codes. The final work displays the second solution.
*Please forgive me because I don’t know how to embed code properly yet:( If I could edit this blog after I post it, I will re-embed the code later
*The difficulties I met couldn’t be shown in only short code snippets. If I want to show them completely, they’re actually all of the code I wrote.
Here is the outcome:
Reflection/Lessons Learned
Variables: I use “r, g, b” to represent colors of red, green, and blue. With these variables, it’s possible to apply more colors with the basic three primary colors. In addition, I use “q,w,e,sw” to determine the stroke weight.
Conditionals: “If” and “else if ” are employees in my project to not only differentiate stroke weights but also play an important role in operating the color palettes. You can click the square on the left to choose the color you like and use the keyboard to change the stroke weight.
Key vs. keyCode: The system variable key always contains the value of the most recent key on the keyboard that was typed. The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
Conclusion
Mini Project 2 is difficult for me to carry on because I can’t have a clear blueprint in my mind to figure out the proper sequence of codes, especially due to a large number of conditionals. Despite the difficulties, I do gain interesting knowledge from learning!