Project Title: growing
Link to Project:
https://editor.p5js.org/jennaasun/sketches/jcVhuNM7F
Brief Description and Concept:
Description
In my work you see a face in front of the sun as a backdrop. Growing from my eye is a flower; around it are small sprouts of plants yet to grow and bloom. I chose to depict roots below the surface that you can’t see. The repetitive vertical blue lines at the top is rain.
Concept
I knew that I wanted to draw a side profile when I first started brainstorming a design. I came across an image online that I used for inspiration, as I felt the perspective would be more interesting than a typical side profile.
I also wanted to incorporate the sun as I felt it would be a good starting point for the code, and it also incorporates my last name. Growth was a theme I wanted to depict here: I felt like creating a self portrait of myself would need to evoke how ephemeral stages of life is, and how I always feel like/hope I am growing. Originally I wanted the flower to be a tree instead, but I wasn’t sure how to code that. Adding the rain was a last minute decision, but I like how it is both a source of life for the flowers and can also mean difficult/dark times and how growth persists through that. I also felt that the color palette would be important to contribute to a harmonious image, so I used the color hex palette website to find specific colors I wanted to use and colors that paired well with each other.
Demo/Visual Documentation:
Final Work
Coding Process
I started by creating a 400 x 300 canvas. For the background color I used a deep rust orange color. The first shapes I coded were 2 ellipses to form the sun. I pulled the color of the inner ellipse from the below work by Josef Albers included in our Intro to p5.js slideshow.
Next, to begin coding my face, I started with adding one ellipse and one triangle in the color black (0, 0, 0) to form hair. To build my face and neck, I used an ellipse and a rectangle of the same skin color (244, 197, 142). I added the bangs last minute–the code comes after the shapes used for my face, as in this case the shapes forming the bangs had to show up on top of the ellipse used for my face. I initially wanted to use two triangles to form bangs with a middle part, but I was apprehensive about my ability to manipulate the position of the triangles well enough (in relation to the position of the other shapes I already coded). So instead, I used one rectangle for the bangs, and added another triangle of the same skin color I used on top of that rectangle. The effect was that it formed a cutout.
The eye was what I had the most trouble with, and is the most complex part of my code. I realized that coding curves was much harder than I expected and that I need practice. For the eye I ended up using the example given in the p5.js reference under “curveTangent(),” as it looked like a closed eye with eyelashes. The code given in the reference is as follows:
noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65);
let steps = 6;
for (let i = 0; i <= steps; i++) {
let t = i / steps;
let x = curvePoint(5, 73, 73, 15, t);
let y = curvePoint(26, 24, 61, 65, t);
//ellipse(x, y, 5, 5);
let tx = curveTangent(5, 73, 73, 15, t);
let ty = curveTangent(26, 24, 61, 65, t);
let a = atan2(ty, tx);
a -= PI / 2.0;
line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
}
I adjusted the code to position it over the ellipse that formed the face. I added 80 (+80) to all x coordinates in the curve to shift it 80 units to the right. Adding 220 (+220) and subtracting 40 (-40) shifted the curve upwards 180 units.
For awhile, I could not get the eye to show up at all. Even after making sure this code block was written after the code for the shapes, to ensure that the eye wasn’t hidden below the face or hair, it wouldn’t show up. I don’t remember exactly how I fixed it, but I know that coding it in black– stroke(0,0,0), was one thing that helped.
The next things I coded were the stems and roots using lines. This was fairly simple, as I could look directly at the x values and y values and manipulate them in the code for the next lines to connect them together. For example, I first coded one long line for one root .
line(162, 225, 314, 225);
This is a horizontal line starting at x-coordinate 162 and extending to x-coordinate 314. To code another root stemming from it, but starting somewhere along this line, I just added to the x1 coordinate. This line was as follows:
line(180, 225, 230, 250);
For the flower, I first coded the petals using 7 ellipses almost stacked on top of each other. Ideally I would’ve liked the flower to be symmetrical, but I didn’t know how to code that.
Reflection/Lessons Learned
One of the things I challenged myself to do while coding this was to really be attentive and calculate the coordinates of where I wanted a shape, line, or point to be. Before this project, I had the habit of just arbitrarily plugging in random numbers, running it, seeing where it was positioned on the canvas, and adjusting the values I used based on that. With this project, even though it was more time consuming, I took note of the coordinates of each different 2D shape and tried to visualize them on a graph in my head before trying to code. I think physically doing this on paper next time would probably be useful.
I am not entirely satisfied with this work as, one, I realized I didn’t know how to efficiently code anything beyond the primitive shapes–which led to a not very visually interesting or detailed work, and two, I had to use the reference for the eye. I need to learn and practice coding complex and abstract shapes of my own design.
Next time I would add more details to the roots–I ended up stopping because it felt tedious. However right now it kind of creates the effect of cracks and broken porcelain, which I like too.
Reflection Prompts
- Did you prefer exploratory programming, or using the reference
I referred to the reference less often than I expected–I explored it but felt that some of the programming was either not applicable to what I was doing or beyond what I understood. It was definitely integral to coding the eye though. What I did do was constantly reference back to the slides that had the code templates for 2d shapes. I think that as I’m just starting to code now, I need some kind of reference more often than not.
- Why? Could you imagine a situation where you would use the other technique?
I think that to freely explore and code on my own, I’d need to have at least some foundational code memorized first.
- In which ways (if any) was drawing on a piece of paper (as we did in our exercise) easier than writing the program?
Throughout the entire process of coding, I kept thinking about how I wish I could just hand draw, and how much easier that is. I felt constantly limited by the fact that I couldn’t bring to life the image in my head exactly as it is because I didn’t know how to tell the computer to do so in a way that it will understand.
- In which ways (if any) is writing the program easier than drawing on the piece of paper?
Now that I think about it, drawing on a piece of paper is difficult in its own way, as its also fully possible that I can’t produce the image I have in my head–I’m still limited by my drawing and artistic ability.
Sources
Peretti, Sibyl. I search in Snow. 2014. Kiln formed glass, engraved, silvered, painted paper. 10 in. x 20 in. Callan Contemporary, New Orleans. https://www.callancontemporary.com/exhibitions/i-search-in-snow/selected-works?view=slider#8.
