fresh block

100%

✓ Published0🌍 Public

Last edited Apr 16, 2016

Created on Apr 16, 2016

The sketch alternates between a black and a white background every second, layering a small, semi-transparent image at random positions across the canvas whenever the mouse is pressed. It uses the p5.js library, specifically the `preload`, `setup`, and `draw` functions, along with `loadImage`, `image`, `background`, and `millis`. The displayed image is loaded from an external URL, and the random placement is driven by `random(width)` and `random(height)`. The composition shifts abruptly between states, producing a flickering, collage-like 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>

Similar vizzes

Loading thumbnail…

fresh block

This example displays a static image of a decorative banner, loaded from an external URL and drawn onto a 640×480 canvas using p5.js. The sketch preloads the image file in the `preload()` function and renders it with `image(img, 0, 0, 400, 200)` in `setup()`. Although the `draw()` loop contains logic to change the fill color based on mouse input, no shapes are actually drawn in that loop, so the visualization remains purely a fixed image. The code relies on p5.js’s `loadImage`, `createCanvas`, and `image` functions.

YYannael

83% match

Loading thumbnail…

fresh block

A blank canvas follows the mouse as a black or white circle, depending on whether the mouse button is pressed. The sketch uses p5.js’s `setup` and `draw` functions, with `createCanvas` setting a 640×480 drawing area and `ellipse` rendering an 80×80 circle at the current cursor position. The fill color toggles between black and white based on the `mouseIsPressed` state, creating a simple interactive painting tool. No data source is involved; it is a direct mouse-driven drawing example.

YYannael

77% match

Loading thumbnail…

fresh block

This interactive sketch displays a photograph of a gestation crate overlaid with a semi-transparent blue wash and a French sentence that appears letter by letter. Pressing the spacebar reveals one additional character, while pressing “a” resets the text to empty. Built with p5.js, it loads the image via `loadImage()`, renders it with `image()`, and uses `keyTyped()` to manage the progressive text reveal.

YYannael

76% 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…

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

74% 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

73% 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

73% match

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

73% match