Motion Blur + Chromatic Aberration

100%

Motion Blur + Chromatic Aberration

✓ Published0🌍 Public

Last edited Apr 14, 2014

Created on Oct 31, 2015

A single white ellipse traces a Lissajous figure on a black field, its motion captured as a smooth, time-averaged blur. The sketch applies per-channel scaling to simulate chromatic aberration, splitting the image into red, green, and blue layers. It uses Processing’s `P2D` renderer, `loadPixels`, and `updatePixels` to accumulate multiple samples per rendered frame, creating the motion-blur effect.

AI-generated description

Similar vizzes

Loading thumbnail…

Blur / Fade Effect

The example shows a blur and fade effect applied to an image, where a sharp version is revealed beneath a blurred overlay. It uses a clipping mask composed of multiple circles to gradually erase the blurred layer, creating a localized focus effect as the mouse moves. The code relies on D3.js for SVG manipulation and transitions, along with an SVG `feGaussianBlur` filter for the blur effect and a mask for the reveal. The rendering is interactive, triggered by mouse movement over the image.

CCBasis

65% match

Loading thumbnail…

Motion blur - Diagonal movement & Multiple filters

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

FFrissAnalytics

64% match

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

64% match

Loading thumbnail…

Pixels Testing

The visualization animates a full-screen canvas of green noise that shifts between blurry and sharp textures over time. It initializes random green pixel values, then continuously reads and rewrites the image data using Canvas `getImageData` and `putImageData`. Each frame applies a simple convolution blur from neighboring pixels, then blends between that blurred result and a sharpened version based on the current pixel’s horizontal position and an incrementing time variable, creating a wave-like patterning effect across the screen.

CCurran Kelleher

61% match

Loading thumbnail…

Looper

Looper is an animated canvas visualization that cycles a single white dot along a circular path over time. It can record a 50-frame GIF animation by accumulating multiple motion-blurred samples per frame, blending them with canvas `getImageData` and `putImageData`. The animation runs continuously, but pressing a mouse button adjusts the phase based on cursor position. It uses the gif.js library to encode frames into an exported GIF file, with a configurable shutter angle and samples-per-frame for motion blur.

MMAKIO135

58% match

Loading thumbnail…

Blobbing Particles IV

Three layers of colored particles—green, blue, and red—drift smoothly across the canvas, merging into blobby clusters within each layer while remaining visually distinct across layers. Each particle is a radial-gradient circle clipped to a distance-limited Voronoi cell, so nearby particles appear to fuse together. The animation uses d3.distanceLimitedVoronoi to compute cell boundaries, SimplexNoise to drive continuous movement, and D3 transitions to update positions and opacity in real time, creating a fluid, organic swarm effect.

KKcnarf

58% match

Loading thumbnail…

Colour-full force

Twenty-eight colored circles drift across a black SVG canvas in a soft, gooey cluster. Each circle is assigned a rainbow hue and a random radius, with alternating circles receiving a blurred filter effect that makes them blend together. The motion is driven by D3’s `forceSimulation` with charge, center, and collision forces, while the rendering uses SVG circles and a `feGaussianBlur` with a `feColorMatrix` filter to create the liquid-like appearance.

AAlireza-Dezfoolian

58% match

Loading thumbnail…

Blobbing Particles

Two layers of colored particles drift and bounce across a toroidal plane, each layer rendered as semi-transparent cells whose shapes merge and separate. The cells are computed with the `distanceLimitedVoronoi` plugin, and each cell’s fill uses a radial gradient, causing a flickering effect as the cell’s bounding box changes size. The animation runs via `d3.timer`, with particle positions updated by random acceleration and damping, and SVG paths are redrawn each frame.

KKcnarf

57% match