Skip to main content
100%

Antoine BERNIER (abernier)

✓ Published0🌍 Public
Aabernier
Last edited Jul 18, 2012
Created on Jul 18, 2012

A canvas-based animation shows a red dot traveling along a circular path, with its position driven by a duration-controlled easing function that produces a bouncing effect. The code uses the HTML5 Canvas API (`getContext('2d')`, `clearRect`, `arc`, `fill`) for rendering, and relies on `requestAnimationFrame` (with a Paul Irish shim) for smooth frame updates. Play and stop buttons, plus a range slider, let the user set the animation duration from 100 to 10,000 milliseconds. The animation logic separates easing from drawing, applying a bounce ease to the normalized time position before calculating the dot's coordinates via trigonometric functions.

AI-generated description

Similar vizzes

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
Loading thumbnail…

Draw circles on canvas

This canvas animation depicts a field of 2,500 circles, each randomly positioned and colored red or blue, drawn initially to a background canvas. Every 1.5 seconds, a new large circle (radius 80) is added to the foreground and progressively shrinks over time. While shrinking, circles are rendered as thick-outlined strokes; once they reach the minimum radius of 4, they are filled solid and permanently drawn to the background canvas, where they join the original static circles. The foreground canvas is cleared and redrawn every 20 milliseconds, creating a smooth pulsing effect as the shrinking circles fade into the static backdrop. The visualization uses the canvas API and requestAnimationFrame via a custom requestInterval helper for animation.

Aakre54
66% match
Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9
66% match
Loading thumbnail…

p5js Template

A p5.js template demonstrates a simple bouncing ball animation within a canvas. The sketch initializes a circle at a random position and moves it with constant horizontal and vertical speeds, reversing direction when it hits the canvas edges. The code uses p5.js functions `createCanvas`, `background`, `stroke`, `ellipse`, and the global `width` and `height` variables. It draws a red, unfilled circle with a stroke weight of four on a gray background, updating its coordinates each frame in the `draw` loop.

YYannael
65% match
Loading thumbnail…

Wiggling Circles

Four hundred colored circles wander randomly across a canvas, each assigned one of five warm hues by a D3 ordinal color scale. The animation runs on a `d3.timer`, updating each circle’s position by small random steps and redrawing them with Canvas 2D `arc` calls. The `globalCompositeOperation` set to `hard-light` blends overlapping shapes, creating shimmering color interactions. The data is procedurally generated in-browser, with random x/y coordinates, radii, and group assignments, and the rendering clears the canvas each frame before repainting.

Aangusgrant
65% match
Loading thumbnail…

Canvas Fiddling

A small animated square glides horizontally across a blank canvas, moving in discrete steps and disappearing from its starting position as it advances. The example demonstrates fundamental Canvas 2D drawing and animation using the HTML5 `getContext('2d')` API, with a rectangular fill drawn via `fillRect` and cleared each frame using `clearRect`. Driven by a `setInterval` timer at 20-millisecond intervals, the square’s position increments by one pixel per frame, creating a simple, linear motion loop without user interaction.

SStrunck
65% match
Loading thumbnail…

bouncy-ball

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

PPhilippe Rivière
65% match
Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock
65% match