Final Project – Understanding Deforestation

Fractals have always fascinated me. These captivating geometric patterns reveal infinite complexity as they scale, mimicking the beauty of nature in everything from clouds to plants. Initially, my project began with the goal of creating interactive fractals using p5.js, allowing users to engage with these mesmerizing patterns in real-time. However, as I delved deeper, I realized that I could harness the power of these visuals to raise awareness about a pressing environmental issue: deforestation. This journey led me to intertwine the elegance of fractals with the urgency of ecological conservation.

Project Overview

The core goal of this project has evolved from merely creating interactive fractals into crafting a visually engaging experience that emphasizes the importance of preserving our natural world. Here’s how I approached it:

Dynamic Complexity: Each mouse press increases the fractal’s depth, revealing intricate new layers, reminiscent of how our forests grow and expand.

Real-Time Updates: The instant changes in the fractals mimic the fragility of nature, responding to user interaction much like ecosystems react to human activity.

Immersive Visuals: By pairing fractals with vibrant green hues and subtle animations, I aimed to create a visually rich environment that invites exploration while reflecting the lushness of forests.

Fractal Designs

Throughout this journey, I considered various fractal types, each offering unique opportunities for interactivity while connecting back to the theme of nature:

Sierpinski Triangle: This classic fractal, with its nested triangles, symbolizes the intricate balance of ecosystems, where each part contributes to the whole.
Koch Snowflake: Beginning as a simple line, this fractal transforms into an elaborate shape, illustrating how deforestation can disrupt natural patterns.
Tree Fractal: Inspired by the branching structures of trees, this fractal evolves into a dense network of “branches,” echoing the beauty of forests that are often threatened by deforestation.

Interactivity Features

I aimed to create an engaging user experience that encourages reflection on deforestation:

Mouse Press: Each click adjusts the fractal’s recursion depth, giving users control and encouraging them to explore the complexity of nature, much like understanding the complexity of ecosystems.
Mouse Position: As users move their mouse, aspects like color, size, and rotation change, creating an immersive experience that reflects the vibrant life found in forests.
Animation: Subtle movements in the fractals symbolize the dynamic nature of ecosystems, reinforcing the message that our natural world is alive and needs protection.

The goal was to create a space where the beauty of fractals serves as a reminder of the richness of nature and the urgent need to address deforestation.

The Journey to Deforestation Awareness

As my project evolved, the focus on deforestation emerged organically. The beauty of fractals, now pulsating with vibrant green particles, symbolizes lush forests and the interconnectedness of life, emphasizing what we stand to lose. This transformation has deepened my understanding of the importance of preserving our natural world.

(Draft Number 1)
The project now serves as a visual narrative, illustrating the delicate balance of our ecosystems and the threats they face. By engaging users in this interactive experience, I hope to inspire them to reflect on their relationship with nature and the impact of deforestation.

(Draft Number 2)

Project Features

The project includes several interactive elements that invite users to engage deeply with the theme of deforestation:

Start Screen: Users are greeted with the message, “Let’s understand Deforestation together!” along with a prominently displayed start button, creating a welcoming entry point into this vital conversation.
Dynamic Fractal Visualization: As users move their mouse, the fractal responds in real-time, dynamically adjusting to create a mesmerizing experience that underscores the importance of protecting our forests.
Earthy Background: The warm brown background symbolizes the earth, grounding the visual experience and reinforcing our connection to the land that sustains us.

Code Snippets

Setup Function

function setup() {
  createCanvas(800, 800);
  colorMode(HSB, 360, 255, 255);
  noStroke();
}

Drawing the Fractal

function draw() {
  background(139, 69, 19); // Warm brown to represent the earth
  particles = []; // Resetting particles for fresh display

  let cRe = map(mouseX, 0, width, -1.5, 1.5);
  let cIm = map(mouseY, 0, height, -1.5, 1.5);

  let juliaSet = new JuliaSet(cRe, cIm);
  juliaSet.createParticles();

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

Particle Class

class Particle {
  constructor(x, y, cRe, cIm) {
    this.x = x;
    this.y = y;
    this.cRe = cRe;
    this.cIm = cIm;
    this.hue = random(100, 140); // Greenish tones for a natural vibe
  }

  update() {
    // Logic for particle movement and color based on iteration count
  }

  display() {
    fill(this.hue, this.saturation, this.brightness, 200);
    ellipse(this.x, this.y, 2, 2);
  }
}

Embedded Sketch and Project Outcome:

let particles = [];
const maxIterations = 100;
const numParticles = 30000; // Increased number of particles for visibility
let isStarted = false; // To track if the main visualization should start
let startButton; // Variable to hold the start button

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 360, 255, 255); // HSB for smooth natural gradients
  noStroke();

  // Create a button to start the visualization
  startButton = createButton("Start");
  startButton.position(width / 2 - 40, height / 2); // Center the button
  startButton.size(80, 40);
  startButton.style('font-size', '20px');
  startButton.style('background-color', 'white');
  startButton.mousePressed(startVisualization); // Start the visualization on press

  // Create initial particles
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(random(width), random(height)));
  }
}

function startVisualization() {
  isStarted = true; // Set the flag to start the main visualization
  startButton.hide(); // Hide the button after it is pressed
}

function draw() {
  if (!isStarted) {
    background(34, 139, 34); // Green background for the start page
    
    // Display the title text
    textSize(24);
    fill(255); // White text color
    textAlign(CENTER);
    text("Let's understand deforestation together!", width / 2, height / 2 - 70); // Title text
    
    // Instruction text
    textSize(20);
    text("Move around the mouse", width / 2, height / 2 + 120); // Instruction text
    return; // Stop further execution until the button is pressed
  }

  background(153, 101, 21, 200); // Brown background resembling the ground

  // Dynamically adjust Julia constants based on mouse position
  let cRe = map(mouseX, 0, width, -1.5, 1.5); // Map mouseX to real part
  let cIm = map(mouseY, 0, height, -1.5, 1.5); // Map mouseY to imaginary part

  // Update and display all particles
  for (let particle of particles) {
    particle.update(cRe, cIm);
    particle.display();
  }
}

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.iteration = 0; // To track the iteration count
  }

  update(cRe, cIm) {
    // Center the mapping so the fractal stays in the middle
    let zx = map(this.x, 0, width, -2, 2); // Map to complex plane
    let zy = map(this.y, 0, height, -2, 2);
    this.iteration = 0; // Reset iteration count for update

    // Iterate the Julia formula
    while (this.iteration < maxIterations) {
      let xtemp = zx * zx - zy * zy + cRe;
      zy = 2.0 * zx * zy + cIm;
      zx = xtemp;

      if (zx * zx + zy * zy > 4) break; // Escape condition
      this.iteration++;
    }
  }

  display() {
    // Use a green color palette for a microbiological feel
    let hueValue = map(this.iteration, 0, maxIterations, 100, 140); // Green to light green
    let brightness = this.iteration === maxIterations ? 0 : map(this.iteration, 0, maxIterations, 100, 255);
    let size = map(this.iteration, 0, maxIterations, 2, 6); // Increased size variation

    fill(hueValue, 255, brightness, 200); // Vibrant colors with increased opacity
    ellipse(this.x, this.y, size, size); // Dynamic particle size
  }
}

Project Reflections

Reflecting on this project brings me joy. The transformation from a simple fractal exploration to a tool for raising awareness about deforestation highlights the power of creativity in fostering understanding. It’s truly rewarding to see users engage with the project, contemplating its message and the vital need to protect our forests.

Challenges and Overcoming Them

Like any creative endeavor, this project came with its challenges. One significant hurdle was maintaining performance while increasing the number of particles in the fractal visualization. I had to optimize the code carefully to ensure a smooth user experience. Additionally, crafting a clear and impactful message about deforestation required thoughtful incorporation of user feedback, allowing me to communicate the project’s importance effectively.

Future Improvements

Looking ahead, I see several exciting possibilities for this project:

Educational Content: I envision adding layers of information about deforestation, including its causes and potential solutions, to deepen user understanding.
Enhanced Visuals: Exploring advanced graphics techniques could enrich the user experience even further.
Expanded Interactivity: Integrating animations or informative pop-ups could create an even more engaging learning environment.