JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="300"></canvas>
<ul>
    <li>Hover and some will follow</li>
    <li>Click and all will come</li>
</ul>

<h1>Messages:</h1>
<div id="message_area">
    <div id="circles_in_range">There are currently <strong>0</strong> circles near the cursor</div>
    <div id="absvx"><strong>Average absolute x velocity:</strong> 0</div>
    <div id="absvy"><strong>Average absolute y velocity:</strong> 0</div>
</div>

CSS

h1 {
    font-weight:bold;
    margin-top:10px;
}

#message_area {
    margin:5px;
    border:1px solid silver;
    border-radius:5px;
    padding:5px;
}

strong {
    font-weight:bold;
}

JavaScript

(function($) {
    /*
     * First we set up the canvas context and all the variables that will be used to calculate the circles' position and trajectory
     */
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        //p is the array of circles, n determines how large p gets (i.e. how many circles there are). clr is an array of color values (you can change them, add more, or subtract some)
        p = [],
        clr, n = 500;
    
    /* 
     * now we will instantiate some variables that will only be useful for analytical purposes to be displayed in the message area
     */
    //first something to track the total number of circles with a negative x or y trajectory to start
    var vxnegatives = 0;
    var vynegatives = 0;
    //this will count the sum of the radii of the circles to later display the average (sumradii/n)
    var sumradii = 0;
    //this will count the number of circles currently in range of the cursor
    var circlesinrange = 0;
    //this will keep track of the current absolute x and y velocities
    var absvx = 0;
    var absvy = 0;

    clr = ['red', 'green', 'blue', 'yellow', 'purple', 'white'];

    //Here the code iterates n times, creating a new circle to attach to the p array for each iteration
    for (var i = 0; i < n; i++) {
        p.push({
            //each circle starts in the center for both x and y
            x: w / 2,
            y: h / 2,
            
            //this determines the initial velocity of the circles. Math.random() gives a random value between 0 and 1, so vx and vy will be any number between 0 and 6. changing the 6 to 12 doubles the average initial velocity of the circles
            vx: Math.random() * 6,
            vy: Math.random() * 6,
            
            //here you set the radius of the circle to be any number between 0 and 4 plus 3. You can get more variation by increasing 4 and you can get a larger size...