blob: a5849e27420f17eb7132e0c430a461fc86bbb265 (
plain)
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
|
const N_DOTS = 200
// Helper to generate random IDs such that we can easily
// refer to each node
function getRandomId(prefix) {
return `${prefix}-${Math.round(Date.now() * Math.random())}`
}
// Random coordinates bounded
// by the size of the page
function getRandomCoords(
width = window.innerWidth,
height = window.innerHeight
) {
return {
cy: Math.random() * height,
cx: Math.random() * width
}
}
// iterate over a list of ids,
// query the DOM for the node,
// compute a random position,
// and then set it on the node
function setRandomCoords(ids) {
for (let id of ids) {
let circle = document.getElementById(id)
let coords = getRandomCoords()
circle.style.cx = coords.cx
circle.style.cy = coords.cy
}
}
window.onload = function() {
// Get our root node
let rootNode = document.getElementById('root')
let circles = ''
let ids = []
for (let i = 0; i < N_DOTS; i++) {
let id = getRandomId('circle')
circles += Templates.circle(id)
ids.push(id)
}
// we don't need an id on this template,
// so we pass undefined which forces the
// "default" value defined in the function
rootNode.innerHTML = Templates.svg(undefined, circles)
setRandomCoords(ids)
document.onmousemove = function(event) {
setRandomCoords(ids)
}
}
|
