Skip to main content
100%

Poulp

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

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.

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>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/1700fbf12a6c5ff05a018afea6d6e512'>Poulp</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/534947914f36fda9ed4541a9e52d33c3'>Poulp</a>

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

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/646aa5d5ea6a084c615cf4c9a53e1f27'>Poulp</a>

Similar vizzes

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
94% 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
94% 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
86% match
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
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
78% match
Loading thumbnail…

Photobooth

This example creates a photobooth that captures images from a user's webcam and displays them in a gallery. The video monitor cycles through CSS filter effects—including grayscale, sepia, blur, hue rotations, and inversion—when clicked, while a hidden canvas draws the current video frame to generate snapshot images. The capture process uses the `navigator.getUserMedia` API for webcam streaming and the canvas element's `drawImage` and `toDataURL` methods to save frames as webp images. The animations are powered by JavaScript timers controlling the video element and canvas operations.

11wheel
63% match
Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135
62% match
Loading thumbnail…

animated distortion

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

PPatrick Wojda
62% match