In this app, we explore a fun and interactive animation effect using HTML5's canvas element and JavaScript. The effect consists of multiple bouncing balls that move randomly across the screen, and they respond to the user's mouse position by changing their size when hovered over. Additionally, new balls are constantly generated, adding to the dynamic nature of the animation.

What Does the Code Do?

The code leverages the HTML5 canvas element to render animated balls on the screen. It uses JavaScript to control their behavior—randomizing their size, position, and movement. Here's a breakdown:

Canvas Setup:
The canvas is set to fill the entire window, making the animation responsive to different screen sizes. When the window is resized, the canvas resizes to fit the new dimensions.
Ball Generation:
A function is used to create a ball with random properties, including color, size, and speed. The balls are stored in an array for easy manipulation and rendering.
Dynamic Interaction:
When the user moves the mouse, the balls react by growing in size if the mouse is close enough. This interaction adds an extra layer of responsiveness to the animation.
Ball Physics:
The balls bounce off the edges of the canvas. Gravity is applied to simulate a more realistic effect, with balls gaining vertical speed as they fall and bouncing off the bottom of the canvas. The horizontal movement also bounces off the sides.
Animation Loop:
A loop is used to constantly redraw and update the positions of the balls on the canvas, creating a continuous animation. A setInterval function is used to add new balls periodically while removing the oldest ones, keeping the number of balls constant at 50.

JavaScript Methods Used:

getElementById(): To access the canvas element from the DOM.
getContext("2d"): To get the drawing context on the canvas.
Math.random(): Used to generate random values for various ball properties, such as position, velocity, and size.
addEventListener(): To listen for mouse movements and window resizing events.
requestAnimationFrame(): To create a smooth animation loop for the bouncing balls.
setInterval(): To periodically add and remove balls from the array.

Who Is This Post For?

This post is for web developers and designers who want to add interactive and visually appealing animations to their website. If you're looking to add some dynamic behavior using the canvas element, this is a great starting point for learning about canvas-based animations, mouse interactions, and using JavaScript to manipulate 2D graphics.

When to Use Something Like This?

You can use this animation effect for a variety of creative and interactive elements on your site. It’s particularly useful for background animations, interactive visualizations, or simply to add a bit of flair to a webpage. The techniques covered in this post can also be extended to more complex animations, making it a good foundation for learning interactive web animations.

🖱️ Interactive + Dynamic: This type of effect can add an extra layer of interactivity and excitement to your webpage, encouraging users to engage with your content.

💡 Tips: You can tweak the gravity, velocity, and interaction rules to create different kinds of effects—play around with the values to see what works best for your project!

Browse Darma projects

Items

Maze Tilt: A Gravity Ball Puzzle Game

Creating Bouncing Balls with Dynamic Int...