ABOUT THE PROJECT

OBJECITVE

• Translate real-time weather data into an engaging, interactive experience.

• Use visual metaphors and motion to make weather information more intuitive and immersive.

• Experiment with JSON data integration in p5.js to create a functional and visually engaging web-based tool.

MY ROLE

• Creative Coding – Programmed the interactive visualization using p5.js.

• API Integration – Pulled live weather data via JSON from the OpenWeatherMap API.

• Data-Driven Animations – Designed dynamic, real-time animations based on weather conditions.

TECHNOLOGY & TOOLS USED

• Languages: JavaScript (p5.js)

• API: OpenWeatherMap API (JSON data)

• Software: p5.js

HOW IT WORKS

1. User Input – The user enters a city name, triggering an API request.

2. Weather Data Processing – The program retrieves JSON data containing temperature, wind speed, cloud percentage, and precipitation details.

3. Visual Representation – The display updates dynamically based on the weather data:

   • Clouds – Rendered based on the cloudiness percentage (more clouds for higher values).

   • Wind Movement – If wind speed exceeds 5 mph, clouds drift in the wind’s direction at varying speeds.

   • Rain & Snow – Animated precipitation appears if detected in the API data, creating a realistic effect.

   • Temperature & Stats – Weather details are displayed alongside the visuals for clarity.

DESIGN & DEVELOPMENT APPROACH

• Data-Driven Motion – Used p5.js functions to generate cloud, wind, rain, and snow animations that scale dynamically based on real-world conditions.

• User Interaction – The program allows users to explore weather across different locations, enhancing engagement.

• Performance Optimization – Implemented efficient API calls and smooth animations to ensure responsive interaction.

PROCESS & EXECUTION

1. API Research & Setup – Integrated OpenWeatherMap’s API, fetching real-time JSON data.

2. Sketching Visual Concepts – Designed how different weather conditions would be represented visually.

3. Coding in p5.js – Developed custom animation algorithms to depict cloud density, wind effects, and precipitation.

4. Testing & Refinement – Debugged API calls, optimized performance, and fine-tuned animations for a seamless experience.

OUTCOME

The Interactive Weather Data Visualization successfully merges real-time data with generative graphics, creating an engaging and informative experience. By transforming numerical weather data into motion-based visuals, this project makes weather more intuitive and interactive, demonstrating the power of data-driven creative coding.