Author: kap633

Nature of Code: Final Project

The Kaleidoscope: Eastern Monarch Population Migratory Pattern by Katie Pellegrino

Introduction:

For my final project, my goal was to visualize a natural system through code. Inspired by the massive annual migration of monarch butterflies, my project explores this concept by visualizing their migratory pattern, while also subtly decreasing their population in accordance with real trends of the population. The current project exists as a short visualization, simply focused on their migration north and south throughout the year, which could be used in educational demos or presentations.

However, if this were to be an installation, I’d like to focus more on the fact that the population is slowly decreasing due to deforestation, lack of milkweed, and increase in severe weather. Yet, I’d still like to make this decrease subtle, but shocking. In order to accomplish this, I’d leave the program running at its current rate, but not refresh it throughout the entirety of the exhibition (a couple of hours or more), and thus, although slowly, it would become apparent that the population was dwindling until, if you arrive late to the instillation, the piece is curiously empty of butterflies. Ideally, I’d leave the piece at that: slow, simple, yet shocking; but perhaps attach a statement to the work.

Inspiration:

While researching natural phenomena, I was first inspired by murmuration patterns of starlings. A project by Robert Hodgin explores this concept in a piece that continuously shows a fluid and beautiful murmuration of starlings flocking around a tree.

After looking into some other natural phenomena, however, I came across the monarch butterfly migration. The significant feature that stuck out to me was the fact that no single butterfly accomplishes the entire migration. Roughly, a super generation makes the journey from the north to the south in the winter to avoid the colder temperatures, then after hibernating in the winter, it takes three to four generations of butterflies to migrate back north in the summer. 

Their incredible instinct in navigation, along with the sheer number of butterflies that consistently make this journey, really inspired me so I decided to make a representation of this that both attempts to emphasize their annual generational and migratory patterns while mimicking their natural swarming movements. 

General Mechanics / Assets:

My commented code can be found here.

Since the intent of this project is to function as a tool for presentations or  visualizing this natural movement, I decided to create it using fixed dimensions. This made positioning the map, which I sketched from another image, much simpler as it would remain static on the screen.

Additionally, the program functions using two classes: targets and monarchs. 

Target Mechanics:

While the target class forms a simple ellipse object with position, its fundamental in tracking the migratory pattern. I first looked at gathering a rough understanding of their annual migratory pattern.

I then decided to map their pattern to a cycle of 1000 frames using a counter variable. Although there are probably ways of optimizing this part of the project, for simplicity, I simply moved the target object throughout the map proportionally based on the migration within this frame cycle.  

Monarch Mechanics:

In shape, the monarchs are simply double ellipses that oscillate the width to give a small effect of wings. Since each butterfly simply represents a number of butterflies (1 dot = roughly 1 million), I focused more on their movements and interactions with each other rather than their physical construction. While I initially attempted coding the monarchs’ movement using flocking, the more I watched videos of monarchs swarming, the more I realized that flocking was far too organized. 

In order to create a more chaotic movement of the butterflies on their migratory path, I used a combination of attraction and flow field. Basically, the monarchs are constantly attracted to the target and are constantly under the influence of the flow field, however, while the monarchs are outside the target’s radius, their attraction pull becomes greater and, when they are within the radius, their attraction force is reduced allowing them to flow more naturally. These adjustments are quite subtle, but create the effect that the butterflies are swarming around as they migrate following the target’s moving position.

Additionally, I mapped the monarch’s various generational changes based on the same 1000 frame cycle as before. I then change the monarch’s hue (using HSB mode) proportionally to the cycle demonstrating the difference between generations 1-4 (with generation 4 being the super generation that travels south in the winter). 

Finally, I used printed text to further clarify what the generations meant (similar to a map key). The text cycles through the 1000 frame cycle and highlights which generation is currently active. Similarly, I print the months of the year and highlight the active month to better demonstrate the monarch’s migration. 

     

Finally, as this project takes place over time, I wanted to accurately represent the population itself. According to current trends, the population is slowly decreasing due to deforestation, lack of milkweed, and increase in severe weather. While I wanted to more effectively represent the causes of such decrease in population, I at the minimum wanted to ensure accuracy by decreasing the population in accordance. Therefore, the number of monarchs visible in the sketch is relatively accurate and each dot represents 1 million butterflies, with roughly 5 dots (aka 5 million) disappearing annually. While this change is subtle and unnoticed until viewed over a number of cycles, I preferred this method because it creates a sort of shock once the population drops to a noticeably low level and it becomes evident of what’s happening. 

Although the core of my project focuses on representing the migration pattern and generational cycle, I also wanted to maintain accuracy and draw attention to the subtle population decrease.

Debug Mode:

In debug mode, I show the underlying flowfield along with the target (which was previously drawn invisibly without stroke). Furthermore, I print a reference to the mouse’s current x  & y coordinate, which facilitated where I placed the target throughout the map, along with the current size of the monarch population. 

Finally, the user is able to adjust the speed of the monarch migration, however, it only fluctuates between x0.25 and x3 speed since too fast of a migration hurts the “flowy” effect that I wish to create. The GUI also shows a bar for the population status. Although this value can be adjusted by the user, it doesn’t affect the actual sketch because it’s really meant as just a visual to the user. The bar actually simply listens to the sketch and changes based on how many monarchs are still printed on the screen. Since the annual decrease of butterflies is so subtle, I though it could be helpful to print an actual number on the screen. While the GUI is generally used for user manipulation, I used it to display the population simply because I didn’t want this number displayed within the actual sketch, as I prefer the slow subtlety of it becoming evident over time. Yet, for short presentations where its impossible to view this transformation, I thought it could be helpful to display the number somewhere off-screen. However, if this were to be an installation, I’d hide this value and simply allow the viewer to experience the slow decrease over time.

Challenges:

The biggest challenges of this project included balancing the flow field fluctuation and randommness to create the effect that I wanted for the butterfly movement. Additionally, however, it was challenging to map their migration pattern to be as accurate as possible.

However, the biggest challenge of this project, which still needs adjustment, was applying some kind of brake or friction mechanism to slow the butterflies down before they reach the target so that they don’t spread too far outside the target ellipse. I experimented with brakes, however, it didn’t quite have the effect that I was looking for. So I ended up simply restricting their velocity by applying friction if ever they were moving too quickly. However, this portion can definitely still be reviewed.

Improvements:

While this project, again, exists more as a tool, I’d like to expand it to be an instillation. For that, I’d like to add music along with a different view as a projection of the monarch movements across a few different walls to give the feeling of being surrounded by butterflies. 

However, within its current state as a tool, I’d like to add some kind of temperature indicator in addition to the illuminated months so as to better imitate the changing seasons and the root cause for such a splendid migration. 

Additionally, I’d like to update the visualization with more butterfly populations. While the current one is strictly focused on the eastern population, there are other migratory groups that would be interesting to map in conjunction. Also, as the butterflies migrate, I’d like to change their color more gradually when its time for the next generation rather than suddenly changing all of them at once. 

Finally, as stated previously, I’d like to continue exploring how I can better organize the butterflies once they reach their target destination so that they don’t overshoot too much and can maintain their relative accuracy.

Concepts / Explorations:

For this project, I explored a lot with manipulating flow fields and gained a better understanding of how multiple forces can be used in parallel with objects to create a unique effect. Additionally, this project really helped me to conceptualize how the concepts we learned throughout the semester can be translated not only into beautiful visuals, but also into representations and helpful tools.

Final Remarks:

Although this project has a rather simple construction, I feel quite satisfied that it reached the expectations that I set out in my concept presentation. I learned a lot, both about coding and about monarch butterflies, and hope to continue working on this concept to have an instillation purpose in addition to its current purpose as a learning tool. While there are certainly a number of improvements and optimizations that I’d like to address, I’m overall quite enthusiastic about the outcome!

Week 10 Assignment

Link to Assignment

Concept

For this project, I worked with what we learned about creating autonomous agents and used the vehicles class that we made in class to configure a basic game. The goal of the game is to heard all of the triangles into the boundaries of the circle.

Mechanics

The mechanics are rather simple. Essentially, the triangles repel the mouse when it is within a certain distance of them. However, they are attracted to the center of the on-screen circle when within a certain distance. Thus, while the triangles start with their own random acceleration, the user can use the mouse to direct their movement and coax them into the circle.

Improvements

Some things that I’d like to further examine with this project is exchanging the shapes for simple images (such as sheep or other animals that the user is required to heard together). Additionally, I’d like to add collision detection between the circle and the vehicle objects so there is somehow an on-screen reaction when a triangle is successfully captured.

Additionally, to make it feel more like a game, I could add an on-screen progress counter to countdown how many objects are left to be captured. Or, I could have the screen constantly producing objects and the user wins based on how many they successfully capture within a certain amount of time. 

Overall, however, I like how the vehicles maneuver the screen as if they are alive to some extent. It gives the feel of herding animals on a farm or something.

Assignment 9

Link to Assignment

Concept / Inspiration

For this homework assignment, I was inspired by our final sketch in class in which we experimented with creating a spring class. It made me think a bit of a yoyo, so I attempted to create a yoyo that uses the spring mechanism to bounce from a static point. 

Additionally, I wanted to add some other force to make it more dynamic, so I added a light wind that applies every third frame of the sketch. Furthermore, I added a simple particle class to help visualize the force of the wind on the yoyo.

Construction

This sketch includes three main classes: Ball, Wind, and Yoyo. The ball class is the basic construction for both the static top point and the structure of the yoyo that swings down. Because I want the top point to remain static, throughout the sketch it only updates and displays itself whereas the large ellipse that moves also applies the force of wind, checks collision against the top ball (so as to deflect off of it) and can use the ‘drop’ method which increases its y value while mouseIsPressed().

Meanwhile, the Yoyo class is the spring mechanism. While it is constantly displayed, it only updates when the mouse is not pressed so as to not interfere with dropping the ball. It functions using Hook’s law just as we setup the ‘Spring’ class in class.

Finally, the Wind class is a super basic class that simply draws a set of small ellipses that constantly move left to help visualize the wind force that’s applied to the ball. The number of particles remains static and they simply reset to the screen width once they hit 0. The wind in the Wind class is actually not correlated at all to the windForce applied to the ball, its simply a mechanism for visualizing the force. 

Overall, the sketch mimics a yoyo blowing in the wind. When the user presses the mouse, the yoyo extends downward and, when released, springs back up towards its central point. An issue that arises, however, is if you leave the yoyo to move left with the wind, it reaches a point where it becomes static and no longer springs away lightly from the static point as would be expected if under the influence of wind.

Final Remarks

This sketch was really helpful in practicing the concept of ‘spring’ and motion. I’d like to figure out how to make the motion more fluid and somehow allow the line to curve or bend as the ball springs rather than remain straight as its currently coded. Furthermore, once a string, weighted on one end, is dropped to its full extent, it sends a vibration through the string itself upwards towards the source. I’d like to figure out how to mimic this motion to create a more realistic yoyo.

Nature of Code: Midterm Project

Stargazer by Katie Pellegrino

Introduction:

The goal of my project was to explore creating a visually pleasing and interactive night sky display. Living in the middle of such a large city, it’s sometimes hard to find stars in the night sky, yet,  I think they’re one of the most beautiful things to gaze upon. Additionally, I think there’s a lot of power in the stories and oral history that people save within constellations. Therefore, I thought it would be cool to create a project that allows the user to draw their own constellations and also enjoy a visual display of an array of constantly redrawing constellations across a night sky.

Inspiration:

In researching constellation/star projects, I was inspired mainly by two similar projects. The first is by Akshay L. Aradhya which I especially love for how it maps a peaceful and rather dream-like night-sky visual. The mouse interaction that scatters the stars and the way they continuously redraw new constellations and star connections is beautiful and pleasing.

The second is a project by Diego Garcia. Similarly, it draws connections between stars based on their distance from each other. However, it allows the user to place the points, which afterwards, continuously are mutually attracted to each other using gravitational attraction. I really like how the user can initially place the points within the sketch.

General Mechanics / Assets:

My commented code can be found here for a contextual explanation.

Overall, my code is organized using various functions within the main sketch along with a ‘Star’ class for determining the star movement and procedure.

The main general mechanics is the star movement and oscillation. The oscillation is created with a simple adjustment to their radius as determined by a sinValue. When each star is created I assign them a random frequency which is multiplied by the frameCount, therefore, each star ‘sparkles’ at a different rate. Additionally, the stars are programmed to float around the screen with random acceleration between -0.5 and 0.5. There’s no gravity or attraction in their floating movement to create a sense of them drifting through space.

Initial Constellation State (static):

When the program first starts, it is in the static state which allows the user to draw a constellation by clicking on the screen. Every time this state is initiated, a ‘star’ array is emptied and each time the user clicks on the screen a new star point is drawn and added to the array. Additionally, each star point is connected through a connectConstellation function. Essentially, it filters through each star in the array and compares it to the one next to it and draws a line between the two.

Stargazing State (dynamic):

When the stargazing state is initiated (when the user presses ‘enter’ while in the static state), the stars saved in the temporary ‘star’ array are pushed to a constellation array. Basically, this array stores each constellation as an array of stars so that when the user returns to the static state, the constellations can be redrawn. 

Additionally, the stars are given an initial random acceleration to disperse them. I see a parallel between drawing a constellation in the sky and sending it out to the universe to live. At this point, the stars drift on their own, however, whenever they are within 100 pixels of another star they draw a line. Thus, each star that the user adds to the screen then can explore and ‘mingle’ with other stars on the screen in an ever changing connection. 

This operation, in theory, was quite simple. Just use a nested for loop to compare each star to each other star and, if they’re within a certain distance of the other, draw a line. However, while this works with a few stars on the screen, once there are a large number of stars on the screen, the complexity is too huge and the program is nearly unreadable because it is so slow.

To avoid this, I employed a regions structure which essentially creates a multidimensional array that grids the screen into 100×100 squares. For each frame of code, this array is reset and each star checks its location and is placed within a section of the array.

Therefore, when the star is checking the stars around it to see whether it should draw a line, the for loop only references the stars within each individual star’s region and the regions surrounding it.

While this process seems more complicated in the code as the regions array is updated and changing in every frame, it significantly lowers the complexity of code because the star is only concerned with stars that are within relative distance to it.

Additionally, in this mode the stars repel the mouse position. To avoid the stars accelerating too much, if their velocity is above a certain threshold, friction is applied.

Returning Constellation State (static):

When the sketch returns to the static mode (when ‘space’ is pressed while in the dynamic mode), the stars are attracted to their original location (stored in each object). Additionally, the sketch checks for when the star’s current position is within 2 pixels of its original location and, if this is true and is true for the star next to it within its array, a line is drawn between them. Thus, each constellation is gradually redrawn. 

Additionally, the temporary ‘star’ array from the start is reset so the user can draw another constellation that remains separate from the others. Again, once the user returns to dynamic mode, this array is pushed to the constellations array and saved as a new constellation.

Finally, as a final touch, I added some background music to set the tone. It took some browsing to find the correct feel, but my goal was celestial, mystical, mysterious, and fulfilling. Additionally, I added a swoosh sound effect to add emphasis for when the constellations are dispersed into the sky during the transition from static to dynamic mode along with a twinkling sound for when the stars regather from dynamic mode to static mode. Also, I added a bell ding for when each star is initially drawn/placed on the screen. All of the audio was downloaded from Zapsplat with normal usage license. Unfortunately, some of the sounds weren’t exactly as I’d envisioned them, however, I think they managed for the sketch.

Debug Mode:

My debugMode for the sketch is rather simple. It allows the user to adjust the parameters for drawing a star. The ‘grow’ adjusts the frequency of the star’s pulse while the ‘amp’ adjusts how much the star fluctuates. These are most effective in static mode, however, an issue that arises is that whenever the user adjusts the parameters, they must click on the screen and, thus, draw an unintentional star. 

However, while debug mode needs a little adjustment to function smoothly in static mode, in dynamic mode the user can adjust ‘regDist’ which changes the range of the regions. Thus, the bigger the number, the farther the star’s reach and the more other stars it will connect to. This is a simple adjustment, but can dramatically change the feel of dynamic mode.

Finally, when the user enters debug mode, it reveals the outline of the stars which better clarifies their rate and size of oscillation. Something I’d like to add in the future is a line that shows each stars acceleration within dynamic mode, however, for now the debug mode is quite straight forward.

Challenges:

The biggest challenges that I faced in this project was organizing the regions data structure and, overall, conceptualizing which code should be organized as a method within the class and which should be a function within the main sketch. Overcoming these challenges is explained in greater detail above, but, overall, through this project I gained a much better understanding and appreciation for the possibilities of code both in terms of logic, complexity, and clarity.

Improvements:

Among the many improvements I’d like to make with this project, I think the most significant are dealing with the audio and the interface. A feedback advise that I got from our presentation was to add modulation to the ding associated with placing the stars. I’d like to do this because currently the clink is rather bland and just slight modulation might add some more ‘spark’ to the stars. Additionally, currently the ‘twinkle’ effect associated with the stars returning to their initial constellation isn’t connected to the length of time that it takes for the stars to return home. So I think it’d be cleaner if it was related somehow.

Additionally, in terms of the interface, I’d like to somehow make it more user friendly. As of right now, you click to add stars, press enter to save the constellation and switch to dynamic mode, then press space to switch back to static mode. However, while these controls are pretty straight forward, there’s nothing explaining them. I’d like to make it more user-friendly, but also don’t want to lose the clean full screen display aspect of the presentation. So figuring out the best of both worlds would be ideal.

Finally, another suggestion that I received during the presentation was to allow the user to determine how big a star might be based on how long they click to place it. I really like this because it gives the user more control over the stars they create and allows them to better personalize the night sky.

Concepts / Explorations:

For this project, I explored a lot with using states or modes that dictate when the objects should react in a certain way. Additionally, using multidimensional arrays was essential both for organizing the screen into regions and in saving the constellations. Finally, I became much more comfortable with applying force and manipulating objects through oscillation. 

Final Remarks:

Overall, this project was super interesting to complete and I feel like it accomplished the mood that I set out to create. I had a lot of help on this project to which I am extremely thankful and learned a lot through the process. While there are certainly a variety of improvements and ways of further expanding this project, I’m very satisfied with the outcome and am all the more amazed by the possibilities of coding animations.

Assignment 6

Link to Assignment

Inspiration:

For this assignment, I created what might be the foundation for my midterm constellation project. This project is inspired, and based heavily on, Dynamic Constellations, by Diego Garcia. Following his code, along with referencing our code from class and from Nature of Code examples, was extremely helpful to better understanding gravitational attraction along with how to draw lines between different particles.

Concept:

Essentially, this sketch draws a particle whenever the user clicks on the screen. Each particle uses gravitational attraction to attract each other and has various randomized masses. Once the particles are within a certain distance of each other, a line is drawn between them. 

Additionally, I added a collision detection function which highlights the particles when they overlap, or ‘collide.’ 

Ideas:

For my midterm project, I really hope to work with building a constellation-like atmosphere and visual. This first step really helped me to understand some of the fundamental methods that will need to be implemented in my midterm project, however, further concepts that I’d like to explore include expansion into the 3D, not only providing collision detection but also preventing collisions, and possibly using oscillations to manipulate a smooth size change in the particles.