Assignment 2: Interactive Narrative

https://editor.p5js.org/ltomlinson/sketches/3yY82TBxQ

For the second assignment, a sketch that uses variables to update a narrative through user interaction, I programmed a fish that follows the user’s mouse.

After creating a Fish object and creating a draw function for it, I first created a vector that tracks location of the fish in the setup function. Then, in an update function for the Fish object, I calculated the both the angle and the distance between the fish object and the mouse. The angle variable allows the fish to rotate and the distance, along with the vectors for locations of both the fish and the mouse, allow the fish’s x and y variables to constantly update, moving it closer to the mouse.

I then created the perpetually rising bubbles by first creating a Bubble object, and then a bubbles array. In the setup function, there is a for loop that adds new bubble objects with randomly generated attributes (like starting position, size, movement speed), and in the draw function there is a for loop that iterates through the bubbles array, drawing each bubble and updating its y position according to its randomly assigned speed. Once the bubble is off screen, it’s y value is then reset, and its attributes randomized, giving the appearance of infinite random bubbles

Check it out here.

http://pixelsfighting.com/

For the second part of the assignment, to find an example of web based code driven media that uses user interaction to tell a compelling story, I chose pixelsfighting.com. Upon loading the page, two colors are randomly generated within the canvas in the middle of the screen. Pixels of each color then algorithmically change based on their proximity to other pixels, resulting in a perpetual battle for dominance. Each visit to the website is unique, both in the colors that are generated and in the battles that unfold.