Midterm Project: Greenhaven

Inspiration

I grew up in a village without a park, a place where families, friends, and pets gather to enjoy nature and each other’s company. To experience the joy of a park, I had to travel to nearby villages or cities. This sparked my love for parks and inspired my midterm project: creating a virtual park. My goal is to recreate the sense of community and fun found in a park, from children playing on swings to people walking their dogs and old friends catching up. This project is my way of bringing the park experience to those who, like me, have always admired it from afar.

Concept

My project begins with a start screen that warmly welcomes users to the virtual park experience, featuring a “Start” button that leads them into the park scene upon interaction. The journey into the virtual park commences with a meticulously designed background, setting the stage for the vibrant park life that unfolds.

Central to the park are two swings, each with figures seated and in motion, bringing a dynamic element of playfulness. These swings, animated to sway, add a lively atmosphere to the park scene. Adding to the ambiance is a bird, animated using a sprite sheet to simulate realistic motion. A click from the user sends the bird flying off the canvas, illustrating the interactive nature of this digital environment.

Music enriches the park experience through a jukebox feature. Clicking on the jukebox transitions the scene from the park to a Radio view, magnifying the jukebox and revealing its controls. The jukebox offers three buttons: one to stop the music, providing users control over the ambiance, and two others to navigate through the playlist, enhancing the immersive experience with auditory choices.

The park’s inhabitants include a sprite-sheet-based man, whom users can direct around the park. Movement is thoughtfully restricted, and the character is scaled dynamically to create a depth effect, simulating closer or further distance from the viewer as he moves vertically across the screen. This effect adds a layer of realism to the virtual exploration. A girl performing yoga serves as another point of interest. Her form transitions every 2 seconds.

Full Screen Canvas:

https://editor.p5js.org/gg2713/full/9wcrgqffm

Code I’m Proud of:

This code is my favorite part of the project because it encapsulates a significant learning curve and represents a turning point in the development process. Mastering the use of the lerp function for scaling the swing wasn’t straightforward; it took a considerable amount of time and experimentation to get right. However, once I figured it out, everything else seemed to fall into place more easily.

 

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

Another piece of code that I take great pride in is the function for handling mouse interactions, specifically the logic that enables switching between scenes. Although the code now appears straightforward, reaching this level of simplicity and effectiveness was a journey marked by significant effort and learning. Here’s the code:

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

Key Challenges Faced 

  1. Swing Depth Effect: One of the initial challenges was to create a depth effect for the swings. My first approach involved altering the coordinates, which did not yield the desired outcome. Eventually, the use of the lerp function for scaling the swings provided the solution.
  2. Scene Transitions: Transitioning between scenes (start to park, park to radio) was difficult. It took numerous trials to manage application states effectively for smooth transitions.
  3. Jukebox Functionality: The jukebox component was a multifaceted challenge. Initially, assembling its structure and design was time-intensive, requiring attention to detail to accurately represent its features. Beyond its appearance, integrating interactive functions, such as changing songs and stopping playback through radio buttons, added another layer of complexity.
  4. Animating a Running Girl: I wanted to incorporate a running girl to the park. However I was not able to achieve smooth transitions between frames. The frames for the running motion changed too abruptly, leading to an unnatural appearance.

Future Aspects:

The journey of crafting the virtual park has been incredibly fulfilling, yet I see so much more potential for it. Right now, the park feels a bit too quiet for my liking; it’s missing the hustle and bustle of daily park life. I’m dreaming of adding animations of families spreading out picnic blankets, kids chasing each other around, and elderly couples enjoying quiet conversations on benches. These little touches, I believe, will truly breathe life into the park.

One of my initial ambitions was to animate a girl running through the park. Sadly, getting her movement just right turned out to be trickier than I expected, and I had to set that idea aside. But, it’s still something I’m passionate about tackling. Seeing the project come to life has been incredibly rewarding, and it’s only fueled my desire to dive back in and add even more depth and interaction to this virtual space. The feedback has been heartening, and honestly, I can’t wait to get started on bringing these new ideas to life. The virtual park project isn’t just a task for me; it’s a passion project that I’m excited to develop further.

REFERENCES:

https://intro.nyuadim.com/author/mk7592/

 

Leave a Reply