This recitation I decided to focus on the functionality of the drawing app (to make it as functional as I had time for :))
I ended up creating an interactive drawing environment where I could choose the shape to draw with along with the color used. For the shapes, I narrowed down to the three main ones: line, triangle and circle. For the colors, I decided to stick to red, green and blue (and, initially, white).
The functionality is the following:
- pressing the inside-circles shapes switches the shape (line, circle, triangle)
- the current shape-circle is lit up with the current color
- to change the color ‘r’ ‘g’ and ‘b’ keys can be pressed
- to change the size/stroke weight of the shape upper arrow and down arrow can be pressed
- the current size/stroke weight along with the name of the shape and the color are tracked and displayed using the very top-left circle and text.
If I could work on it more, I would probably add some more shapes, colors and an eraser tool.
Example of an abstract artworks that could be created:
- Variables are used to store information to be referenced and manipulated in your sketch. Describe how you used variables and their purpose in your sketch.
I used variables everywhere. I had variables that change, variables that are local as well as global. Some of them were also stored in the array and one of them was an object. I believe they were very important in creating a small yet interactive application like this. These are my main global variables:
let currentColor = {
r: 255,
g: 255,
b: 255,
};
let shapes = ["line", "circle", "triangle"];
let currentShape = 0;
let sWeight = 1;
as it can be seen, they are pretty useful when some value is changing or need to be accessed from various functions.
And, of course, mouseX and mouseY were quite integral to the program.
- Conditions allow us to control what the program does and perform different actions based on “if” logic statements. They enable the user to interact with the program. Describe the interactive methods you applied in your program, utilizing conditionals.
As I mentioned, I had to switch colors, sizes and shapes depending on the key, keyCode or place (mouseX and mouseY) where mouse was pressed.
Here is the color and strokeWeight (=size as well) change code:
if (keyIsPressed) {
if (key === "r") {
currentColor.r = 255;
currentColor.g = 0;
currentColor.b = 0;
} else if (key === "g") {
currentColor.r = 0;
currentColor.g = 255;
currentColor.b = 0;
} else if (key === "b") {
currentColor.r = 0;
currentColor.g = 0;
currentColor.b = 255;
}
fill(currentColor.r, currentColor.g, currentColor.b);
circle(40, 40, 20);
if (keyCode === UP_ARROW) {
sWeight = sWeight + 1;
} else if (keyCode === DOWN_ARROW) {
sWeight = sWeight - 1;
}
}
as for the changing the shapes, I was using dist() function to identify whether the mouse was pressed inside a certain shape-changing circle. Otherwise, I would just call the drawTheShape() function:
if (mouseIsPressed) {
if (dist(mouseX, mouseY, 40, 70) <= 28) {
currentShape = 0;
} else if (dist(mouseX, mouseY, 70, 70) <= 28) {
currentShape = 1;
} else if (dist(mouseX, mouseY, 100, 70) <= 28) {
currentShape = 2;
} else {
drawTheShape();
}
}
- What are the differences between key and keyCode?
keyCode is a veriable that can be used to access “special” keys that could be found on keyboard however are unable to be represented by a single character (usually). in my application i used keyCode to track the pressing of Up and Down arrows.
i used key to access ‘r’, ‘g’, ‘b’ keys.
here is the video of me showing how the program works:
the link to my p5:
https://editor.p5js.org/zhuanya28/sketches/QVNfkxJc3
the full code:
function setup() {
createCanvas(600, 600);
background(0);
}
let currentColor = {
r: 255,
g: 255,
b: 255,
};
let shapes = ["line", "circle", "triangle"];
let currentShape = 0;
let sWeight = 1;
//drawing the shape function
function drawTheShape() {
if (shapes[currentShape] === "line") {
stroke(currentColor.r, currentColor.g, currentColor.b);
strokeWeight(sWeight);
line(pmouseX, pmouseY, mouseX, mouseY);
} else if (shapes[currentShape] === "circle") {
fill(currentColor.r, currentColor.g, currentColor.b);
circle(mouseX, mouseY, sWeight);
} else if (shapes[currentShape] === "triangle") {
fill(currentColor.r, currentColor.g, currentColor.b);
triangle(
mouseX - sWeight,
mouseY + sWeight,
mouseX,
mouseY - sWeight,
mouseX + sWeight,
mouseY + sWeight
);
}
}
function draw() {
noStroke();
textSize(15);
fill(0);
rect(60, 30, 80, 20);
fill(currentColor.r, currentColor.g, currentColor.b);
text(shapes[currentShape], 60, 45);
circle(40, 40, 30);
//the line circle
if (shapes[currentShape] == "line") {
fill(currentColor.r, currentColor.g, currentColor.b);
} else {
fill(255);
}
circle(40, 70, 28);
stroke(0);
strokeWeight(2);
line(30, 80, 50, 60);
noStroke();
//circle circle
if (shapes[currentShape] == "circle") {
fill(currentColor.r, currentColor.g, currentColor.b);
} else {
fill(255);
}
circle(70, 70, 28);
fill(0);
circle(70, 70, 15);
//triangle circle
if (shapes[currentShape] == "triangle") {
fill(currentColor.r, currentColor.g, currentColor.b);
} else {
fill(255);
}
circle(100, 70, 28);
fill(0);
triangle(90, 75, 100, 60, 110, 75);
circle(130, 70, 20);
if (keyIsPressed) {
if (key === "r") {
currentColor.r = 255;
currentColor.g = 0;
currentColor.b = 0;
} else if (key === "g") {
currentColor.r = 0;
currentColor.g = 255;
currentColor.b = 0;
} else if (key === "b") {
currentColor.r = 0;
currentColor.g = 0;
currentColor.b = 255;
}
fill(currentColor.r, currentColor.g, currentColor.b);
circle(40, 40, 20);
if (keyCode === UP_ARROW) {
sWeight = sWeight + 1;
} else if (keyCode === DOWN_ARROW) {
sWeight = sWeight - 1;
}
}
fill(0);
textSize(15);
text(sWeight.toString(), 32, 45);
textSize(20);
fill(255);
let s = "Press r, g or b, to change colors";
text(s, 300, 580);
if (mouseIsPressed) {
if (dist(mouseX, mouseY, 40, 70) <= 28) {
currentShape = 0;
} else if (dist(mouseX, mouseY, 70, 70) <= 28) {
currentShape = 1;
} else if (dist(mouseX, mouseY, 100, 70) <= 28) {
currentShape = 2;
} else {
drawTheShape();
}
}
}