Video: (disclaimer: screen shooting makes the sketch really slow, the speed of the fireflies are actually faster than shown)
For my final I wanted to simulate a system of fireflies. This was a very vague idea in the beginning, but based on the feedback I received during my final project idea presentation, I also wanted to incorporate what some of my peers suggested into the final, such as the idea of creating a forest of trees as an environmental aspect for the fireflies.
I used two separate sketches for the fireflies, and the trees to make sure that the separate components were working on their own first. The fireflies are adapted from the flocking system we did in class, and I added a slight trail behind the firefly by changing the alpha of the background, and added a “blinking” effect by attaching a sin wave to the radius of the ellipse that made up the firefly. I also added a bigger and more transparent ellipse to create a glow for the firefly.
For the trees, I adapted the fractal tree sketch we created in class. I created five layers of trees with different branch length, color, and position. By creating taller and thicker trees in lower down on the canvas, shorter and thinner trees higher up, this creates an illusion of depth on a flat canvas. I then added a gradient, and adjusted the color of the trees. Since the stroke caps of the trees are rounded, this was very distracting and “un-tree” like, but this problem was solved more or less by blending the tree color into the background gradient, which help disguise the round stroke cap. I consulted this image (below) from the book Foundations of Digital Art and Design by Xtine Burrough.
Although it was relatively straightforward to create these two separate components, combining the two systems was a challenge for me. In order to create an environment that looked realistic, I would need to create “depth”, and aside from graphically drawing the trees to fake depth, depth in a 2d sketch can be faked by the order of which objects are drawn on the screen.
I had three issues: how to make sure that creating fractal trees in the draw loop does not crash everything/make the sketch really slow, how to sort the arrays to be ordered by the random depthValue assigned in the constructor, and how to draw the different elements of two arrays according to the order that I wanted (for example, the trees’ depthValue would be tied to the shape of the tree, while the fireflies’ depthValue would be random).
- I used pGraphic image buffers to store each “layer” of trees, and they was displayed onto the sketch as images.
- My first attempt at displaying things according to depth was really messy and bulky. Since I knew what the tree depthValues were (I assigned them to be 1/10 of their branch length), I looped through the firefly array in multiple places in the draw loop, and only displayed them if their depthValue were within a certain range. Although this worked, and created the effect I wanted, the code was messy. Moon suggested that I use polymorphism and inheritance and both trees and fireflies could be in the same array. Some issues I encountered were:
- I named my parent object “Object,” which clashed with p5’s Object class. Changed the name to depthObject instead.
- I did not call super() in the constructor of firefly and trees.
- Although the tree array had only one function to display, the firefly object had update(), checkEdges(), etc… before display(), but the display function had to be consistent between children and parent. Moon helped me with this problem by suggesting that I could create an array of boids, where boids[i] = depthObject[i] when creating fireflies. This creates a path that links to the depthObject, and I could do update(), checkEdges() in the boids array, but the changes would be applied to the objects and displayed in depthObject array.
- Changed the gradient from black to white, to from black to blue to create a nighttime effect.
- Instead of circles, I used an image for the fireflies.
- Adding an effect where the area is dark, and lights up/is shown around the firefly.
- Add more interactivity with user. However, since I was trying to simulate an environment, I don’t know how I could add interactivity on screen that feels natural and organic.