Fork of Taming the Dragon

100%

Fork of Taming the Dragon

✓ Published1🌍 Public

Last edited Jul 5, 2022

Created on Jul 5, 2022

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.

AI-generated description

Decided to sit down and just create art.

Move the mouse to control parameters.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of Fork of Fork of Taming the Dragon

A generative animation fills the canvas with flowing, organic green fluid patterns that continuously evolve over time. The piece uses Canvas 2D `getImageData` and `putImageData` for per-pixel image processing, applying a blur and sharpen technique on the green channel, then doubling it for blue. Mouse position controls a blend amount between blur and sharpen, while subtle rotation and scaling transforms add slowly shifting motion. Randomly seeded green pixels blur together into softly glowing, branching formations as the animation loops.

CCurran Kelleher

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

84% match

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

80% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas piece generates a shifting grid of glowing colored circles that ripple outward in a spiral formation, creating a dynamic, screensaver-like visual effect. The pattern continuously redraws over a semi-transparent black background, leaving faint trails as the positions and radii of the circles evolve over time. Rendering uses the Canvas 2D API with `getContext('2d')` and `requestAnimationFrame` for smooth animation. Each circle’s color, size, and location are computed from sine and cosine functions of grid coordinates and a steadily incrementing time variable, producing a complex, mathematically driven display.

AAndre J Denais

74% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas visualization generates a shifting spiral of colored circles that expands outward in a grid-like pattern. The animation continuously updates using `requestAnimationFrame`, with each circle’s position and radius computed from trigonometric functions of grid coordinates and a slowly advancing time variable. Colors derive from sine-based RGB values, while a semi-transparent black overlay creates a fading trail effect. The code relies solely on the Canvas 2D API, using `getContext('2d')`, `arc`, and `fillRect`, with no external libraries.

RReyden Harris

72% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization, built with the Canvas API, generates a shifting field of colored circles arranged on a grid. The code applies mathematical functions to coordinates and radii, creating rhythmic patterns where circle positions and sizes oscillate over time. As the animation loops, it layers translucent dark rectangles to create a fading trail effect, while the circles' colors cycle through based on their grid position and the current time value. The entire canvas resizes dynamically to match the window dimensions, with the pattern always centered and scaled proportionally.

MMauricio García Benítez

72% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

The visualization displays an animated, generative pattern of colorful circles arranged in a grid. It simulates a modern-day screensaver with dynamic motion, where each circle's position, size, and color shift over time. The piece uses Canvas API calls for drawing, including `beginPath`, `arc`, and `fill`, and relies on `requestAnimationFrame` to drive the continuous animation. The effect is created through mathematical functions, such as sine and cosine, that calculate coordinates and radii based on grid indices and a time variable.

RRSSBDAE

71% match