Author: Saamia Shafqat

Inspiration:

Reference: “Seascales — Catherine Jou”. 2023. Catherine Jou. http://www.catherinejou.com/p5-piano. 

Initially, I planned to implement Object-Oriented Programming (OOP) with moving insects like butterflies in a forest setting, but it proved to be too complex, so I decided to save that idea for later. Instead, I resorted to the underwater world and created a basic animation of elliptical fish swimming across the screen. The picture I got inspired by is attached above. I added water waves to the scene and kept the sea monotone. However, I only used fish in this project and this is one area where I realized that I could improve my assignment by adding a variety of organisms.

Process:

I used two classes in my code, one for the waves and the other for the fish. For the wave class I learned about new functions in p5.js using sine to make waves. A few of these functions are the vertex(), beginShape(), endShape(). 

While trying to make a few waves move in the right direction and a few in the left direction I accidentally made them vibrate to and fro which resulted in a better and more realistic vibratory motion for the water waves. Therefore, unlike fish which intentionally move from one direction to another, the water waves follow a different movement. 

I used the same idea of wrapping that we learned in class for the fish and made sure they reappeared when they left the canvas or in other words went offscreen(). I also watched a youtube video which mentioned ‘drawingContext.shadowBlur’ to give a glow effect to the objects drawn and I used it in my draw() function to give more definition to the sketch. Other than that I made a basic ship using quad() and triangle() functions. The starry effect on the night sky is also an output of a basic for loop and the random() function together. 

Final Output:

Inspiration:

I was inspired to create a collection of 3D cubes after scrolling through a computer art magazine provided to us for ideas. I was struck by the intricate 3D cubes in the magazine. Shown below:

I decided to take on the challenge of creating my own version of the cubes but in 2D form. Although my version is less complex than the original, I added more colors to make it unique. I had a lot of fun working on this project, and I even made it more interactive by allowing the cubes to move with the mouse. I know there is still room for improvement, such as making the cubes change colors when clicked with the mouse, which I look forward to exploring in the future.

Coding Process:

To start, I utilized nested for loops to produce ellipses on the canvas, resulting in a textured appearance. I continued to utilize nested for loops for the nest-like front of the cubes, but found it challenging to apply the technique for creating shapes other than squares and rectangles on the remaining sides of the cube. As a result, I switched to using the quad() function in p5.js to create straightforward, color-filled quadrilaterals for the sides and tops of the cubes. I also made sure that changing the width /height of the canvas does not impact the cubes and used separate variables to determine the cube length to adjust in case the canvas become too big or too large for the cube size. 

For interactivity, I wanted the cubes to move with the cursor and accomplished this by utilizing the mouseX and mouseY variables to determine their positions. Initially, I thought about writing code for each cube with separate positions using the mouseX and mouseY variables. However, after creating the first two cubes, I realized that I could use the translate() function to duplicate the cube in different positions, which was much more efficient than plotting all the coordinates repeatedly for each cube.

Final Output:

Closing remarks:

I had so much fun working on this project and I’m proud of the artistic piece I created. Not only did it sharpen my skills in p5.js, but it solidified my belief that coding can be fun and not just a snooze fest lol. Looking forward to future projects and learning more about Interactive Media!

Overall Experience

For our first assignment, we were tasked with creating a self-portrait. As someone with little art skill, all I could think of was drawing a face that resembled me. I am not quite sure if I succeeded though ;D. Coding for me has always been tedious hours of writing code and handling data files but the artistry of this assignment was the complete opposite. Playing around with basic shapes and putting them together into a face, also accessorizing was really fun.  

Process and Progress

I started with an elliptical shape for my face and then added two more for the eyes. To portray my brows, I discovered that simple lines with a strokeWeight of 5 produced the appropriate thickness. It was the placement of eyelashes that I first realized that finding coordinates for drawing a simple line was not as easy as it seemed and I looked up for coordinates of p5.js. https://editor.p5js.org/prewiredonline/sketches/mA6XRFf-G. This is where I got what I was looking for and it eased my way through the rest of the portrait. I think the turning point of my sketch was this stage where the eyelashes were in the making and the coordinate plotting made it easier for me:

This is how my final portrait looks like: 

Reflection

I am pleased with my initial p5.js project, but I see room for improvement by incorporating animations into my self-portrait. I look forward to experimenting with these elements in my future assignments. This project was a great step for me in the Interactive Media world and I can’t wait to tackle more cool interactive projects in the future!