-
Notifications
You must be signed in to change notification settings - Fork 0
/
letters-demo.html
53 lines (50 loc) · 1.29 KB
/
letters-demo.html
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
<!DOCTYPE html>
<html>
<head>
<title>Murmuration</title>
</head>
<style type="text/css">
html, body {
padding: 0;
width: 100%;
height: 100%;
background: #eee;
}
letter {
position: absolute;
}
</style>
<body>
<script type="text/javascript" src="build/Murmuration.js"></script>
<script type="text/javascript">
function generateLetter() {
let el = document.createElement('letter');
const alphabet = "abcdefghijklmnopqrstuvwxyz";
el.innerHTML = alphabet[Math.floor(Math.random() * alphabet.length)];
return el;
}
const letters = [];
const letterCount = 100;
for(let i = 0; i < letterCount; i++) {
const letter = generateLetter();
letters.push(letter);
document.body.appendChild(letter);
}
const murmuration = new Murmuration({
worldWidth: document.body.offsetWidth,
worldHeight: document.body.offsetHeight,
starlingCount: letterCount,
onUpdate: function(starlings) {
for(let i = 0; i < letterCount; i++) {
let scale = (starlings[i].z * starlings[i].zMod)+1;
let transform = `scale(${scale < 0 ? 0 : scale})`;
let left = `${starlings[i].x}px`;
let bottom = `${starlings[i].y}px`;
Object.assign(letters[i].style,{transform,left,bottom});
}
}
});
murmuration.run();
</script>
</body>
</html>