const maxIterations = 100;

const numParticles = 30000; // Adjust for performance if needed

let isStarted = false; // To track if the main visualization should start

let startButton; // Variable to hold the start button

​

function setup() {

  adjustCanvasSize(); // Set canvas size dynamically

  colorMode(HSB, 360, 255, 255); // HSB for smooth natural gradients

  noStroke();

​

  // Create a button to start the visualization

  startButton = createButton("Start");

  positionStartButton(); // Dynamically position 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 adjustCanvasSize() {

  resizeCanvas(windowWidth, windowHeight); // Ensure canvas spans the full screen

  if (particles.length > 0) {

    // Reposition particles within the new canvas dimensions

    for (let particle of particles) {

      particle.x = random(width);

      particle.y = random(height);

    }

  }

}

​

function positionStartButton() {

  startButton.position(width / 2 - 40, height / 2); // Center the button

}

​

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();

  }

}

​

function keyPressed() {

  if (key === 'f') {

    let fs = fullscreen();

    fullscreen(!fs); // Toggle fullscreen

  }

}

​

function windowResized() {

  adjustCanvasSize(); // Adjust canvas size dynamically

  if (!isStarted) {

    positionStartButton(); // Reposition the start button

  }

}

​

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

  }

}

​