#CodepenChallenge 100 Dots: Follow the Mouse Pointer

These dots are following your mouse pointer.

Supposed to be, I wanted it to be a little bit creepy. Just like many eyes observing your every movement. But when I am doing it, I found that the movement is so cute, like confetti, so I made it colorful.

Instead of using the text dot (•), I changed it to a span that has border-radius to 50%. It is easier to manipulate after all.

I did not use any libraries, nor pre-processors in this one.

---

How I did it.

First of all, you have to go back to high school, and remember your trigonometry class. I will not cover-up the HTML and CSS codes, because I only used a simple border-radius, which I am sure, everyone can use comfortably.

Define the constants

First of all, we have to get the x and y location of the container of each circles.

// The circle
const p = i.querySelector('span');
// Getting the position of container of the circle
const q = i.getBoundingClientRect();
// 'x' position of container
const x1 = q.left;
// 'y' position of container
const y1 = q.top;

Then, we have to get each of the sizes of the circles and its container, to measure the boundary.

// Width of container
const iw = i.offsetWidth / 2;
// Height of container
const ih = i.offsetHeight / 2;
// Width of circle
const pw = p.offsetWidth / 2;
// Height of circle
const ph = p.offsetHeight / 2;

Finally, the position of the mouse

'x' position of the mouse
const x2 = e.clientX;
'y' position of the mouse
const y2 = e.clientY;

Compute the resources

Now, we have defined all the needed constants for the movement, let us do a little computation for the movement.

In order to have out circles follow the position of the mouse, we need to get the angle from the center position up to the position of the mouse. We have to use the Pythagorean Theorem for that.

Luckily, because the Javascript will do the most of the job, we just have to subtract the 'x' position of the center of the circle, and the 'x' position of the position of the mouse. Also, the 'y' position of the center of the circle, and the 'y' position of the position of the mouse.

And then, use the arc tangent squared function that was already provided by Javascript.

By the law, cos() is for the 'x' axis, and then sin() is for the 'y' axis (Yeah, I think it works like that).

let px = x2 - x1;
let py = y2 - y1;
let t  = Math.atan2(py, px);
let ax = iw + (pw * Math.cos(t));
let ay = ih + (ph * Math.sin(t));

It is weird if the circle come out from the boundary, right? So we have to do the collision for each circles, so that it will not come out from its boundary.

// Yeah, this is just a simple collision algorithm but it really does its job. Even thou it is just for square, I just taken an advantage of how the shapes looks, so it is quite fine.
if (x2 > x1 && y2 > y1) {
  px = (px + iw > ax) ? (ax - iw) : px;
  py = (py + ih > ay) ? (ay - ih) : py;
}
else if (x2 < x1 && y2 < y1) {
  px = (px + iw < ax) ? (ax - iw) : px;
  py = (py + ih < ay) ? (ay - ih) : py;
}
else if (x2 > x1 && y2 < y1) {
  px = (px + iw > ax) ? (ax - iw) : px;
  py = (py + ih < ay) ? (ay - ih) : py;
}
else if (x2 < x1 && y2 > y1) {
  px = (px + iw < ax) ? (ax - iw) : px;
  py = (py + ih > ay) ? (ay - ih) : py;
}

Finally, render the circle by its position.

p.style.left = (px + pw) + 'px';
p.style.top  = (py + pw) + 'px';

Conclusion

I am hearing many people saying that we don't need mathematics anymore in programming. I think they're wrong. Because in my opinion, if you don't know how the things works, you don't quite seem to know how to use the functions that are provided by each programming languages.

There are still so many things to learn that uses the principles that are taught on our mathematics class. Geometry is easier, but the statistics. We need it, example for the machine learning, deep learning, artificial intelligence, and any of the related principles. For game development, we need to learn physics, which is even with our current technology, it is not yet perfect.

Thank you for reading! If you have comments, suggestions, or reactions, please comment down below.

---

P.S. I am looking for better, smoother, and faster algorithm. if you could provide me, please comment down below.

---

Resources:
Where I read about Pythagorean theorem
Where I read about Javascript