Poulp

100%

✓ Published0🌍 Public

Last edited Apr 17, 2016

Created on Apr 17, 2016

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.

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/7b03f4e6783e910c91d3996b8aa06850'>Poulp</a>

Similar vizzes

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

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

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

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

85% match

Loading thumbnail…

Poulp

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.

YYannael

82% match

Loading thumbnail…

Corrige2

A p5.js sketch displays a photograph of a gestation crate, overlaid with a semi-transparent white rectangle that gradually fades as the user presses the spacebar. Each press reveals more of the French text "Corrigez s'il vous plaît, car il y a là une obscurité très nette," typed character by character from a string. Pressing the 'a' key resets the counter to zero, restarting the reveal. The image is loaded via `loadImage` from a Wikimedia Commons URL, and the sketch uses `createCanvas`, `background`, `image`, `text`, and `keyTyped` to handle drawing and interaction.

YYannael

64% match

Loading thumbnail…

p5js Template

A bouncing white circle moves across a gray canvas, reversing direction when it hits the edges. The sketch uses the p5.js library, with `setup()` initializing the canvas and random starting position, while `draw()` updates the ellipse’s coordinates each frame. Horizontal speed increases slightly on edge collision, while vertical speed flips sign. No external data is loaded; the example demonstrates basic animation and collision logic entirely through p5.js drawing functions.

UUtopiah

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

63% match