Create a Proximity Graph Animation

An introduction to 2D HTML5 Canvas and the animation loop

Image source: Author

I’m trying to make the best out of these quarantine days, and learning new things has been my favorite pastime. A few days ago, I stumbled upon How to GraphQL while working through the Gatsby tutorial. I really liked the background animation, and I decided to replicate that using the HTML5 Canvas.

How to GraphQL background animation

If you are curious to see the end result, I have published a demo and the source code on GitHub and CodePen.

Without further ado, let’s get started.

Table of Contents

· Let’s Define the Work
· Set Up the HTML and Canvas
· Draw the Points
· Implement the Animation Loop
· Move the Points
· Draw the Lines
· Polish

Let’s Define the Work

The animation works by moving points in a fixed direction with constant speed and by drawing lines between any two points that are close to each other.

Based on that, we’ll break down our work into the following tasks:

• Set up the HTML and Canvas
• Draw the points
• Implement the animation loop
• Move the points
• Draw the lines
• Polish

Set Up the HTML and Canvas

We’ll start by creating a basic HTML layout with a <canvas> element.

We’ve given an ID to the <canvas> element, which we’ll use to access the element and its API via JavaScript, as well as width and height in pixels.

Draw the Points

With the<canvas> element in place, we can start drawing things on it by using JavaScript and the 2D-rendering context API.