Skip to main content
100%

FnCrandow

✓ Published0🌍 Public
YYannael
Last edited Apr 16, 2016
Created on Apr 16, 2016

This interactive visualization combines live weather data with a dynamic, generative drawing canvas. It loads a background image and fetches current humidity levels for Moscow from the OpenWeatherMap API using p5.js’s `loadJSON` function. The humidity value directly controls the alpha transparency of a series of randomly placed circles, creating a weather-responsive overlay. The main drawing loop continuously updates the canvas, adding translucent red rectangles and the background image at random positions, while a time-based timer alternates the background between white and black to create a flickering, animated effect.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5df40d75ef05f4b557973f56e67f55d2'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/8e72e56f6a077cd137d58dac6ea304f2'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/1cde04658404d51c24d71c04f3ec4927'>FnCrandow</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/2511c41e41dcc0a36ed03477b207e90e'>FnCrandow</a>

Similar vizzes

Loading thumbnail…

fresh block

This visualization uses the p5.js library to draw a field of translucent cyan circles on a blue background, layered with a fixed line of text. It loads live weather data from the OpenWeatherMap API for Moscow, Russia, and uses the reported humidity percentage to control the alpha transparency of the circles. Each circle’s position is randomly generated on every frame, creating a subtle shimmering effect as the drawing updates continuously.

YYannael
79% match
Loading thumbnail…

FnCrandow

The visualization alternates between a black and white background, flashing a semi-transparent image at random positions across the canvas each second. Built with p5.js, it loads a footer background image from an external URL in `preload()`, then uses `random()` to set its coordinates during `draw()`, with a `millis()` timer controlling the refresh interval. Mouse presses toggle the background color, while the tint function modulates the image’s appearance.

YYannael
79% match
Loading thumbnail…

OpenFoodFact

A canvas sketch uses p5.js to display a weather visualization based on live data from the OpenWeatherMap API. The code loads current weather for Moscow, Russia via `loadJSON`, then draws 50 randomly positioned ellipses whose fill transparency is mapped to the reported humidity percentage. A static sentence of sample text also appears in the top-left corner. The background shifts to a blue tone, while the alpha of the cyan ellipses varies with the humidity value retrieved from the JSON response.

YYannael
77% match
Loading thumbnail…

fresh block

This example uses p5.js to display a collection of semi-transparent circles over a solid blue background. The sketch loads current weather data for Moscow from the OpenWeatherMap API using `loadJSON`, and the humidity value from the JSON response controls the alpha transparency of the circles. A static sentence of text is also drawn on the canvas. The circles’ positions are randomized each frame with `random(width)` and `random(height)`, creating a shifting, dotted pattern whose opacity fluctuates with the weather.

YYannael
76% match
Loading thumbnail…

fresh block

This example uses the p5.js library to display a static block of sample text over a blue canvas. It fetches current weather data for New York City from the OpenWeatherMap API, then extracts the humidity value to control the transparency of 50 randomly placed circles. The drawing function renders the text and ellipses each frame, while the background color remains constant. The data is loaded asynchronously via loadJSON, with the humidity affecting only the circle fill alpha.

YYannael
71% match
Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes
66% match
Loading thumbnail…

OpenFoodFact

This visualization demonstrates a simple p5.js sketch that loads product data from the OpenFoodFacts API. The canvas displays a fixed text string while the code fetches JSON from a specific product URL, though the loaded data is not currently visualized. The drawing loop renders text on a 640 by 480 canvas, and the `loadJSON` function retrieves the product information asynchronously. The code includes a commented-out weather-drawing function that would use humidity values to control ellipse opacity, but this behavior is not active in the current version.

YYannael
66% match
Loading thumbnail…

Gist 3b05ad028ea1cbc56ccb696600b50566

This example displays a live weather dashboard that updates every minute. It shows the current location, temperature in Fahrenheit, weather description, and a clothing recommendation icon. The visualization uses a simple HTML widget via the Script Kit `widget` API, refreshing through `setInterval`. Weather data is fetched from the fcc-weather-api.glitch.me endpoint using `fetch`, while the displayed clothing item is selected by a `getTop` function based on Celsius temperature. The interface renders as a single card, with the date and time shown below the weather details.

HHypercubed
65% match