Whimsical Nightscape
An interactive canvas of blooming flowers and magical nighttime scenery
Role
Sole Developer & Designer
Tools Used
p5.js
Skills & Responsibilities
Creative Coding
Interaction Design
UX/UI Design
Audio Integration
Problem Solving
Timeline
2024 (May)
Bringing Nostalgia to Life
This project was inspired by my love for nature and childhood memories of Animal Crossing, where players personalize their environment. As the sole designer and developer, I handled all aspects of the project from concept to execution. My goal was to create a calming, interactive visual experience that captures the beauty of a nighttime landscape with stars, flowers, and mountains. Through the design, I aimed to evoke nostalgia and wonder while allowing users to influence the landscape and feel a deeper connection to nature.
The Vision and Interaction: Bringing the Canvas to Life
Imagine a peaceful night filled with sparkling stars, blooming flowers, and rolling mountains. This was the vision behind my project. I wanted users to not just view the scene but actively shape it. To achieve this, I developed a system where each interaction generates unique and surprising visuals, fostering a sense of discovery and connection to nature.
A Ladybug’s Flight
The mouse represents a ladybug, gracefully flying over the landscape. Its path leads users into interactions with nature.
Blooming Flowers
Clicking on the bottom half of the screen brings vibrant flowers to life. Each flower has unique colors, petal shapes and sizes. Clicking an existing flower makes it retract, creating a natural growth cycle.
01
Magical Shooting Stars
Interacting with the upper half of the canvas creates shooting stars that streak across the night sky, adding a whimsical and nostalgic touch.
03
Subtle Mountain Movements
Background mountains shift gently using a noise function, enhancing the immersive and dynamic atmosphere.
04
02
Moodboard
The Role of Music and Aesthetics
To enhance the soothing atmosphere, I added Night by Lukrembo as background music. This calming melody complements the visuals and deepens the immersive experience. In addition, small glowing particles in the sky simulate twinkling stars, adding depth and realism to the night sky.
Final Prototype
For a full-screen experience, view the prototype here.
Challenges and Lessons Learned
Creating this project came with its fair share of obstacles. I encountered coding errors such as wrong variable names, problematic transitions and issues with an oversized audio file. To solve these, I reorganized my code using loops, functions, and classes, which improved efficiency and made the project easier to manage.
These challenges taught me the importance of breaking down problems into smaller tasks and testing regularly to catch mistakes early. Through these lessons, I gained a deeper understanding of user interaction and generative design. I discovered how small coding adjustments can significantly improve user experience and create smoother, more dynamic visuals.
Overall, this creative code design project enhanced my problem-solving skills and gave me more confidence in my ability to create engaging interactive experiences. I also see this project as just the beginning, with future plans to expand on it by introducing more user interactions and personalized elements.