My Flower
Description:
For this mini project, I programmed an interactive drawing and named it “My Flower”. The name comes from its design of a flower that can be customize to people’s liking through changing the color of the petals, and drawing the leaf/leaves using the mouse. Here, you can change the color of the petals into the colors white, red, pink, orange, yellow, green, blue, and violet by clicking the the first letter of the color on the keyboard (e.g. press ‘y’ for yellow petals). To draw the leaves, you just have to simply press the mouse, then the trace of your mouse will form into the leaf of the flower based on the position and the direction of your mouse, which acts as a brush in color green. To start all of these interactions you will have to click with your mouse on the initial drawing. There is a short instruction written at the left bottom of the drawing to help the viewer understand the rule of the interaction, and the text will disappear after the viewer finish reading it and click to start.
Coding Process:
The coding process went smoothly with the help of the reference page. However, the brainstorming part and the entire process of drawing what’s in my head still took me a while to complete. It is not the easiest thing for me to come up with a decent idea and accurately calculate the position of each shape and the value of the colors. Another concern I have during the process is to decide whether I should add the instruction or a text to guide the viewer to understand the conditions before they start the interaction. My question is: Will the instructions make my drawing less interesting/interactive? With that question in mind, I still chose to include the text for a reason. Putting into the shoe of the viewer, I think the process of interacting with drawing will be smoother by knowing where and how to start it. The image on the left displays how my drawing looks like before the interaction, including the instruction.
My Code:
Link to p5 editor: https://editor.p5js.org/SarahDing/sketches/ynKnWrkaR
let a;
let b;
let c;
let d;
let e;
let f;
function setup() {
createCanvas(500, 650);
background(135, 206, 250);
a = 255;
b= 255;
c= 255;
d = 255;
e= 255;
f= 255;
}
function draw() {
//stem
strokeWeight(20);
stroke(73, 123, 52);
line(250, 360, 250, height-120);
//Ground
noStroke();
fill(171, 77, 34);
rect(0, 530, width, 120);
//Captions
fill(d, e, f);
textSize(20);
text("Read & Click to start!",20, 540, 300, 100);//start
textSize(15);
text("Press the first letter of colors!", 20, 565, 300, 100);
text("ex:'p' = pink", 20, 580, 300, 100);
text("'v' = violet", 40, 600, 300, 100);
textSize(15);
text("Draw the Leaves!", 20,620,300, 100);
//long petals
noStroke();
fill(a, b, c); // initial color
// white
if(keyIsPressed == true){
d=171;// to hide the captions
e = 77;
f= 34;
if (key == "w"){
a = 255
b= 255
c= 255
}
//Red
if (keyIsPressed == true){
if(key == "r"){
a= 208;
b = 49;
c= 45;
}
}
//Pink
if (keyIsPressed == true){
if(key == "p"){
a= 242;
b = 82;
c= 120;
}
}
//Orange
if (keyIsPressed == true){
if(key == "o"){
a= 242;
b = 103;
c= 22;
}
}
//Yellow
if (keyIsPressed == true){
if(key == "y"){
a= 250;
b = 240;
c= 52;
}
}
//Blue
if (keyIsPressed == true){
if(key == "b"){
a= 79;
b = 97;
c= 232;
}
}
//Green
if (keyIsPressed == true){
if(key == "g"){
a= 196;
b = 232;
c= 79;
}
}
//Violet
if (keyIsPressed == true){
if(key == "v"){
a= 174;
b = 109;
c= 209;
}
}
}
ellipse(156, 200, 130, 70);//petal left
ellipse(345, 200, 130, 70);//petal right
ellipse(250, 105, 70, 130);//petal up
ellipse(250, 295, 70, 130);//petal down
//round petals
fill(255, 215, 0);
ellipse(200, 150, 40, 40);//left up circle
ellipse(200, 250, 40, 40);//left down circle
ellipse(300, 150,40,40);// right up circle
ellipse(300,250, 40, 40);//right down circle
//Clouds
fill(255);
ellipse(400, 70, 60, 30);//right
ellipse(420,60, 63, 40);
ellipse(450,70,65,30);
ellipse(95, 100, 60, 30);//left
ellipse(116, 92,35,30);
ellipse(125,105, 70, 30);
//Center Carpel
fill(255, 228, 181);
ellipse(width/2, 200,60, 60);
//draw the leaves
if(mouseIsPressed){
d=171;// to hide the captions
e = 77;
f= 34;
strokeWeight(10);
stroke(73, 123, 52);
line(pmouseX, pmouseY, mouseX, mouseY)
}
}
Reflections:
- I used variables in two parts of my code, and I name them ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’. All of the variables are used for color changing: ‘a’, ‘b’, and ‘c’ are used to hold the RGB values of the petals, where the values and the color change when a specific key is pressed. The variables ‘d’, ‘e’, and ‘f’ hold the RGB values of the text on the image, specifically, they are used to hide the captions when the user click on the screen at the start of the interaction.
- To make my drawing interactive, I set two conditions in my program. First, I want the viewer/user to customize their flower through changing the color of the petals by clicking the first letter of their desired color. To do so, in the
if()function, I input the conditionkeyIsPressedequals to the booleantrue, and within the condition, I code the details of it by assigningkeyvariables that is corresponding to the first letter of the basic colors (e.g.key == "o"for the condition which the viewer press the key ‘o’ and the petals turn into orange color.). Second, I created a condition withmouseIsPressedfor the viewer to be able to draw the leaf/leaves of the flower, and to hide the “click to start” text into the color of the background. In other words, when the mouse is pressed, the text will disappear and there will be a “brush” to paint the green leaves on the initial drawing.
- The variable key contains the value of the key on the keyboard such as the letters and the numbers ‘a’, ‘b’, ‘D’, m’. On the other hand, the variable keyCode contains the special keys on the keyboard such as DELETE, TAB, SHIFT, UP ARROW, and DOWN ARROW.