Week 2: Animation, Variables

Link: https://editor.p5js.org/nickgran321/sketches/dcMAZeHv3
Code: https://github.com/nickgran321/Nick-Grant/blob/master/Computational%20Media%20Week%202:%20Animation%20and%20Variables

For the second week of computational media, I created a few elements. The elements are either controlled by a mouse, change over time independently of the mouse, or are different each time the sketch is run. I chose to not create too many variables because I wanted to thoroughly understand how each one operates.

At one point I created ten variables that changed shape depending on the movement of my mouse, but I preferred a more simplistic version of my demonstration.

The rectangle in my picture is controlled by the mouse, which is expressed by mouseX and mouseY. I experimented with an if statement, which is demonstrated by if (mouseIsPressed). A circle will appear within the moving circle in my demonstration. Additionally when the mouse is clicked, several circles will appear in a random fashion in my sketch. I am unsure, however, how to slow their speed.

Furthermore, in class I asked about how two elements may be controlled together. When the mouse moves, the background color changes with my variable movingcircle1. Two ellipses will also change shape depending on the placement of the mouse.

An ellipse passes through the middle of my screen with a frameCount of 0+. To remove the use of hard numbers, I divided my length and width. I matched the frameCount within my if statement for a hidden circle, which created a very unique aspect to my demonstration.

For each component of my demonstration, I added notes with //. The notes allowed for a much more organized and seamless coding experience.

I struggled the most with creating random ellipses. Initially each time the sketch ran, two circles appeared only in a diagonal fashion. An ellipse never appeared in the top right or bottom left corners, but I then realized that ellipse(movingcircle1, movingcircle1, mouseX, mouseY) should be ellipse(movingcircle1, movingcircle2, mouseX, mouseY) and that ellipse(movingcircle2, movingcircle2, mouseX, mouseY) should be ellipse(movingcircle2, movingcircle1, mouseX, mouseY). In doing so, I allowed the x and y coordinates of my ellipses to appear at any point randomly in my sketch.

One moving circle equals random(width) and another equals random(height). I noticed that width and height are the same as the number 500 so I used those names to remove hard numbers in my system.

The colors in my demonstration are fascinating. Most of the shapes are a random flickering color. By assigning a random number to the RBG model and employing one fill mode for most of the shapes, my sketch became very mesmerizing to watch.

Related Post