Week 9: Weather App

Project 4: Weather App + Canvas Animation (15%) DUE April 2

Build an original weather app using the OpenWeather API and JavaScript fetch(). Your app should let a user search a city/state (or city/country), then translate the JSON weather response into a designed Canvas animation that expresses the current conditions (clouds, rain, wind, temperature, etc.).

Your finished project must include: (1) a search form, (2) a readable weather display for weather outputs, and (3) at least 5 canvas-based animations that responds to real weather data. Include as comments in the script a short project statement, logic steps and JS Mentor chat URLS.

Development Steps:

Choose a concept (mood, style, theme, metaphor, visual language).
Pick your data: decide which JSON fields you will use to display an info-card integrated in an interface along with Canvas animation based on data: temp, humidity, wind, clouds, precipitation, time of day.
Sketch the UI: layout for search + results.
Build the fetch workflow: input → request URL → JSON → update the page.
Design the Canvas system: plan how each variable changes motion, density, color, scale, or behavior.
Animate with requestAnimationFrame().
Handle errors: invalid city, network failure, missing data, empty input.
Style and polish: readable typography, spacing, responsive layout, and a cohesive “weather mood.”
Test + debug with at least 5-10 different cities and conditions.

Minimum Requirements Checklist:

Uses OpenWeather API with fetch() (not a prebuilt weather library).
User can search (at least by city/state names) and see updated results.
Displays at least 4 data points (example: temp, feels_like, humidity, wind speed, cloud %).
At least 5 different Canvas animations based on live data .
Includes loading + error messages.
Includes a project statement, logic steps and chat urls in JS comments.

Evaluation Criteria

Functionality (30%): The app must fetch and display accurate weather data based on user input.
Interaction Design (40%): Evaluate creativity, usability, and aesthetics of the interface design and JS animations for different weather patterns.
Code Quality (30%): Ensure clean, well-commented JavaScript code that dynamically updates the UI. Include natural language steps in script comments and chat urls.

Weather App Project Details

Use the OpenWeather API (Application Programming Interface) to create your own weather app using JavaScript’s fetch() method to get the current weather by city and state.

Refer to this weather app template to get started.

Get an API key by signing up for the free version from the OpenWeather API, selecting the free option.

Here is the sign-up page for the free version. Your Key will be emailed to you. Replace the placeholder key in the template with your own.

Weather App Workshop

Server Requests

Old way: Ajax — asynchronous JavaScript and XML, used for passing data (GET or POST) without refreshing the page. XML — extensible markup language, once used for storing and exchanging data.
New way (with ES6): JavaScript Fetch API along with JSON — JavaScript Object Notation, a format for storing and exchanging data.

JSON Methods

JSON.stringify() — Converts a JS object into a JSON string. Used when sending data to a server.
JSON.parse() — Converts a JSON string into a JS object. Used when you already have a JSON string in hand.
response.json() — A fetch-specific shortcut that reads the response body and parses it into a JS object in one step.

The Fetch API is a built-in browser feature. It’s a JavaScript interface (a set of methods) that lets you make network requests like:

GET (grab data)
POST (send data)
PUT / DELETE (update/remove data)

Weather App Resources

OpenWeather API: Current Weather Data
JSON Weather Data
Weather Conditions — a list of all weather descriptions.
Accessing Current Weather Data
Weather app template (with two input fields)
Weather app template (with single search bar)
JavaScript includes() — search a result for a word or phrase:

if (response.weather[0].description.includes('clouds')) {
  // Do something
}

Generative Art

Generative visual art is a type of digital art made using computer algorithms. Artists use programming tools like Processing or its JavaScript version p5.js to set rules. The computer then creates art by following these rules, leading to unique and sometimes changing images or animations. The artist decides the starting point, but the computer’s actions create the final piece. It’s a way for artists to blend coding with art, creating new and unexpected visual works.

GENERATIVE ART: Art created using autonomous processes

AUTONOMOUS PROCESS: A process not under direct human control

Algorithmic/Rule-Based: Setting up strict rule systems to generate visual outputs.
Randomness & Noise: Introducing randomness (e.g., Perlin noise) to simulate organic or chaotic patterns.
Iterative / Recursive Approaches: Fractals and other self-similar patterns, such as recursive subdivisions.

— Amy Goodchild

The random() function in p5.js generates pseudorandom numbers. It can return a floating-point number between 0 and 1, a number within a specified range, or a random element from an array, depending on how it’s used. It’s useful for introducing unpredictability and variation in sketches.

Below images are from Amy Goodchild's What is Generative Art

The noise() function in p5.js generates Perlin noise, which produces smooth, natural-looking sequences of numbers. Unlike random numbers that jump abruptly, values from noise() change gradually and predictably, making them ideal for creating organic patterns, textures, and motion in generative art and animations.

John Conway

John Conway’s Game of Life (p5.js simulation)

Vera Molnar

Vera Molnár (b. 1924) is a Hungarian-French artist often recognized as one of the earliest pioneers of generative and computer-based art. In the late 1960s, Molnár began systematically using computers—an uncommon practice at the time—to explore geometric forms and algorithmic variations. She embraced rule-based processes to create series of drawings that reveal slight, methodical permutations in composition. Her work anticipates generative art and processing: how simple computational rules can generate nuanced aesthetic complexity.

P5js Demos

Examples:

What are Flow Fields? Creating a flow field with p5.js involves simulating fluid-like motion by placing particles in an invisible vector field, where each vector influences the direction and speed of the particles moving over it. The example above uses Perlin noise to generate vector directions for a more organic flow. Here is an explanation and more demos by Tyler Hobbs..

P5js Methods

draw(): Executes the code inside its block repeatedly, allowing for animation and interaction within the canvas.

fill(): Sets the color used to fill shapes.

arc(): Draws an arc or a portion of an ellipse.

p5.js: arc(x, y, w, h, start, stop, [mode], [detail]);
HTML5 Canvas: arc(x, y, radius, startAngle, endAngle, anticlockwise)

P5js Resources:

Full reference: https://p5js.org/reference

P5js online editor. Use the editor or a work in the editor to play with values, then move an HTML page.

P5js Starter

P5js Reference

Advanced Generative Art Techniques

Flow Fields

A grid-based technique where each cell contains a vector determining the direction of particle movement. By populating the field with small agents or particles, artists generate organic, undulating patterns that resemble fluid, wind, or magnetic currents. Subtle adjustments to vector generation—often via noise—produce continuously evolving, visually engaging animations.

Example: https://will-luers.com/DTC/dtc338-AI/javascript-p5js-flowfields.html

Description by Tyler Hobbs

Prompt: "Write a p5.js sketch that creates a flow field using Perlin noise, where 100 particles move according to the flow vectors. The sketch should visualize the paths in real time."

Perlin Noise & Noise-Based Techniques

The random() function in p5.js generates pseudorandom numbers. It can return a floating-point number between 0 and 1, a number within a specified range, or a random element from an array, depending on how it's used. It's useful for introducing unpredictability and variation in sketches.

The noise() function in p5.js uses Perlin noise: a smooth, gradient-based form of randomness that avoids abrupt changes and is often used to add natural variation in movement, color, or shapes. By sampling noise at various scales or "octaves," artists produce effects of terrains, clouds, or fluid dynamics. Controlled yet unpredictable.

random() vs noise()

Prompt: "Generate p5.js code that draws a 2D Perlin noise field in grayscale, continuously updating over time to look like clouds."

Particle Systems

Particle systems involve numerous small entities (particles) that each follow simple behavioral rules, typically with an emitter releasing new particles over time. By combining forces like gravity, drag, and random variation, these systems can simulate natural phenomena (like fire or smoke) or produce dense, mesmerizing compositions that evolve frame by frame.

Prompt: "Create a p5.js sketch of a particle system where new particles are emitted from the bottom center of the screen and rise upwards, fading out over time."

Boids / Flocking

Originating from Craig Reynolds's model of bird flocking, boids follow rules of separation, alignment, and cohesion to create emergent group movement or murmuration. Even with minimal constraints, the resulting swarming, flocking, or schooling visuals evoke lifelike patterns and make for captivating, dynamic scenes.

Prompt: "Write a p5.js sketch implementing boids flocking with 50 boids. They should avoid overlapping, try to move with neighbors, and stay within the canvas area."

Fractals & Recursive Structures

Fractals use recursive functions or iterative processes to reveal self-similar patterns across multiple scales. Techniques like L-systems (Lindenmayer systems), the Mandelbrot set, or tree recursion create visually infinite layers of detail and demonstrate how simple equations can generate hypnotically complex imagery.

Prompt: "Generate a p5.js fractal tree sketch that uses recursion to draw multiple branches from each node, with sliders to control branch angle and depth."

Cellular Automata

A grid-based system where each cell transitions between states based on rules involving its neighbors. Conway's Game of Life is the classic example, showing how seemingly complex organisms can arise from straightforward conditions. Artists extend these concepts to create evolving abstract patterns and even interactive art pieces.

Prompt: "Create a p5.js version of Conway's Game of Life with a grid of 50×50 cells, using random initialization, and animate each generation."

Data Visualization & Sonification

Turning data sets into visual or auditory experiences. This can range from straightforward charts to immersive representations where color, position, shape, or sound encodes underlying information. It blends aesthetic sensibilities with analytical rigor to offer deeper insights into complex data.

Prompt: "Create a p5.js data visualization of US debt over 50 years."