Taming the Dragon

100%

Taming the Dragon

✓ Published1🌍 Public

Last edited Jul 5, 2022

Created on Jul 5, 2022

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.

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

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

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

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

68% match

Loading thumbnail…

Untitled

This visualization shows a simulated swarm of glowing particles that respond to mouse movement, creating a dynamic, organic flow across the screen. The particles are governed by a physics system using `d3.forceSimulation` with forces for centering, collision, and velocity, while each particle’s position and trail are drawn on an HTML5 `<canvas>` via `requestAnimationFrame`. The code uses `d3.scaleLinear` to map distance and speed to color and opacity, and the mouse interaction adjusts the simulation’s force strengths in real time. The rendering relies entirely on canvas 2D context methods like `arc` and `fillRect`, with a dark background from `styles.css`.

Eemanuelemurgolo

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

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

66% match

Loading thumbnail…

Mouse Interactions

A black canvas responds to mouse movement by tracking the cursor with a glowing radial-gradient circle and a white text label reading “3v@n.” Simultaneously, an animated white line chart grows from left to right, plotting a random walk that meanders vertically across the screen. The visualization uses D3 v7 to manage SVG elements, with event handlers on `mousemove` and `click` updating the cursor marker, while a `setInterval` drives the chart’s incremental path construction and opacity fade.

Bblockmarket

66% match