5000 Snowflakes
What problem did you set out to solve?
At it’s simplest, this project was all about making it snow on the Daniel and Fishers tower. The initial concept came out of an RFP for “winter” themed video works as part of the new Night Lights Denver projection mapping initiative.
As an avid snowboarder, I’ve always been fascinated with snow and can spend literal hours mesmerized as is slowly spirals down.
What is your project all about?
On a more superficial level, this project was about creating compelling content for a site-specific video mapping installation. The audience was broad; anyone attending a holiday event on the 16th street mall, and the content had to be simple enough that someone walking could quickly understand it. However, for it to be successful, it should stop people in their tracks, and make them watch a non-narrative video clip, and hopefully inspire a little surprise, delight, and somehow seem magical.
On a deeper level, this project follows closely in the tracks of Daniel Shiffman and his Nature of Code work. In the introduction, Shiffman frames the challenge perfectly and says, “We want to take a look at something that naturally occurs in our physical world, then determine how we can write code to simulate that occurrence.” This project is all about trying to capture the unpredictable and constantly changing realm of Nature, through the rigid and unforgiving language of code and mathematics. Specifically, how can we make it snow down the side of the D & F tower? However, we aren’t going for a mimetic design of snowflakes, but instead, want to discover the most magical parts of how snow falls within this context.
How did you accomplish your goals?
I accomplished my goals by creating a particle system in processing, that mimicked snow falling. The system works by generating a randomly sized white point above the top of the screen, with x and y coordinates. Gravity then gets to work and pulls the points downward, making them look as though they are falling. In order to simulate depth, gravity pulls the larger flakes of snow at a slightly faster rate, creating a faux parallax effect. In nature, larger flakes fall at a slower pace than smaller flakes, as a result of air resistance, however, in testing the system, having the bigger flakes fall faster actually looked more ‘natural’ in the context of the project. In addition to the vertical movement, the flakes appear to spiral downward as well, which is achieved by subtly mapping their horizontal movement to a Sin wave. Finally, the animation is exported as an MPEG, reformatted to fit the projector array specifications, and add a mask layer where the windows on the tower exist.
What challenges did you encounter and how did you overcome them?
- Horizontal Movement
- I struggled for a long time to get the horizontal movement of the snowflakes to look realistic. Initially, I started off by giving each flake a random horizontal velocity. This technique looked ok, but as gravity accelerated the flakes, the gravity overpowered the horizontal speed, and the flakes fell more and more vertically. Additionally, this required definition of the left and right edge, and having the flakes bounce off the sides, which also reduced some of the magic of swirling snowflakes. Ultimately, I was able to implement the horizontal movement used in this example P5 sketch, which not only created the desired swirling effect but also helped contain the flakes to the width of the tower.
- Computer Power
- The early versions of the code generated a new flake every frame and then deleted the flake from the array, once it left the bottom of the screen. This method worked ok at test resolutions, but in full resolution, my computer could not keep up with 5000+ snowflakes, especially when gravity was set very low. As a result, I refactored the code to produce a set number of snowflakes, and then, as they passed the bottom, they would be recycled to the top of the screen.
- Video Export
- I initially wrote the entire thing in Javascript, which is my most comfortable coding language. However, I ran into significant hurdles trying to export the canvas animations at 100% framerate. Unfortunately, the widely referenced library for this task appears to be broken and no longer maintained, and well beyond my skill level to troubleshoot. As a result, I ported the whole thing from P5.JS to Processing, moving from Javascript to Java.
- Coding Language
- I’m vaguely competent at Javascript. Not as much in Java. While I’ve spent a lot of time working in processing, this was the first time I had encountered Arraylists and classes in Java. While not that different from Javascript, some of the subtleties and syntax threw me off. Additionally, I’m still getting used to having to specify variable types in Java.
What worked? What didn’t?
In-person, the video looks awesome and is instantly recognizable as snow. Observing random pedestrians on the 16th St. mall, lots of people stopped to watch the clip, and take photos of the tower. Major win.
Initially, I had big plans for the snowflakes to interact with the window, snow to accumulate and fill up the tower, wind gusts to add even more variability to the snows movement, and other ideas to make the animation more dynamic. However, due to the content delivery deadline, set by Night Lights Denver, I wasn’t able to get around to many of these features, with a lot of my time being chewed up by having to rewrite the code and the arduous export process. It took approximately 45mins-1hr to export and finalize each one 1minute of content, and I ultimately delivered 10+mins of code for initial tests and 4mins of final renderings. Had I been able to export directly from P5, I may have been able to implement some of these features.
The other major success was the Kinect integration during our presentation night. I was able to create some interactivity into the system that could be controlled by moving one hand. Wherever your hand was, pushed the snowflakes out of the way, and created a little bubble. While simple, this was the first time that I was able to achieve interactivity into such a complex system.
What’s next for this project? (Future Work)
At this point, this project has reached its point of completion for me. Final files were due a few weeks ago, and it will remain on display hopefully through the new year. While there are lots of features still to explore, I would rather begin creating something new to explore those concepts.
I greatly enjoyed integrating the connect into the sketch, and I look forward to playing more with interactivity in my work for future projects.
What are your major takeaways? What did you learn / discover?
Fake it until you make it. I don’t consider myself a video artist, or that great at coding, yet I went full steam ahead into a random opportunity, and everything worked out. If you have an idea, why not pursue it and make it a reality?
As utterly cliche as it may be, I can’t help but reference this T.S. Elliot quote:
“One of the surest of tests is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different from that from which it was torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest.”
T.S. Elliot, The Sacred Wood: Essays on Poetry and Criticism.
This piece probably would not have come to fruition without Daniel Shiffman’s Nature of Code, particularly chapters one, two, and four. In addition, this episode of The Coding Train proved to be in invaluable resource, and also served as the primary reference and code starting point for this project. The live code demo was entirely based off of this code base as well.
Project proposal:
