Ephemera
Every place has a mood. This is its portrait, right now.
Ephemera is a single-page web app that turns live weather into a living abstract portrait. A city's current atmosphere becomes a generative canvas: temperature sets the climate palette, local time changes the light, humidity builds texture, wind gives the central form a gaze and lean, cloud cover thickens the layers, and rain or snow appears as falling foreground texture.
How It Works
- City search uses the Open-Meteo Geocoding API.
- The portrait is rendered with the HTML5 Canvas API and an embedded Perlin-style noise field.
- UTC offset is used to calculate local time for circadian color blending.
- Weather is refreshed automatically every six minutes.
- The canvas responds to clicks and taps with a temporary ripple in the particle system.
- Compare mode shows two cities as separate living portraits.
- Save image exports the active portrait as a PNG.
Visual Mapping
- Weather changes color: blues for cold, yellows for warm.
- Local time affects those palettes.
- Wind direction orients the central atmospheric form.
- Wind speed and direction also offset the central oval rings.
- Higher humidity creates more particles.
- Rain and snow city changes it.
- Faster wind increases particle speed.
- Wind direction controls the angle of the flow.
- Heavier cloud cover creates larger, softer particles and more translucent background layers.
- Rain and snow weather introduce falling particle effects.
- Clear skies reduce particle density.
Inspiration
Inspired by the weather and the colors that represent each shift in nature. One day, while watching a sunset, I noticed how distinct the colors of each part of the day are and how deeply they speak to us. It is one of those mundane things we tend to ignore in daily life, but it is actually deeply special. Every place, every day, and every hour is unique. I wanted to show and represent this uniqueness in a way anyone could intuitively understandusing the universal language of color, simple lines, and shapes. We all share pre-existing associations with colors, like blue for night, which requires no special knowledge to feel. This project is a way to appreciate an ordinary yet integral part of life.
Accomplishments that I'm proud of
- My First Project Ever: Built and launched my very first app, proving to myself that I can bring a complex idea to life.
- Stepping Beyond Traditional Tools: Overcame a steep learning curve to see how technology can serve as a powerful tool for artistic expression.
- Creating Meaningful Moments: Successfully elevated a mundane daily routine (checking the weather) into a beautiful visual experience.
What I learned
- Art & Tech Synergy: Discovered the invisible bridge between art and technology, realizing that neither feels fully complete without the other.
- Embracing Technology: Learned to view code not as something to fear, but as a creative medium that helps artists better convey their ideas.
- Elevating the Ordinary: Realized how thoughtful, dynamic design can transform functional tools into moments of emotional connection.
What's next for Ephemera
- Expanded Weather States: Introduce distinct visual signatures for rare or extreme weather events like thunderstorms, dense fog, and sandstorms.
- Dynamic Color Palettes: Develop a broader, more nuanced color matrix that responds to specific microclimates and seasonal shifts.
- Historical Audio Mapping: Explore ambient sound generation paired with the visuals, creating an immersive, multi-sensory environmental portrait.
Built With
- javascript
- open-meteo
Log in or sign up for Devpost to join the conversation.