Author: Khaleeqa Aasiyah

Concept:

As a true island girl, the beach has always held a special place in my heart. It’s not just one of my favourite places in the world; it’s where I find peace and calm. There’s something really magical about being at the beach at night—when the darkness hides your view, but you can still feel the water, hear the rhythm of the waves, and see the moon reflected on the surface. This inspired me to create an ocean scene for this project, with waves at the height of their movement, each with its own unique personality through acceleration.

https://www.youtube.com/watch?v=kT-f2mfNL7s

Embedded Sketch:

Key Features:

In my code, acceleration controls how fast the waves move. You can increase or decrease the speed by pressing the right or left arrow keys:

Pressing the right arrow increases acceleration, making the waves move faster.

Pressing the left arrow decreases acceleration, slowing the waves down.

The movement is smooth because acceleration gradually adjusts the wave speed rather than changing it instantly, making the effect feel more natural. This simulates a build-up or reduction in wave intensity, similar to real ocean waves building up momentum.

Highlight of Code:

One of the most rewarding aspects of this project was simulating the moon’s gravitational pull on the waves. I’m particularly proud of how I captured the subtle way the waves respond to the moon’s slow journey across the sky. The moon’s movement mimics the natural pull of gravity, affecting the height and behaviour of the waves as they interact.

// Slow down the moon's movement, simulating gravitational influence
moonX = map(noise(frameCount * 0.005), 0, 1, 0, width);  // Slow, subtle horizontal movement

// Slightly adjust wave height based on moon's horizontal position (gravity effect)
let gravitationalEffect = map(moonX, 0, width, -20, 20);  // Subtle effect
let y = noise(frameCount * noiseSpeed + i + j) * noiseHeight + noiseY + offsetY + gravitationalEffect;

Reflection and Future Work:

Though the project didn’t quite reach the full vision I had in mind, I’m proud of how it turned out. I originally hoped to simulate waves crashing onto the shore and to add more elements like sound and depth to the sketch. These are definitely areas I plan to improve on in future iterations, but I feel this piece captures the essence of the ocean that I love so much.

 

Concept:

Yesterday, my home country, Trinidad and Tobago, celebrated its 62nd Independence Day, marking our freedom from British colonialism. This is a deeply cherished event back home, filled with parades showcasing our military, fire service, and vibrant cultural bands. As the day winds down, the celebrations culminate in a spectacular fireworks display in our capital, Port of Spain. While I couldn’t be there to celebrate in person this year, I wanted to honour my country by drawing inspiration from this beloved tradition. That’s why I chose fireworks as the concept for this project, allowing me to connect with home even from afar.

Embedded Sketch:

Code I’m Particularly proud of:

// Firework class definition
class Firework {
  constructor(x, y) {
    this.firework = new Particle(x, y, true);
    this.exploded = false;
    this.particles = [];
  }
  
  // Update the firework's state
  update() {
    if (!this.exploded) {
      // Apply gravity to the firework
      this.firework.applyForce(gravity);
      
      // Update the firework's position
      this.firework.update();
      
      // If the firework reaches the peak and starts falling, it explodes
      if (this.firework.vel.y >= 0) {
        this.exploded = true;
        this.explode();
      }
    }
    
    // Update the particles from the explosion
    for (let i = this.particles.length - 1; i >= 0; i--) {
      this.particles[i].applyForce(gravity);
      this.particles[i].update();
      
      // Remove particle if its lifespan is over
      if (this.particles[i].done()) {
        this.particles.splice(i, 1);
      }
    }
  }
  
  // Handle the explosion of the firework
  explode() {
    // Create multiple particles at the firework's current position
    for (let i = 0; i < 100; i++) {
      let p = new Particle(this.firework.pos.x, this.firework.pos.y);
      this.particles.push(p);
    }
  }
  
  // Display the firework and its particles
  show() {
    if (!this.exploded) {
      this.firework.show();
    }
    
    // Show all particles from the explosion
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].show();
    }
  }
  
  // Determine if the firework is done (all particles are gone)
  done() {
    return this.exploded && this.particles.length === 0;
  }
}

I’m very proud of my firework class, specifically the explode method that handles the creation of the explosion when the firework reaches its peak. By generating 100 particles at the exact position where the firework explodes, I effectively simulate the burst of a firework. The fact that these particles are given random directions and speeds makes each explosion unique and unpredictable, which greatly enhances the realism and excitement of the simulation.

Key Features:

The main feature of this code is to simulate fireworks that shoot up from the mouse click position and then explode into multiple smaller particles. The visual effect is designed to mimic a real-life fireworks show, complete with motion, colour changes, and fading effects.

Each time you click the mouse, a new firework is created at the position where you clicked. The firework then moves upward on the screen, just like a rocket being launched. This adds a layer of interactivity, allowing you to control where and when fireworks appear.

The code uses a special colour mode (HSB—Hue, Saturation, Brightness) to create vibrant, colourful particles. Each firework and its particles are assigned random colours, which makes the display visually exciting.

The entire visual process is controlled by a loop that continuously updates the position, appearance, and behaviour of each firework and its particles. This loop allows for smooth and continuous animation, ensuring that the fireworks display looks natural and fluid.

Reflection and Future Work:

I’m really proud of my fireworks simulation. To take it even further, I’m thinking about adding explosion sounds that vary based on the size and type of firework, which would make the experience even more immersive. I’d also love to introduce different types of fireworks, like starbursts or spirals with unique explosion patterns, to add more variety and depth to the display. These improvements would not only elevate the overall experience but also make the simulation richer and more dynamic, allowing me to create something truly special.

References:

Coding Challenge #27: Fireworks! (youtube.com)

mousePressed (p5js.org)

Reductionism and holism offer two different ways to understand complex things, whether it’s in science or something as simple as making lasagna. With reductionism, you break down the process—like learning to cook pasta perfectly, making a sauce, and picking the right cheese. You focus on each part separately, mastering them one at a time. Once you’ve got each piece down, you bring it all together step by step to create the final dish. This approach helps you understand every part deeply before putting it all together.

Holism, on the other hand, is about seeing the dish as a whole, thinking about how the ingredients and flavors interact to create something greater than just the sum of its parts. Instead of focusing only on individual components, you consider how they work together—like adjusting the seasoning based on the cheese or layering ingredients to balance flavors and textures. Holism encourages you to think about the overall harmony of the dish, resulting in a richer, more complex lasagna.

Using food to explain my thought process is easy because of my love for it, but on a more serious note, I believe that both reductionism and holism are valuable approaches. Depending on the situation, one might be more useful than the other. Sometimes it’s better to focus on the details, while other times it’s best to look at the big picture. Understanding when to use each approach can help you navigate and understand complex systems more effectively.