Author: Khadija Khalid

Concept

For this assignment, I initially started with the idea of incorporating the polar rose (picture shown below) into the art work. It is a mathematical equation that forms a curve shaped like a flower. With the use of sin and cos, it creates varying number of petals of the flower. However, when I was experimenting with different variables for the number of petals and I chose 4 petals, it resembled more of a butterfly which prompted me to create an artwork about butterflies.

Code

It took me some time to fully understand the noise() function but after getting that sorted, I wanted to make the wings flap. This proved to be quite difficult to understand because I was dealing with two similar codes with different parameters for the upper and lower wings. Through experimenting with x-coordinate and y-coordinate values in the noise function, I was able to achieve the flapping effect by incrementing the y-coordinate through noise which caused a gradual change in the curve of the wings, making it seem as if they’re flapping. I think experimenting with the code in three dimensions for the particles falling was also a very interesting journey. I was particularly happy with the falling effect from the particles.

The butterflies appear randomly on the canvas and if you tap the canvas, a new butterfly appears with a different speed of flapping. Pressing on the same spot creates an almost layered butterfly effect which looks good.

Reflection

I think this assignment took me a lot of time to complete because I was not familiar with the noise() function and I learnt about it more through experimentation than simply reading the topic. I was able to interact with map() function and use classes for both the butterflies and the particles. Despite the prolonged time I spent for this assignment, I am happy with the outcome as I managed to make the different components of the art piece work together, such as random flapping speed, particles, song, and new butterflies when mouse is clicked. 

 

Concept

For this assignment I wanted to include a couple of new elements such as adding sound and user interactivity, all of which I could not incorporate into the previous assignment.

I was interested in the artwork of an anonymous artist called “Banksy” who was known for his street art. He shredded one of his own art pieces in front of an auction house full of people right after it was bought and I have based my artwork on this.  This is his artwork after he had shredded it:

I did not have any particular art concept in mind but I knew I wanted to experiment with iridescent colors and add some sort of shredding effect as he did with his work. So I started off by creating an abstract iridescent element by using moving and color changing shapes. While experimenting with different color effects for the shapes, I came across the blendMode() which alters the colors displayed on the screen by either making them darker or lighter. By passing the argument “BURN” through this function, I was able to achieve this effect of fading/burning of the different colors and shapes into all black as the function increases contrast and makes the darker colors more prominent. I also added the sound of a paper shredder to add that effect of burning/fading, similar to what Banksy did.

 

Reflection

I think I learnt a lot of new features of p5.js through this assignment as I experimented with loops and color features as well as sound. I am happy with the fact that I was able to make the sound and burning effect work. For future projects, I would like to make use of “rotate()” and “translate()” because I tried using them in this assignment but I was not able to make it work. 

 

As someone who has only ever coded in CS assignments involving complex and detailed task requirements, this particular assignment gave me freedom to explore all kinds of possibilities when it came to creating a self-portrait using shapes and lines through code. I was initially confused on how to add details using only shapes but as I experimented with different sketches, it started to make more sense.

Process

I had drawn a line art sketch to get an idea of the different shapes I will have to use and drew them on a grid so that it’s easier for me to translate that into code. 

I used a circle and bezier curve to create the face shape and the use of control points for the curve proved to be the biggest learning point for me in this assignment. I used the bezier curve in almost every element, from face shape to eyebrows and shadows, and it was interesting when tweaking the control points along the x or y axis would create the effect I wanted. 

I also learnt how to use the translate() and rotate() functions, which were initially tricky to understand. I used them to locate the blush ellipses because I wanted them at an angle. It took me some time to realize that using these two functions causes all the elements after them to be relocated and so I tried to use them at the very end of the code. 

As for the background, I wanted some sort of movement in the portrait so I created clouds and incremented(or decreased for the second one) their x coordinates to depict movement from one end to another.

Reflection

I really enjoyed working on this assignment and I think I was able to grasp the basics of p5.js . However, I do believe there is a lot left to experiment with and I would like to do so in the upcoming assignments. I think I could have done better in this assignment by adding more interactivity through either clicking on the canvas or with the cursor hovering on it. I would love to try similar things and introduce more interactivity in my next assignments.