Pixels Testing

100%

Pixels Testing

✓ Published1🌍 Public

Last edited Jul 4, 2022

Created on Jul 4, 2022

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.

AI-generated description

Decided to sit down and just create art.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pixels Testing

This example uses Canvas pixel manipulation to create an animated, generative art piece. The code initializes an `ImageData` buffer with random green values, then in each animation frame applies a cellular automaton-like filter using `getImageData` and `putImageData`. The algorithm calculates a blur from neighboring pixels and mixes it with a sharpened value based on a moving horizontal band, creating a shifting, organic texture. The animation runs via `requestAnimationFrame`, and a `drawImage` call subtly shifts the canvas each frame.

CCurran Kelleher

83% match

Loading thumbnail…

Fork of Taming the Dragon

This example shows an evolving, abstract visual pattern rendered on a canvas. A grid of pixels, initialized with random green values, undergoes a real-time iterative process that blends blur and sharpening effects. The user controls the balance between these effects by moving the mouse horizontally across the screen. The animation uses Canvas `getImageData` and `putImageData` to manipulate pixel data frame by frame, with a slight rotation, scaling, and translation applied to the canvas each frame.

CCurran Kelleher

70% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

69% match

Loading thumbnail…

Nintendo pixelation

The example converts a static image into a stylized NES-style pixelation by averaging colors in blocks of pixels and mapping them to the closest NES palette color in LAB color space. It processes the image in shuffled batches, updating the canvas progressively to show the transformation over time. The code uses D3 for selection and shuffling, Canvas `getImageData` and `putImageData` for pixel manipulation, and the `requestAnimationFrame` loop to animate the batch processing. The source image is loaded from "magritte.jpg," and the palette comes from the included `nes-palette.js`.

DDinoJay

69% match

Loading thumbnail…

Fork of Fork of Taming the Dragon

An endlessly shifting, organic pattern of green light fills the screen, its form evolving through a continuous process of blurring and sharpening driven by values read from the canvas's image data. Mouse movement controls the "amount" parameter, subtly altering the balance between smooth diffusion and crisp definition. This generative art piece uses Canvas `getImageData`, custom blur and sharpen calculations, and a scale/translate transform for visual feedback, all rendered in an animated loop without external libraries.

CCurran Kelleher

67% match

Loading thumbnail…

Taming the Dragon

This piece shows a vibrant, animated canvas of noise that evolves into flowing, organic patterns as the mouse moves. The work uses raw JavaScript and the Canvas API, employing `getImageData` and `putImageData` to create a feedback loop. Each frame applies a blur and sharpen effect to the green and blue color channels, with the mouse controlling the blending amount. The animation continuously re-renders the image data, creating a mesmerizing, self-organizing visual that resembles a living, digital organism.

CCurran Kelleher

67% match

Loading thumbnail…

Mathematical Graphic Patterns

This example creates an animated, abstract visualization of mathematical graphic patterns. A grid of 900 points is repositioned and resized over time, with each point’s radius and color changing continuously, producing a shimmering, organic composition on a canvas. The animation is built using the Canvas API, with a recursive `requestAnimationFrame` loop driving the updates. The code defines a custom `rgb()` helper and uses trigonometric functions to compute positions and radii, while a faint black overlay creates a fading trail effect. The visualization adapts to the browser window’s dimensions by resizing the canvas dynamically.

CCurran Kelleher

66% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

66% match