Link to the final project:
https://editor.p5js.org/jperry/full/hzTTN9m7d
This project is a recreation of a photo I took of my dorm bed with my stuffed toys (right). I chose this photo because although it seems slightly challenging, I felt the shapes of the toys were very simple once broken down into pieces. Before beginning to code the image, I created a quick sketch of the photo (left). This sketch seems a little complex, but to me the process of the drawing made me see the shapes in the image more clearly. I also was able to use the sketch to plan the amount of detail I would be able to include in the code, and at what point it would become too much.
Important aspects of my code relate to the image of the bear as well as the smile on the octopus toy. I spent an especially long time working on the bear, because it has so many parts to it. I also put a lot of time into creating the face of the octopus because the code for creating an arc was exceptionally difficult.
//bear
fill(156,99,1);
ellipse(255,220,120,110);
rect(210,260,89,110,20);
ellipse(285,290,110,50);
ellipse(220,292,110,50);
rect(210,290,45,110,20);
rect(260,290,45,110,20);
circle(215,183,40);
circle(300,183,40);
fill(206,202,187);
circle(257,310,45);
circle(263,230,15);
circle(250,230,15);
fill(9,10,6);
circle(257,226,13);
circle(277,214,13);
circle(235,214,13);
//mouth
let p1 = { x: 150, y:240};
let p2 = { x: 158, y:275};
let p3 = { x: 142, y:275};
let p4 = {x: 150, y:220};
noFill();
stroke (0);
curve(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y,p4.x,p4.y)
In order to get the final product of the mouth, I read the reference pages on the p5.js website, then had to experiment with the points to make the mouth the correct shape. I then had an issue with the color. I struggled to get the line to not be a filled in arc but instead just a curved line to use as the smile. I found the noFill command through the reference website as well.
Reflections:
I preferred using the reference page because to me, having the examples and understanding of the way the code is meant to run is less anxiety inducing. I used some exploratory programming, but mostly in the construction of the shapes used. Being a beginner, exploratory programming is a little daunting, but I would like to try it out more and more as I become more familiar with the program. I think drawing on paper was easier in most ways. Drawing on paper is very fluid, the shapes you make are based on the movement of your own hand. Translating that image through the computer is significantly harder. It frustrated me in some ways because I knew the shape I wanted to make and where I wanted to place it, but it was so difficult to tell the computer what I wanted to be done. As for the program, using code to create the image does have its advantages. I often struggle with getting the perfect circle or perfect rectangle when using my own hands. With the program, I did not have to worry about that. Especially since my photo was comprised of many circles, it was much easier to draw those circles with the code instead of erasing and redrawing the same circle multiple times.