Category: Spring 2022

For this assignment, I took inspiration from the shape and motion of the slime block in Minecraft.

The main features I wanted to replicate were the bouncing motions, the size change, and the transparency. I also added click input just to make the art more interactive within the p5js context. My first iteration did not have any class or array and just had the basic idea laid out, starting with transparent squares that are random in size, being placed in repetition following the mouse xy location while pressed.
Going from there, I had to make a class for my rectangle which would have a constructor that holds all the features I want to attribute to my rectangles such as: size, color, speed, location and gravity.

To recreate the bouncing motion, I incorporated the loop from this code. I then arranged each function within my class (display and move) to instantiate the bouncing movement and rectangle display within each rectangle that is created going through my array rectangles [].
After understanding the basics of organizing my class and functions to create the bouncing outcome I was looking for, I decided to play with the gravity variable and see what would happen if I used noise instead.

For my last iteration, I replaced gravity with noise which visually doesn’t make much of a difference. However, at a closer look, the bounce of the rectangles in relation to each other look much more organic in comparison to using gravity, whilst still being random as well.

I decided to make something related to one of my favourite shows of all time, Avatar the Last Airbender. I wanted to show the character Appa soaring through the sky past clouds. I thought the code that the professor showed us in class would aid me in making the clouds pass by at random speeds so I took inspiration from what the professor showed us in class. I also tried to use the image() function to add a png of Appa and I am happy with the result.

I was very excited to go to the Coldplay concert next Tuesday, and I did not get tickets because of an error page. Despite being very disappointed, I decided to turn this feeling into inspiration for this week’s assignment of generative art. Basing myself on the class activities and A Sky Full of Stars, one of my favorite song from the band, I decided to portray a sky where the stars were falling into the ground. This scene would represent the crumbling dreams of seeing my favorite band on stage. Unlike previous assignments, I did not have a clear vision of what I wanted to obtain at the beginning, and thus, experienced a very different creative process.

I began by drawing a simple circle moving through the screen from left to right as a shooting stars would. I then, created a class for “Star” and an array of stars in order to give them all a random position. This is the point where the art became generative, as every frame was determined by the random parameters of height.

 

 

 

 

At this point, I spent a long time making sure elements fit together in a nice aesthetic. I didn’t like how things looked so I attempted for a while to replace the circle for a star shape. Nevertheless this implied having a for function inside a class, and I am unsure if this is possible, but I could not make it work. After few hours of frustration, I gave up on the idea of star shapes & decided to add interactivity to the piece. This would allow me to use different functions within the class, make my artwork more interesting, and provide an outlet for me and the user to express their frustration through the click of the mouse. I also decided to alter the movement of the objects from top to bottom, in order to create the sensation of falling stars.

For the interactivity I created another array of orange stars. The original array would shift slightly to the right or left upon clicking, and the orange array would vary sizes randomly. This created a much more cohesive artwork with a chaotic feeling that I also intended to convey.

Albeit a bit confusing at the beginning, working with OOP forced me to further organize my code, my approach to it, and opened a wide array of possibilities. I really appreciate not having to copy and paste code multiple times for multiple objects, and how I was forced to used only variables for the code to work.

This is my final result. Make sure to click multiple times 🙂

Here’s the failed attempt from class’ activity. Sorry for the inconvenience.

I am very happy with the result, especially because of the power the user has in determining the output. The more clicked, the more chaotic the piece is. Nevertheless, I spent more time than I would have liked figuring out the star shape (which did not work). In the future I would like to figure out how to do this, and include interaction in between particles.

 

 

For this Assignment i wanted to create something simple but dynamic as well so I came up with the idea of particles interacting and creating a network.

I started by creating an array to hold particles as each objects and then pushed each new particle instance inside the array. The class for particle stored the position of each particle as coordinates inside a vector which would be initialized by random spawn positions on the canvas. It also had a random velocity so that some particles would move faster.

The class had an update method that allowed the position to be updates according to its respective velocity. It also called another method called the edges method which did all the error checking to ensure that the particle stayed on the canvas and bounced off the edge.

The draw class was simple a circle with a fill and random color with no stroke. My most important method was the check particle which uses the distance dist() function to check if there are any other particles within a certain distance and if so a line is drawn.

The concept of this was to visualize how gas particles would be able to behave in a certain container. A thing that i wanted to achieve was to somehow incorporate collision detection to show how they would be able to collide with each other and bounce off.

I also tried to use the map feature by following Dan Shiffman’s video but I couldn’t figure out how differently i could make use of it in my sketch.

Initially I hard time coming up with ideas of what I wanted to do for this project. Sitting in my friend’s room, who is obsessed with space, I got inspired to make something space related. In addition, I wanted to experiment with inserting images into p5.js (using the ‘preload’ function)- this was definitely the most time consuming and trickiest part. I ended up realizing that the images I selected from google should actually have a transparent background, many of them seem like they do but it’s actually just a white and grey grid. So initially this is how the inserts would look like –

Once I tackled this issue, by downloading the images directly from websites, I inserted more images such as the rocket (that I wanted to launch). I figured out how to make more than one cloud appear (and control the size, position and lastly the movement of each one). I was then able to control the speed at which the clouds and rocket move – using ‘posXorY +=’ a value. I also played around with shapes (ellipses) but ended up not using them.

I then added the background of the sky as well as the little astronaut which is controlled by the curser (by inserting ‘mouseX, mouseY; into the line of code) which is there just for fun.

Another issue I ran into was with making the clouds reappear onto the screen in a loop form. This took me the longest to figure out.

I made a class which included a constructor which had the different features of my clouds such as the x and y positions, the speed at which they are moving and their width and heights. Then I was able to run this and move the clouds the way I wanted.

In the future, I’d like to make a game out of this concept. Also, I’d like to use arrays in my code – maybe for the clouds. Next time I would make this outer space so I could include shooting stars and different planets floating around.

This is the final outcome.

Since I have already created artwork in OOP for the last assignment, I decided to modify my artwork so that it is more user-interactive. I modified the random spawn of the splashes into click-to-splash. This gives a visual feedback to users clicking the screen.

This is implemented by using the mousePressed() function. This function adds an extra object to my object array whenever the mouse is pressed.

Click the screen below

After checking that the OOP implementation is working properly, I decided to apply the same method to a very game-like work. In this work, made in a first-person shooter game theme, the bullets are implemented in object-oriented programming using an array.

Click to shoot, move your mouse to change the direction

I honestly could not generate artwork from scratch. Thus, I got inspired after watching Daniel Shiffman’s coding challenge of creating a starfield. He used OOP in the example, so I decided to use his sketch. I watched the video till the end, while also enhancing my understanding of implementing OOP. (source: https://www.youtube.com/watch?v=17WoOqgXsRM&t=581s)

The interesting fact is that I have a fear of being stung by bees. Perhaps, this is the reason why I got inspired to create them. My parents would have always told me that I need to freeze at the sight of flying bees, otherwise they might get angry. I interpreted this idea into the code: when you move the mouse, more crazy bees are generated.

Throughout the process, I also learned how to embed an image into the code, which I needed to create bees.

All in all, I wish I could reach that level of creating beautiful abstract and complicated artworks.

Foundation

I set out to make an interactive design  based on  music bars, like those shown in the image below. OOP was a huge help, as this was the first assignment design I am satisfied with having created. I envisioned 2 sets of music bars sideways (from the right and left) widening and shortening depending on the position of the mouse. While at first I set out for a blocky design, my final product ended up being more smooth and wave-like.

Implementation

After familiarising myself with the OOP syntax, I worked on a class to make a rectangle whose width increases when the mouse moves closer to it. The first problem I faced was trying to connect the mouse movement to the bar width. I overcame the obstacle by first calculating the distance between the base of the bar and mouse position by using the dist() function. I then used this to map the fluctuating value onto the bar width. This can be seen in the updateBar() function in the LeftBar class and RightBar class.

I spent the bulk of my time perfecting this so that when I do produce many bars using a ‘for’ loop, the bars widths would gradually increase and decrease in relation to mouse and eachother. The closer the mouse is to the base of a bar, the longer its width is.

I made the bar height a global variable on line 2 so that it is easy to adjust the smoothness of the curve. I chose to keep it small (1 pixel), so that the movements appear smooth and satisfying. This smoothness reminded me of lava lamps, so I went ahead and coded fluctuating colors that change based the same class variable, “distance”, that I used in the maping function.

So far all my code is object oriented. I didn’t want to leave the  middle of my design empy so I added some spinning squares that I feel gives the piece its hypnotic nature. I found it quicker and easier to just copy and paste the code I wrote for one square over and over with small adjustments rather than object orienting this simple part, so that’s what I did. This may be why my code is longer than it needs to be. I gave the larger squares a lower saturation and brighness value to give the piece some depth.

Conclusion

OOP made my code so much more readible and organised. Furthermore, I gained more control over my art piece and am more confident to code my vision onto the digital canvas.

Inspiration/Idea

I realized that the most challenging aspect of this assignment is not coding, but coming up with an idea for the assignment. For this assignment, I was inspired by the following sketch that the Professor made in class:

I intended to make “Replicating Balls”: every time the ball collides with the edge of the canvas, it would spawn a new ball that goes off in a random direction. Additionally, every ball would have an “energy” level, so that it cannot spawn balls infinitely. This energy level would be apparent by the transparency of the ball: the more transparent it is, the less energy it has, and eventually it cannot replicate.

Problems

I could have used this idea to illustrate in the simplest way how biological cells replicate. However, I ran into a problem that would not allow the replicated ball to have the same initial coordinates as the origin ball. This is because if the coordinates of the new ball were on the edge, it would infinitely spawn new balls causing the program to crash. This is why I ended up making the new balls spawn randomly across the canvas.

Implementation

I made a class Circ for every circle. The update() function update the position of every circle each time it is called and the replicate() function checks if the balls are in contact with the edges – a new ball is spawned randomly if there is such contact. Finally, the run() function calls both the update() and replicate() functions in the draw loop. I made an array of circles to contain every instance of the Circ object, and called the run() function for every circle in this array. I also randomly choose the colors for the balls. The background is a black rectangle with a high transparency so that the balls are seen leaving trails. The balls have high transparency to achieve the trail effect.  I increase the transparency of every ball every time it bounces off the edges until at one point, the transparency is so low that it cannot replicate any further (I do this using the if statements in the replicate() function). Here is the sketch and the code:

 

 

 

I wanted to start with making something simple and making it more complicated gradually as I understood the code. I used the professor’s example in class as kind of a reference point to help me throughout the process. I started with making one cloud and then making it move. I had trouble representing the cloud as an actual cloud and not just an ellipse, my code for the cloud contained 3 ellipses, therefore, it was hard for me to combine them as one.

I fixed the cloud shape by adding and subtracting values from the x and y positions,. I added more clouds. I think, however, it would have been smarter if I used an array instead of creating more clouds.