Poulp

100%

✓ Published0🌍 Public

Last edited Apr 17, 2016

Created on Apr 17, 2016

This interactive p5.js sketch displays a background image of a textured footer pattern, overlaid with a semi-transparent red tint applied to the full canvas. The same image is drawn again at the mouse position, scaled to a smaller size, creating a movable magnified or cloned fragment that follows the cursor. The code uses p5.js functions `preload`, `setup`, `createCanvas`, `image`, and `tint`, loading the image from an external URL. The static backdrop remains visible while the cursor-driven copy updates continuously in the `draw` loop.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Poulp

This example uses p5.js to display a Burmese kitten photograph on a 500-by-500 canvas. The image is drawn twice: once at a fixed position and once with its x-coordinate and width oscillating based on cosine functions of the current time in milliseconds. The animation continuously shifts the moving copy, while the static copy remains centered. Pressing the “a” or “b” key changes the background to magenta or white, and pressing the left arrow key sets a random pink background, using p5’s `keyTyped` and `keyPressed` callbacks.

YYannael

82% match

Loading thumbnail…

Poulp

A single kitten photograph is duplicated and animated across a 500-by-500 pixel canvas. One copy moves in a large circular path driven by the cosine of elapsed milliseconds, while a second static copy remains fixed. The p5.js `draw()` loop continuously updates the moving image’s position and size, and the background can be cleared or recolored by pressing the spacebar, which triggers either a white or random-color background via `keyTyped` and `keyPressed` handlers. The image is loaded from a Wikimedia Commons URL using `loadImage()`.

YYannael

81% match

Loading thumbnail…

Poulp

This visualization uses a webcam feed and a static image of a kitten, both rendered on a 500x500 canvas with p5.js. The video capture is displayed in the top-left corner and inverted with the `filter('INVERT')` method, while the kitten image appears at a fixed position. Pressing the spacebar triggers a random background color change through both `keyTyped` and `keyPressed` event handlers. The code relies on p5.js core and the p5.dom add-on for video capture, showing live camera input overlaid with an imported Wikimedia image.

YYannael

78% match

Loading thumbnail…

Poulp

This visualization uses a live webcam feed combined with a static kitten image, processed through a p5.js sketch. The code captures video from the user’s camera and overlays it on a 500×500 canvas, applying an `INVERT` filter each frame to create a negative-color effect. A kitten photo, loaded from Wikimedia Commons, is drawn beneath the video layer. Pressing the spacebar triggers a random pastel background color change, though the exact key-handling logic uses both `keyTyped` and `keyPressed` with inconsistent condition checks. The piece demonstrates real-time image manipulation and user interaction via p5.js’s `createCapture`, `loadImage`, and `filter` APIs.

YYannael

78% match

Loading thumbnail…

Poulp

This example uses the p5.js library to overlay a live webcam feed on a kitten photograph from Wikimedia Commons. The sketch captures video through the browser’s `createCapture(VIDEO)` API, displays it at the top-left corner of a 500×500 canvas, and applies the `filter('INVERT')` effect to the entire canvas each frame. Pressing the spacebar triggers a background color change using `keyPressed` or `keyTyped`. The kitten image is loaded with `loadImage` and drawn with `image()`, while the inverted video creates a surreal composite.

YYannael

78% match

Loading thumbnail…

fresh block

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.

YYannael

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

68% match

Loading thumbnail…

p5js Template

This example shows an abstract generative drawing on a 500-by-500 canvas, where a semi-transparent rectangle is placed at random positions each frame, while an ellipse centered at the canvas origin resizes based on the current mouse coordinates. The piece uses the p5.js library’s `createCanvas`, `draw`, `fill`, `stroke`, `rect`, and `ellipse` functions to produce layered, translucent shapes with color values that mix fixed and mouse-driven parameters. The rendering approach is purely procedural, with no external data source, and the mouse position directly influences the ellipse’s width and height, creating a dynamic, interactive visual effect.

YYannael

65% match