Author: Abigail_Mata-Hernandez

Assignment 2: Art with Loops

Concept

For this assignment, I wanted to a create a simple piece of art with the emphasis of my understanding of it. Last time I got ahead of myself and was trying to do so much that I ended up doing very little. For inspiration I used a traffic light for no particular reason. It’s simple and I knew I at least had to use ellipse() and rect() if I wanted. I also knew I had to work with the colors black,  green, red, and yellow. I looked up images for inspiration and found photographs of traffic lights with long exposure and decided to do a very simplified version. Below is the image I used for inspiration.

Moody Traffic Lights: How To Make Something Beautiful From Nothing

Initially, I was very confused with how loops worked. I watched a lot of YouTube videos, mainly from The Coding Train, and after I grasped the concept, I started building my for loop first. I copied the loop two more times to represent the three lights in the traffic light. I also used the createColorPicker() DOM from the p5.js reference page to randomize the colors and added a frame rate to try and visualize the exposure aspect.

for (let ellipseX = 20; ellipseX < 400; ellipseX += 25) {
   ellipse(ellipseX, 200, 70)

 

Future Improvements

I was satisfied with my understanding of the assignment, loops, and the overall art piece. However, for next time I would like to experiment and include more of what we have learned from previous lessons and create my own functions.

 

 

 

 

 

 

 

 

 

Assignment 1 Self-Portrait

Concept

For my self-portrait I decided to attempt to draw myself doing something that I love: going on walks to distract myself from the real world and think about life. I was pretty ambitious at first considering this is my first time learning this type of material and my first time coding. At first, I imagined my drawing to be very complex. I wanted to try and incorporate a lot of movement to capture the act of walking, detail in terms of shapes and the setting, and a lot of color. I imagined incorporating nature, interaction, and even aspects of Chicago such as the skyline since that’s where I am from and walking around Chicago is one of my favorite things to do. Sadly, all of that gradually changed as I began to work on the drawing, and the drawing became much more simpler than I imagined.

Code Highlight

Using the p5.js references I was able to create my code and I was also able to learn how to use rotation and translation for a “moving” arm which is shown here.

//arm
  
  fill(210, 180, 140);
  rotate(radians(20));
  translate(90, -50);
  rect(110, 290, 50, 10,10);

 

Embedded Sketch

Reflection & Future Directions

Though I like the outcome of my drawing, I think it could have used more movement considering my goal was to capture the act of walking. Even though it does look like a simple drawing, it was still rather difficult for me and it took me a lot of time to grasp the basics of the principles that we have learned so far.  I definitely learned of at least one approach that I should not take to complete these assignments. In the future, I want to play around with more functions and find a way to make things easier for myself, possible take more time to watch tutorials and try different codes for the same outcome to find what best works for me. Overall, I did enjoy the challenge and I am excited to continue learning as well as challenging myself. I would possibly like to in the end, try and recreate this assignment with the initial image that I had for it.