Canvas Animations 1: moving objects

This is the first chapter of my journey into canvas animations.

Lately, I’ve been exploring canvas animations, starting with the basics and gradually adding complexity. I’m used to creating SVG-based graphics, but I wanted to experiment with canvas to make my visuals more dynamic and interactive. While SVG is great for scalable and precise vector graphics, I was drawn to canvas for its ability to handle complex animations, particle effects, and real-time rendering.

Initially, I began with simple animations, like moving a single element across the screen, just to understand how the canvas API and rendering loop work. As I grew more comfortable, I started introducing more elements, interactivity, and effects, experimenting with concepts like easing, particle systems, and physics-based motion.

What excites me most is seeing how small code adjustments can create mesmerizing visual effects. Each step—from simple movement to more advanced animations—has helped me better understand timing, optimization, and creative coding techniques. Now, I’m focusing on refining my approach, making animations smoother and more efficient while exploring WebGL, shaders, and generative art to push my creativity even further.

The examples that follow represent the first chapter of this new experience, capturing my early experiments and the gradual evolution of my work in canvas animations.

It all started with a simple yet intriguing experiment: a circle moving across the canvas. Its initial position, direction, and movement speed are randomized using a Gaussian curve algorithm, creating natural variation in motion. This small project sparked my curiosity and set me on a path to explore more advanced techniques.

The next step was to add many circles and let them move freely across the canvas. With each iteration, I refined how they interacted, experimented with different motion patterns, and started exploring ways to create visually appealing behaviors.

By redefining the valid area where the circles can move, I was able to create a sort of attraction effect—where all the particles are drawn toward a specific area. Once they reach this zone, they remain confined within its boundaries, unable to leave. This introduced a new layer of controlled chaos, adding depth and structure to the animation.

To achieve this, I structured my code using a set of JavaScript classes:

• A main class to manage the canvas size and animation timing.
• A second class to handle the points' positions and movement logic.
• Later, I introduced a third class responsible for drawing and animating lines that connect each point to the canvas borders.

Again, the number of lines generated for each point and their positions on the border are randomized (within predefined boundaries) using the same Gaussian-based algorithm, adding an organic and natural feel to the final composition.

Mixing points and lines, and specifying different parameters for quantity, speed, color, and opacity, creates highly unique and dynamic visual effects.

I’ll continue experimenting with this kind of animation — my ultimate goal is to drive these visuals with real data, transforming any kind of data source into an ever-evolving, generative image.