1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
/**
* Mousey Index
* @module src/index.jsx
*/
import { initializeDOM } from "./utility/index.js";
// We will build 100 elements
let elementCount = 100;
// Keep track of current element offset
let currentIndex = 0;
// Set when we're done
let almostDone = 0;
// Append a bunch of elements
let elements = [];
// Keep track of coordinates
let coordinates = [];
/**
* Start the application and bind events
*/
function initialize() {
initializeDOM();
makeElements();
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("click", handleClick);
animate();
}
/**
* Animate the divs
*/
function animate(time) {
requestAnimationFrame(animate);
updateElements(time);
}
/**
* Update one element
*/
function updateElement({ element, coordinate, percent, time }) {
// Slow down time!
time /= 100;
// Set the color, size, and position
let hue = Math.round((percent * 360 + time) % 360);
let size = (Math.cos(percent * 10 + time / 30) + 1 / 2) * 50;
let xpos = coordinate.pageX + Math.sin(percent + time / 30) * 20;
let ypos = coordinate.pageY + Math.cos(percent + time / 30) * 20;
// Update the element
element.style.width = size + "px";
element.style.height = size + "px";
element.style.left = xpos + "px";
element.style.top = ypos + "px";
element.style.background = `hsl(${hue}deg 100% 50%)`;
}
/**
* Update the current element positions
*/
function updateElements(time) {
// Loop over all the elements
for (let index = 0; index < coordinates.length; index += 1) {
// Get the element index offset by the current index
let elementIndex =
(index - currentIndex + coordinates.length) % coordinates.length;
// Get the next DIV and update it
let element = elements[elementIndex];
let coordinate = coordinates[elementIndex];
// Convert the index to a value between 0..1
let percent = elementIndex / elementCount;
updateElement({ element, coordinate, percent, time });
}
}
function handleClick() {
almostDone = 0;
}
/**
* Handle when we click on the page
*/
function handleMouseMove(event) {
// Get the mouse coordinates
const { pageX, pageY } = event;
appendCoordinate({ pageX, pageY });
}
/**
* Append a coordinate to the rotating list
*/
function appendCoordinate({ pageX, pageY }) {
if (almostDone > elementCount) return;
coordinates[currentIndex] = { pageX, pageY };
currentIndex = (currentIndex + 1) % elementCount;
almostDone += 1;
}
/**
* Make a bunch of DOM elements
*/
function makeElements() {
for (let index = 0; index < elementCount; index++) {
let element = makeElement();
elements.push(element);
}
}
/**
* Make a DOM element
*/
function makeElement() {
let element = document.createElement("div");
element.style.position = "absolute";
element.style.transform = "translate3d(-50%, -50%, 0)";
document.body.appendChild(element);
return element;
}
// Run the application
initialize();
|
