Assignment 3: Functions, Arrays, and OOP

Sketch

Concept

The idea for this sketch came to me after recently watching the animated film “Grave of the Fireflies” and I decided to make a sketch with fireflies that move in random directions. To imitate actual firefly behavior, I made them fly away when you bring the cursor closer to them, just like how they avoid human touch. I always thought of fireflies as truly magical creatures, so this idea felt the closest to me.

Code Highlight

 this.transp = random(50, 255);
 this.fadeSpeed = random(1, 3);

this.transp += this.fadeSpeed;
    if (this.transp > 255 || this.transp < 50) {
      this.fadeSpeed *= -1;

The most interesting part of this code is the fading fireflies effect. This part creates the pulsing fade effect for each firefly using two values, transp and fadeSpeed. When a firefly is created, transp starts as a random value between 50 and 255, which sets how visible the firefly looks at first. fadeSpeed starts as a random value between 1 and 3, which sets how fast the firefly light fades. Every frame, fadeSpeed is added to transp, making it slowly rise or fall. Once transp goes above 255 or below 50, the fadeSpeed flips direction so it fades back the other way.

Also, a problem I ran into was when the center of a firefly’s circle reached the edge of the canvas, it would just disappear and teleport straight to the opposite side, which looked abrupt and ruined the whole sketch. To fix this, I adjusted the restart function to give the firefly a small buffer of 14 pixels past the edge before it teleported to the other side.

restart() {
    if (this.x > width+14) {
      this.x = 0-14;
    }
    if (this.x < 0-14) {
      this.x = width+14;
    }
    if (this.y > height+14) {
      this.y = 0-14;
    }
    if (this.y < 0-14) {
      this.y = height+14;
    }
  }

 

How this was made

This sketch was built using two separate classes. The first class, called fli, handles the fireflies, and the second class, called star, handles the background stars. The stars are very simple, as they are just small ellipses with random positions in the background without any movement. Their sizes and transparency or brightness are also random between certain values to create variety. The fli class, on the other hand, is a little more complicated. Each firefly gets random values for position, speed, size, transparency, and fade speed when it is created. In the move function, the firefly drifts slowly across the screen, and its transparency rises and falls between 50 and 255 to create a glow effect. When the mouse comes within 70 pixels, the firefly flies away from the cursor. The restart function makes fireflies wrap around to the opposite edge instead of disappearing when they leave the canvas.

Reflection

While making this sketch I used a lot of randomness across all sorts of parameters. This approach definitely made the whole picture look more natural. Since the main focus of my sketch was fireflies, I had to make sure their behavior felt believable and alive. Adding randomness into parameters like size, speed, and fade timing made the fireflies move and glow at their own pace instead of all acting the same, which created a harmonic, natural looking scene overall.
If I worked on this again I would try to make the glowing effect more realistic, maybe by making a color transition between circles smoother. I would also change how the fireflies avoid the mouse to make that interaction feel more realistic, since the movement feels kind of stiff right now.