Skip to main content
100%

OpenFoodFact

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

This example uses the p5.js library to load a product from the OpenFoodFacts API and display a fixed text string on a 640×480 canvas. It fetches JSON data from a specific product URL via `loadJSON`, then logs the response to the console. The draw loop renders the sentence "The quick brown fox jumped over the lazy dog." at a fixed position, though no product data is visually represented on screen.

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/7c590fd63e4a7c0129ee508d20181a9b'>fresh block</a>

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

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

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

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/0dc1cfb709203ecb5002d8afb3ff7ef6'>OpenFoodFact</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/c032001de11c41f9e96c6ba4d4c3033d'>OpenFoodFact</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/ac885bdffb076e428c1fc560a2abaf50'>OpenFoodFact</a>

Similar vizzes

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
88% 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
73% match
Loading thumbnail…

fresh block

A p5.js sketch renders the sentence "The quick brown fox jumped over the lazy dog." in a 640 by 480 canvas, displaying the text at a fixed position with a 30-pixel font size. The code uses the p5.js `createCanvas` and `text` functions, with `setup()` initializing the canvas and `draw()` repeatedly writing the string. No interactive or animated elements are present, and the example does not load external data, as evidenced by the commented-out `httpGet` call.

YYannael
72% match
Loading thumbnail…

fresh block

This example displays the sentence "The quick brown fox jumped over the lazy dog." as static text on a 640×480 canvas using the p5.js library. It also plays a doorbell sound file, loaded via `loadSound()` from p5.sound, with volume set to 0.1. The code does not render any data visualization, animation, or interactive elements beyond the text and audio playback.

YYannael
69% match
Loading thumbnail…

Products

This example shows the raw contents of a JSON file containing product data by logging it to the browser’s developer console. The visualization relies on the D3.js library’s `d3.json` method to asynchronously fetch the file from a local Windows file path and pass the parsed result to a callback function. The page itself displays no visual elements; instead, the code outputs the data structure directly to the console using `console.log`. The HTML document contains a placeholder `div` element, while the actual import function is present but commented out in the script tag.

Ppablocenfo
63% 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
63% 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
61% match
Loading thumbnail…

fresh block

A p5.js sketch displays the string "Un exemple" one character at a time, with the current character rendered in large yellow text on a blue rectangle against a gray background. Pressing the spacebar advances the counter to show the next character in the sequence. The code uses the p5.js `setup`, `draw`, and `keyTyped` functions, along with `textFont`, `textSize`, and `fill` to style the output. The text font is set to "Alpha Sausage," and the canvas is fixed at 500 by 500 pixels.

YYannael
60% match