🌱 Our Duty for Beauty

How to Play

  1. Click 1 to select Paper

  2. Click 2 to select Plastic

  3. Click 3 to select Metal

Let’s see what you’ve got—set a new high score! 🙂

Project Overview

  • Title: Our Duty for Beauty

  • Genre: Casual / Educational Arcade

  • Goal: Raising awareness about recycling and waste separation through a fun, interactive game.

  • Technologies: p5.js, JavaScript, HTML/CSS, Sound Synthesis (p5.sound)

  • Development Time: [e.g., 2 weeks / 1 month]

Concept & Inspiration​

  • Inspired by environmental concerns and the importance of recycling.

  • Designed with simple mechanics (three keys → Paper, Plastic, Metal) for accessibility.

  • Influence from fast-paced arcade games + educational facts integrated into gameplay.

Gameplay & Mechanics

  • Items fall from the top of the screen.

  • Players sort them into the correct bins using keys 1, 2, 3.

  • Scoring + Combo system encourages precision and speed.

  • Lives system balances difficulty.

  • Visual effects (Particles, Trails) provide instant feedback.

  • Synthesized sounds (8bit loop + beep rewards) create an arcade vibe.

Visual & UI Design

  • Bright, clear color-coding for waste categories (Blue = Paper, Yellow = Plastic, Dark Blue = Metal).

  • Glassmorphism-inspired UI for a modern aesthetic.

  • Functional controls: Start, Pause, Mute.

  • Minimal yet eye-catching design, focused on user experience.

Audio Design

  • Internal 8bit loop music generated with p5.sound (no external MP3).

  • Short beep sound on correct actions for positive feedback.

  • Mute/Unmute option for player control.

Media

  • Screenshots of main menu, gameplay, and game over.

  • Short gameplay GIF or 30-second video demo.

  • Live playable demo embedded via iframe.

Challenges & Solutions

  • Autoplay audio restriction → solved with userStartAudio() triggered on first user interaction.

  • Difficulty balancing → gradually increasing item fall speed.

  • Responsive embedding in portfolio (iframe with width:100%; height:100vh;).

Outcome & Impact

  • An educational and entertaining web-based game that communicates environmental responsibility.

  • Fully deployable on the web (WordPress/portfolio) with no installation required.

  • A fusion of art (UI design) and technology (coding + audio).