let mySwing;

let Swing1;

let BGimg;

let radio;

let startScreenBG; 

let scene = 'start';

let birdSpriteSheet;

let bird; 

// let child;

let spritesheet; 

let sprites = []; 

let direction = 1; 

let step = 0;

let x; 

let y; 

let speed = 10; 

let bench;

let bench1;

let yogaSprites = []; 

let yogaStep = 0; 

let yogaX; 

let yogaY; 

let yogaSpeed = 10; 

​

let songs = [];

let currentSongIndex = 0;

​

function preload(){

  startScreenBG = loadImage('startScreenBG.jpg');

  BGimg = loadImage('BG.jpg'); 

  // child = loadImage('children.png'); 

  birdSpriteSheet = loadImage('bird.png');

  spritesheet = loadImage("walking.png");

  // spritesheet = loadImage("walking.png");

  yogaSpritesheet = loadImage("yoga.png");

  songs[0] = loadSound('song1.mp3');

  songs[2] = loadSound('song2.mp3');

  songs[1] = loadSound('song3.mp3');

  // songs[2] = loadSound('song4.mp3');

​

}

​

function setup() {

  createCanvas(1100, 700);

// Slice the sprite sheet into individual frames for yoga

  let yogaW = yogaSpritesheet.width / 3;

  let yogaH = yogaSpritesheet.height / 4;

​

// Create nested array

  for (let j = 0; j < 4; j++) {

    yogaSprites[j] = []; 

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

  // Get different tiles of the entire sprite sheet image

      yogaSprites[j][i] = yogaSpritesheet.get(i * yogaW, j * yogaH, yogaW, yogaH); 

    }

  }

// initial position of yoga

  yogaX = width / 2+100; 

  yogaY = height / 2;

  let w = spritesheet.width / 12;

  let h = spritesheet.height / 4;

​

  for (let j = 0; j < 4; j++) {

    sprites[j] = []; 

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

      sprites[j][i] = spritesheet.get(i * w, j * h, w, h); 

    }

  }

​

  x = width / 2;

  y = height / 2;

​

  // imageMode(CENTER);

  rectMode(CENTER);

  // Create a new Swing object

  Swing0 = new Swing(900, 350, 40, 10, 80); 

  Swing1 = new Swing(300, 330, 30, 7, 70); 

// Create the radio

  radio = new Radio(350, 550, 70, 40);

  bird = new Bird(150, 150);

  bench = new Bench(990, 400, 200, 5);

  bench1 = new Bench(20, 350, 200, 5);

  radio.playSong();

}

function draw() {

  print(mouseX,mouseY);

  if (scene === 'start') {

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

    fill('white'); 

    textSize(32); 

    textAlign(CENTER, CENTER);

    text("Welcome to Greenhaven", width / 2, height / 3); 

    textSize(24); 

    textAlign(CENTER, CENTER);

    text("Immerse yourself in the tranquility of nature. Enjoy soothing music, wander through the lush grounds, take a moment to relax on benches, or have a fun time on swings. Chat with passersby, interact with birds, and let the serene environment of Greenhaven rejuvenate your spirit. Ready to explore? Click 'Start' and step into a world of peace and natural beauty.", width / 2, height / 2 + 60, 1000, 400); 

    // Draw the start button

    fill('[pink]'); 

    rect(width / 2 - 50, height / 2+200, 100, 50); 

    fill(0); 

    text("Start", width / 2 - 50, height / 2+200); 

  } else if (scene === 'park') {

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

    // image(child, width / 2, height - 50, 250, 150);

​

    // Display swings

    Swing0.update();

    Swing0.display();

    Swing1.update();

    Swing1.display();

    Swing0.addFigure();

    Swing1.addFigure();

    bench.display();

    bench1.display();

    drawYoga();

    bird.display(); 

    radio.display();

    // Calculate scale based on y position

    let scaleFactor = map(y, 300, height, 0.3, 1.2); 

​

    // Display the animated character with scaling

    push();

  // Move to the character's position

    translate(x, y); 

  // Apply scale

    scale(scaleFactor); 

  // Draw sprite at new scale

    image(sprites[direction][step], 0, 0); 

    pop(); 

  } else if (scene === 'radio') {

    // Display the enlarged radio scene

    radio.displayEnlarged(); 

  }

}

​

// Radio class

class Radio {

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.isClicked = false;

  }

​

  display() {

    push();

    translate(this.x, this.y);

    noStroke();

    rectMode(CENTER);

    fill('#1B3C73');

    rect(0,-10,this.w-10, this.h,5);

    fill('#8B9714');

    rect(0,-5,this.w-17, this.h,5);

    fill('#1B3C73');

    rect(0, 0, this.w, this.h,5);

//   Sound symbol

    fill('#FFCAD4');

    ellipse(-20,5,20);

    fill('#FF407D')

    ellipse(-20,5,15);

    fill('#FFFFFF');

    ellipse(-20,6,10);

//    Buttons on the Radio

    noStroke();

    fill(255);

    rect(0,-15,50,2,5);

    rect(0,-12,50,2,5);

    fill('#FF407D')

    ellipse(5,-4,10);

    ellipse(15,-4,10);

    fill('#FFCAD4');

    //  Pause and stop button

    rect(10,10,30,15,5);

    fill('#FF407D')

    rect(0,10,5,10);

    rect(7,10,5,10);

    triangle(13,4,20,11,13,17);

    pop();

  }

  displayEnlarged() {

    background('rgb(213,244,242)');

    push();

    fill('#1B3C73');

    noStroke();

    rectMode(CENTER);

    rect(width / 2, height / 2-100,300,200,30);

    fill('rgb(213,244,242)');

    rect(width / 2, height / 2-90,280,200,30);

    fill('#1B3C73');

    rect(width / 2, height / 2, 350, 190, 10); 

    fill('#FFCAD4');

    ellipse(width / 2-110,height / 2+30,100);

    fill('#FF407D')

    ellipse(width / 2-109,height / 2+30,85);

    fill('#40679E');

    ellipse(width / 2-109,height / 2+30,70);

    stroke(255);

//   lines on the circle on the radio

    line(width / 3+50,height / 2+5,width / 3+95,height / 2+5);

    line(width / 3+45,height / 2+15,width / 3+105,height / 2+15);

    line(width / 3+40,height / 2+25,width / 3+110,height / 2+25);

    line(width / 3+40,height / 2+35,width / 3+110,height / 2+35);

    line(width / 3+45,height / 2+45,width / 3+105,height / 2+45);

    line(width / 3+50,height / 2+55,width / 3+95,height / 2+55);

    noStroke();

    fill(255);

    rect(550,290,270,10,5);

    rect(550,270,270,10,5);

    fill('#FF407D')

    ellipse(610,330,30);

    ellipse(570,330,30);

    fill('#FFCAD4');

//     Pause and stop button

    rect(550,390,70,40,5);

    fill('#FF407D')

    rect(530,390,10,30);

    rect(545,390,10,30)

    triangle(560,375,575,390,560,405);

//     song change button

    fill('#FFCAD4');

    rect(640,390,60,40,5);

    fill('#FF407D');

    triangle(615,390,625,375,625,405);

    triangle(630,390,640,375,640,405);

    triangle(645,375,655,390,645,405);

    triangle(660,375,670,390,660,405);

    // Back button

    fill('black');

    rect(60, height - 35, 100, 50);

    fill('rgb(255,255,255)');

    textSize(20);

    textAlign(CENTER, CENTER);

    text('Back', 60, height - 35);

    pop();

  }

​

  click(mousex, mousey) {

  // Toggle scene only if in 'park' scene

    if (scene === 'park' && mousex > this.x - this.w / 2 && mousex < this.x + this.w / 2 &&

        mousey > this.y - this.h / 2 && mousey < this.y + this.h / 2) {

      this.isClicked = true;

      scene = 'radio';

    }

  }

  playSong() {

  if (!songs[currentSongIndex].isPlaying()) {

    songs[currentSongIndex].play();

  }

}

​

  stopSong() {

    if (songs[currentSongIndex].isPlaying()) {

      songs[currentSongIndex].stop();

  }

}

​

  changeSong() {

    this.stopSong();

    currentSongIndex = (currentSongIndex + 1) %  songs.length;

    this.playSong();

}

}

​

// Define a Swing class

class Swing {

  constructor(x, y, width, height, frameHeight) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

  // Height of the swing frame

    this.frameHeight = frameHeight; 

  // Start angle for swing motion

    this.angle = 0; 

  // Speed of swing motion

    this.angleVelocity = 0.03; 

​

  }

  addFigure() {

  // Create a new Figure associated with this swing

    this.figure = new Figure(this); 

  }

  update() {

    // Oscillate the scale between 0.5 and 1.2 to simulate forward and backward motion

    this.swingScale = lerp(0.4, 0.7, (sin(this.angle) + 1) / 2);

    this.angle += this.angleVelocity;

  }

  display() {

    // Swing frame

    stroke(139, 69, 19); 

    strokeWeight(10); 

  // Left side of the frame

    line(this.x -50, this.y - this.frameHeight, this.x -50, this.y); 

    // Right side of the frame

    line(this.x + 50, this.y - this.frameHeight, this.x+ 50, this.y); 

  // Top of the frame

    line(this.x -50, this.y - this.frameHeight, this.x +50, this.y - this.frameHeight); 

​

  // Start a new drawing state

    push(); 

  // Translate to the position of the swing seat

    translate(this.x, this.y-15); 

  // Apply scale transformation

    scale(this.swingScale); 

    fill(160, 82, 45); 

  // Seat

    rect(0, 0, this.width, this.height); 

    pop(); 

  // Swing ropes 

    stroke(160, 82, 45); 

  // Scale the stroke weight to simulate depth

    strokeWeight(2 * this.swingScale); 

  // Left rope

    line(this.x-20, this.y - this.frameHeight, this.x -20 * this.swingScale, this.y - this.height/2-10 * this.swingScale); 

   // Right rope

    line(this.x + this.width/2, this.y - this.frameHeight, this.x + this.width/2 * this.swingScale, this.y-10 - this.height/2 * this.swingScale);

    if (this.figure) {

      this.figure.display();

    }

  }

}

​

class Figure {

  constructor(swing) {

    this.swing = swing; 

  }

​

  display() {

    push();

    translate(this.swing.x, this.swing.y - this.swing.height / 2); 

    scale(this.swing.swingScale); 

    noStroke();

    fill('rgb(224,141,151') 

    // Draw the head

    ellipse(0, -40, 20, 20);

    quad(-5,-30,-11,-25,10,-25,5,-30);

    // Draw the body

    rect(0, -15, 20, 20);

    ellipse(0,-5,20,10)

    // Draw the legs

    rect(-5, 15, 5, 20);

    rect(5, 15, 5, 20);

    // foot

    ellipse(-4,23,8,5);

    ellipse(7,23,8,5);

    // Draw the arms

    quad(-10, -25,-10,-15,-20,-40,-20,-45 );

    quad(10, -25,10,-15,20,-40,20,-45 );

    pop(); 

  }

}

class Bird {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.frame = 0; 

    this.flying = false; 

    this.speed = 4; 

  }

​

  display() {

    push();

    if (this.flying && this.x < width) {

​

      let frameIndex = this.frame % 9; 

      let frameX = (frameIndex % 3) * 360; 

      let frameY = Math.floor(frameIndex / 3) * 300; 

      image(birdSpriteSheet, this.x, this.y, 40, 40, frameX, frameY, 360, 300);

      this.frame = (this.frame + 1) % 9; 

      this.x += this.speed;

      this.y+= this.speed-5;

    } else if (!this.flying) {

      // Display the bird sitting when not flying

      image(birdSpriteSheet, this.x, this.y, 40, 40, 0, 0, 360, 300);

    }

    pop();

  }

​

  fly() {

    this.flying = true;

    this.frame = 0; 

  }

}

​

​

function mousePressed() {

  if (scene === 'start') {

    // Check if the Start button is clicked

    if (mouseX >= width / 2 - 50 && mouseX <= width / 2 + 50 &&

        mouseY >= height / 2+180 && mouseY <= height / 2 + 250) {

      scene = 'park'; // Change the scene to the park

    }

  } else if (scene === 'park') {

    radio.click(mouseX, mouseY);

    // Check if the bird is clicked

    if (mouseX >= bird.x && mouseX <= bird.x + 64 && mouseY >= bird.y && mouseY <= bird.y + 64) {

      bird.fly(); // Make the bird fly

    }

  } else if (scene === 'radio') {

    if (mouseX >= 10 && mouseX <= 110 && mouseY >= height - 60 && mouseY <= height - 10) {

      scene = 'park'; 

      radio.isClicked = false;

    }

    if (mouseX > 523 && mouseX < 578 && mouseY > 372 && mouseY < 407) {

      radio.stopSong(); 

    }

​

    if (mouseX > 611 && mouseX <667 &&

        mouseY > 372 && mouseY < 407) {

      radio.changeSong();

    }

  }

}

function keyPressed() {

  // Temporary variables to hold the new position

  let newX = x;

  let newY = y;

​

  // Update position based on key press without applying the changes yet

  if (keyCode === DOWN_ARROW) {

    newY += speed;

    direction = 0;

  } else if (keyCode === LEFT_ARROW) {

    newX -= speed;

    direction = 1;

  } else if (keyCode === RIGHT_ARROW) {

    newX += speed;

    direction = 2;

  } else if (keyCode === UP_ARROW) {

    newY -= speed;

    direction = 3;

  }

​

  // Check if the new position is within the horizontal bounds of the canvas

  if (newX >= 0 && newX <= width) {

    x = newX; 

  }

​

  // Check if the new position is within the specified vertical bounds

  if (newY >= 290 && newY <= height) {

    y = newY; 

  }

​

// Advance to the next sprite frame

  step = (step + 1) % 12;

}

​

class Bench {

    constructor(x, y, width, height) {

        this.x = x;

        this.y = y;

        this.width = width;

        this.height = height;

    }

​

    display() {

        // Draw the bench

        fill('#7A6D68'); // Brown color

        rect(this.x, this.y, this.width, this.height);

        rect(this.x, this.y+10, this.width, this.height);

        rect(this.x, this.y+20, this.width, this.height);

        rect(this.x, this.y+30, this.width, this.height);

        rect(this.x,this.y+22,5,50);

        rect(this.x-this.width/2,this.y+22,7,60);

        rect(this.x+this.width/2,this.y+22,7,60);

        rect(this.x+this.width/2,this.y+50,7,60);

        rect(this.x-this.width/2,this.y+50,7,60);

        rect(this.x+this.widtph/2,this.y+22,5,60);

        quad(this.x-this.width/2,this.y+30,this.x+this.width/2,this.y+30,this.x+this.width/2+10,this.y+50,this.x-this.width/2-10,this.y+50)

​

    }

}

​

function drawYoga() {

  // Assuming a frame rate of 60 fps, 2 seconds would be 120 frames

  if (frameCount % 120 === 0) { 

    yogaStep = (yogaStep + 1) % 3;

  }

​

  push(); 

  translate(yogaX, yogaY); 

  image(yogaSprites[0][yogaStep], 0, 0); 

  pop(); 

}

​