let flowers = [];

let particles = [];

let patterns = [];

let currentPatternIndex = 0;

​

let backgroundImage1;

let backgroundImage2;

let currentBackgroundImage;

​

let toggleButton;

let screenshotButton;

​

// declare audio files

let A;

let B;

let C;

let D;

let E;

​

function preload() {

  // Load your background images

  backgroundImage1 = loadImage('background.jpeg'); 

  backgroundImage2 = loadImage('background2.jpeg');

​

    // Load audio files

  A = loadSound('A.MP3');

  B = loadSound('B.MP3');

  C = loadSound('C.MP3');

  D = loadSound('D.MP3');

  E = loadSound('E.MP3');

}

​

let playing = false;

​

// Declare variables for home screen

let startButton;

​

// Initialize home screen

function initializeHomeScreen() {

  // Create start button

  startButton = createButton('Start');

  startButton.position(width / 2 - 30 , height -180);

  startButton.mousePressed(startMainCode);

}

​

// Draw home screen

function drawHomeScreen() {

  background(255); // Set background color for home screen

  textSize(15);

  fill(0);

  textAlign(CENTER, CENTER);

  // Display instructions

  let textY = height / 4;

  text('Welcome! Here are some basic instructions before you begin:', width / 2, textY);

  textY += 30;

  text('1) All keys must be in CAPS LOCK for them to be activated and play audio files.', width / 2, textY);

  textY += 30;

  text('2) Here are the different audio files that are linked to each key:', width / 2, textY);

  textY += 30;

  text('A - the main soundtrack; B - korean traditional drum ver.1; C - korean traditional drum ver.2;', width / 2, textY);

  textY += 30;

  text('D - percussion triangle; E - rainstick', width / 2, textY);

  textY += 30;

  text('3) Click the mouse on the screen to generate more flowers.', width / 2, textY);

  textY += 30;

    text('4) If you click ONCE, it will generate one flower only. If you continue PRESSING, it will generate multiple flowers', width / 2, textY);

  textY += 30;

      text('5) Feel free to use the "Take Screenshot" and "Landscape Change" buttons', width / 2, textY);

  textY += 30;

  text('6) If you press the same key again, it will STOP the audio.', width / 2, textY);

  startButton.show();

}

​

// Initialize main code

function initializeMainCode() {

  createCanvas(800, 600);

​

  // Create a toggle button

  toggleButton = createButton('Landscape Change');

  // Set the position to the bottom right

  toggleButton.position(width - 150, height - 40);

  toggleButton.mousePressed(toggleBackground);

    // Create a screenshot button

  screenshotButton = createButton('Take Screenshot');

  screenshotButton.position(width - 135, height - 70); screenshotButton.mousePressed(takeScreenshot);

​

  // Set the initial background image

  currentBackgroundImage = backgroundImage1;

​

  let a = createVector(width / 2, height);

  let b = createVector(width / 2, height - 150);

  let root = new Branch(a, b);

  patterns.push(new FractalTree(width / 2, height));

​

  // Generate some flowers

  for (let i = 0; i < 10; i++) {

    let flower = new KoreanFlower(random(width), random(height));

    flowers.push(flower);

    patterns.push(flower);

  }

​

  // Generate some particles

  for (let i = 0; i < 180; i++) {

    particles.push(new Particle(random(width), random(height)));

  }

}

​

function mousePressed() {

  if (currentPatternIndex === 0) {

    let flower = new KoreanFlower(mouseX, mouseY);

    flowers.push(flower);

    patterns.push(flower);

  } else if (currentPatternIndex === 1) {

    let tree = new FractalTree(mouseX, mouseY);

    patterns.push(tree);

​

    // Generate additional flowers around the tree

    for (let i = 0; i < 10; i++) {

      let flower = new KoreanFlower(tree.x + random(-50, 50));

      flowers.push(flower);

      patterns.push(flower);

    }

  }

}

​

// Draw main code

function drawMainCode() {

  // Draw the current background image

  image(currentBackgroundImage, 0, 0, width, height);

​

  // Attract leaves towards the average position of flowers

  let attractionForce = createVector(0, 0);

  let flowerCount = 0;

​

  for (let i = 0; i < flowers.length; i++) {

    if (flowers[i] instanceof KoreanFlower) {

      flowers[i].display();

      flowers[i].grow();

      attractionForce.add(createVector(flowers[i].x, flowers[i].y));

      flowerCount++;

    }

  }

​

  // Update and display particles

  for (let i = 0; i < particles.length; i++) {

    particles[i].wander();

​

    // Flee from the mouse position

    particles[i].flee(createVector(mouseX, mouseY));

​

    particles[i].update();

    particles[i].display();

  }

​

  // Draw falling leaves

  for (let i = 0; i < leaves.length; i++) {

    fill(255, 0, 100, 100);

    noStroke();

    ellipse(leaves[i].x, leaves[i].y, 8, 8);

    leaves[i].y -= random(0, 2); // Move leaves upward

  }

​

  // Draw patterns (trees and flowers)

  for (let i = 0; i < patterns.length; i++) {

    if (patterns[i] !== null) {

      patterns[i].display();

      patterns[i].grow();

    }

  }

}

​

function toggleBackground() {

  // Toggle between the two background images

  if (currentBackgroundImage === backgroundImage1) {

    currentBackgroundImage = backgroundImage2;

  } else {

    currentBackgroundImage = backgroundImage1;

  }

}

​

function takeScreenshot() {

  // Save the current canvas as an image

  saveCanvas('screenshot', 'png');

}

​

// Start the main code

function startMainCode() {

  startButton.hide(); // Hide the start button

  initializeMainCode();

  draw = drawMainCode; // Set the draw function to drawMainCode

}

​

// Initial setup

function setup() {

  createCanvas(800, 600);

  initializeHomeScreen(); // Initialize home screen

  draw = drawHomeScreen; // Set the initial draw function to drawHomeScreen

}

​

// Particle class

class Particle {

  constructor(x, y) {

    this.position = createVector(x, y);

    this.velocity = createVector(random(-1, 1), random(-1, 1));

    this.acceleration = createVector(0, 0);

    this.maxSpeed = 1;

    this.wanderRadius = 20;

    this.wanderDistance = 50;

    this.wanderAngle = 0;

  }

​

  wander() {

    this.wanderAngle += random(-0.5, 0.5);

​

    // Calculate the new position in a circle around the current position

    let circleCenter = this.velocity.copy();

    circleCenter.normalize();

    circleCenter.mult(this.wanderDistance);

​

    let offset = createVector(this.wanderRadius * cos(this.wanderAngle), this.wanderRadius * sin(this.wanderAngle));

    let target = p5.Vector.add(this.position, circleCenter);

    target.add(offset);

​

    // Apply steering force towards the target

    let steer = p5.Vector.sub(target, this.position);

    steer.limit(0.1); // Adjust the limit for wandering behavior

    this.applyForce(steer);

  }

  flee(target) {

    let desired = p5.Vector.sub(this.position, target);

    let d = desired.mag();

​

    if (d < 150) {

      // Normalize the desired vector

      desired.normalize();

​

      // Set a fixed magnitude for consistent repelling force

      let repelMagnitude = 10; // Adjust the repelling force as needed

​

      // Scale the vector to the fixed magnitude

      desired.mult(repelMagnitude);

​

      let steer = p5.Vector.sub(desired, this.velocity);

      steer.limit(this.maxSpeed);

      this.applyForce(steer);

    }

  }

​

  applyForce(force) {

    this.acceleration.add(force);

  }

​

  update() {

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.maxSpeed);

    this.position.add(this.velocity);

    this.acceleration.mult(0); // Reset acceleration after update

​

    // Check if the particle is within the top 1/3 of the canvas

    let topHalf = height / 1.5;

    if (this.position.y > topHalf) {

      // If not, reset the position to the top 1/3 of the canvas

      this.position.y = random(0, topHalf);

    }

​

    // Contain particles within the canvas horizontally

    this.position.x = constrain(this.position.x, 0, width);

  }

​

  display() {

    fill(229,181,97);

    ellipse(this.position.x, this.position.y,8,8)

  }

}

​

function mousePressed() {

  if (currentPatternIndex === 0) {

    let flower = new KoreanFlower(mouseX, mouseY);

    flowers.push(flower);

    patterns.push(flower);

  } else if (currentPatternIndex === 1) {

    let tree = new FractalTree(mouseX, mouseY);

    patterns.push(tree);

​

    // Generate additional flowers around the tree

    for (let i = 0; i < 10; i++) {

      let flower = new KoreanFlower(tree.x + random(-50, 50), tree.y + random(-50, 50));

      flowers.push(flower);

      patterns.push(flower);

    }

  }

}

​

function mouseDragged() {

  // Check if the mouse is continuously pressed

  if (mouseIsPressed) {

    // Generate a flower at the current mouse position

    if (currentPatternIndex === 0) {

      let flower = new KoreanFlower(mouseX, mouseY);

      flowers.push(flower);

      patterns.push(flower);

    }

  }

}

​

class KoreanFlower {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = 10;

    this.outerColor = color(random(255), random(255), random(255), 150);

    this.innerColor = color(random(255), random(255), random(255), 150);

    this.centerColor = color(random(255), random(255), random(255), 150);

​

    // New parameters for small movements

    this.jitterRadius = 0.3; // Radius of the jitter circle

    this.jitterAngle = random(TWO_PI); // Initial angle for jitter

​

    // Generate random size limits

    this.minSize = random(5, 10); // Set your desired minimum size

    this.maxSize = random(15, 35); // Set your desired maximum size

​

    // Set canvas boundaries

    this.canvasWidth = 800; // Set your canvas width

    this.canvasHeight = 600; // Set your canvas height

  }

​

  jitter() {

    // Update the angle for jitter

    this.jitterAngle += 0.02;

​

    // Calculate position offsets based on a small circle

    let xOffset = this.jitterRadius * cos(this.jitterAngle);

    let yOffset = this.jitterRadius * sin(this.jitterAngle);

​

    // Apply the small movements within canvas boundaries

    this.x = constrain(this.x + xOffset, 0, this.canvasWidth);

    this.y = constrain(this.y + yOffset, 0, this.canvasHeight);

  }

​

  grow() {

    if (this.size < this.maxSize) {

      this.size += 1;

    }

  }

​

  display() {

    this.jitter(); // Call the jitter function for small movements

    noStroke();

​

    // Outer petals

    fill(this.outerColor);

    for (let i = 0; i < 6; i++) {

      let angle = radians(60 * i);

      let petalX = this.x + this.size * cos(angle);

      let petalY = this.y + this.size * sin(angle);

      ellipse(petalX, petalY, this.size * 1.5, this.size * 1.5);

    }

​

    // Inner petals

    fill(this.innerColor);

    for (let i = 0; i < 6; i++) {

      let angle = radians(60 * i + 30);

      let petalX = this.x + this.size * 0.7 * cos(angle);

      let petalY = this.y + this.size * 0.7 * sin(angle);

      ellipse(petalX, petalY, this.size, this.size);

    }

​

    // Flower center

    fill(this.centerColor);

    ellipse(this.x, this.y, this.size * 0.6, this.size * 0.6);

  }

}

​

​

​

// Fractal Tree class

class FractalTree {

  constructor(x, y) {

    this.tree = [];

    let a = createVector(x, y); // Adjust the y-coordinate to increase height

    let b = createVector(x, y - 140); // Adjust the y-coordinate to increase height

    let root = new Branch(a, b);

    this.tree.push(root);

    this.branchCount = 0;

    this.branchLimit = 200; // Adjust the branch limit here for more leaves

    this.leavesFallen = false;

  }

​

  grow() {

    if (this.branchCount < this.branchLimit) {

      for (let i = this.tree.length - 1; i >= 0; i--) {

        if (!this.tree[i].finished) {

          this.tree.push(this.tree[i].branchA());

          this.tree.push(this.tree[i].branchB());

          this.branchCount += 2; // Increment the counter for each new branch

        }

        this.tree[i].finished = true;

      }

    } else if (!this.leavesFallen) {

      for (let i = 0; i < this.tree.length; i++) {

        if (!this.tree[i].finished) {

          let leaf = this.tree[i].end.copy();

          leaves.push(leaf);

        }

      }

      this.leavesFallen = true;

    }

  }

​

  display() {

    for (let i = 0; i < this.tree.length; i++) {

      this.tree[i].show();

      this.tree[i].jitter();

    }

  }

}

​

// Branch class (used by Fractal Tree)

class Branch {

  constructor(begin, end) {

    this.begin = begin;

    this.end = end;

    this.finished = false;

  }

​

  show() {

    stroke(44,35,33);

    strokeWeight(6); // Increase stroke weight

    line(this.begin.x, this.begin.y, this.end.x, this.end.y);

  }

​

  branchA() {

    let dir = p5.Vector.sub(this.end, this.begin);

    dir.rotate(PI / 4);

    dir.mult(0.7); // adjust this to adjust the lengths of the branches

​

    let newEnd = p5.Vector.add(this.end, dir);

​

    // Check the length of the new branch and limit it

    if (dir.mag() > 5) { // Adjust the threshold as needed

      let b = new Branch(this.end, newEnd);

      return b;

    } else {

      this.finished = true;

      return null; // Return null if the branch is too short

    }

  }

​

  branchB() {

    let dir = p5.Vector.sub(this.end, this.begin);

    dir.rotate(-PI / 6);

    dir.mult(0.7);

​

    let newEnd = p5.Vector.add(this.end, dir);

​

    // Check the length of the new branch and limit it

    if (dir.mag() > 5) { // Adjust the threshold as needed

      let b = new Branch(this.end, newEnd);

      return b;

    } else {

      this.finished = true;

      return null; // Return null if the branch is too short

    }

  }

  jitter() {

    this.end.x += random(-1, 1);

    this.end.y += random(-1, 1);

  }

}

​

// for audio files

function keyPressed() {

  // Check if the key corresponds to a loaded audio file

  if (key === 'A') {

    // Play or stop the audio file based on its current state

    if (A.isPlaying()) {

      A.stop();

    } else {

      A.play();

    }

  } else if (key === 'B') {

    if (B.isPlaying()) {

      B.stop();

    } else {

      B.play();

    }

  } else if (key === 'C') {

    // Play or stop the audio file associated with the 'C' key

    if (C.isPlaying()) {

      C.stop();

    } else {

      C.play();

    }

  } else if (key === 'D') {

    // Play or stop the audio file associated with the 'D' key

    if (D.isPlaying()) {

      D.stop();

    } else {

      D.play();

    }

  } else if (key === 'E') {

    // Play or stop the audio file associated with the 'E' key

    if (E.isPlaying()) {

      E.stop();

    } else {

      E.play();

    }

  }

}