CANVAS PELOTAS

100%

CANVAS PELOTAS

✓ Published0🌍 Public

Last edited Aug 6, 2023

Created on Aug 6, 2023

This example displays a single blue ball bouncing across a canvas that fills the browser window, rendered using the Canvas API. The prototype-based `Balls` object uses `ctx.arc` with `fillStyle` to draw the circle, while random color and velocity generator functions are defined but not yet utilized. The JavaScript code sets up the canvas dimensions dynamically through `window.innerWidth` and `window.innerHeight`, and positions a transparent heading over the visualization.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bouncing Balls

Ten colorful circles bounce around a canvas, affected by gravity and repelling each other when they touch. Users can click and drag any ball to fling it, with a spring-like pull force applied toward the mouse cursor. The simulation runs on HTML5 Canvas with requestAnimationFrame, using physics calculations for velocity, dampening, and collision detection between boundaries and other circles.

CCurran Kelleher

72% match

Loading thumbnail…

Bouncing Balls

Bouncing Balls demonstrates a physics simulation of colorful particles colliding and bouncing within a canvas. Clicking adds new balls to the scene. The visualization uses D3’s `forceSimulation` with `forceCollide`, `forceX`, and `forceY` to handle particle interactions, while a custom `timer` loop applies gravity and wall collision logic. Rendering is done via the Canvas 2D API, with trails, velocity lines, and arrowheads colored by speed using HSL values.

CCurran Kelleher

71% match

Loading thumbnail…

Untitled

This example shows a static soccer pitch drawn on a Canvas element, with a white ball and a player marker that move toward a target point. The pitch includes all standard markings—midline, center circle, penalty areas, goal boxes, and corner arcs—rendered with Canvas 2D `rect`, `arc`, and `lineTo` calls. A `requestAnimationFrame`-driven loop animates the ball’s movement, which uses trigonometry to calculate direction and applies a speed decay factor, while the player moves linearly toward its destination. The code uses plain JavaScript and the Canvas API directly without any external libraries.

MMKlaasman

67% match

Loading thumbnail…

Bouncing Balls

Fifteen circles bounce in a sinusoidal wave across a dark background. Each ball follows a vertical, sine-based path at a fixed horizontal interval, with its vertical position shifting over time to create a flowing, animated pattern. The visualization uses D3.js version 7’s `select`, `range`, `scaleOrdinal`, and `schemePastel2` to generate a pastel color palette for the circles. The animation is driven by a JavaScript `setInterval` timer, updating the circles’ `cy` attributes at roughly 60 frames per second via D3’s `.join()` API.

EErik Sundahl

66% match

Loading thumbnail…

Ball Bounce

A circle rests at the center of the screen, and the user can click and drag it with the mouse. Upon release, the ball's velocity is calculated from the drag distance and time, causing it to move and bounce off the window edges. The ball can be grabbed again mid-motion to be thrown anew. The visualization uses D3 v7’s `select`, `timer`, and event handlers on the SVG to manage rendering, with state tracked for position and momentum.

Hhmkyriacou

65% match

Loading thumbnail…

Balls at random : Jul 29,2021

One hundred circles, each filled with a red-to-blue linear gradient, animate randomly across a black SVG canvas over five seconds. The visualization demonstrates basic D3 v6 selection, data binding, and transition methods, using `d3.select` to append an SVG and `transition().duration()` to move each circle’s `cx` and `cy` attributes. The circles, with a radius of 20 and 80% opacity, also receive a gradient stroke via the `url(#svgGradient)` reference. No external data is involved; positions are generated from `Math.random()` multiplied by each index.

NNita

63% match

Loading thumbnail…

The (Ping) Pong Game

The (Ping) Pong Game is a two-player arcade game rendered on a 300x300 HTML5 Canvas, where a ball bounces between a top paddle and a mouse-controlled bottom paddle. The simulation tracks collisions between the ball and paddle edges, adjusting the ball’s angle and speed upon edge hits, and increments scores until one player reaches 10 points. The code uses the Canvas API for drawing, JavaScript classes for game entities (GameView, Paddle, Ball, Play), and mouse event listeners for input. This example, based on the book *JavaScript Crash Course*, demonstrates interactive collision detection and score tracking in a minimal, browser-based setup.

AAxVa 🐍 💪

63% match

Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

63% match