-
Notifications
You must be signed in to change notification settings - Fork 0
/
circles-demo.html
64 lines (59 loc) · 1.59 KB
/
circles-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
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<title>Murmuration</title>
</head>
<style type="text/css">
html, body {
padding: 0;
width: 100%;
height: 100%;
background: #eee;
}
#canvas {
width: 100%;
height: 100%;
background: white;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="build/Murmuration.js"></script>
<script type="text/javascript">
const colours = [
'#e95eac',
'#eeaad0',
'#9b60e9',
'#c7abee',
'#c4c4c4',
'#dcdcdc',
];
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.canvas.width = width;
context.canvas.height = height;
const zoom = 2;
const murmuration = new Murmuration({
worldWidth: document.body.offsetWidth,
worldHeight: document.body.offsetHeight,
starlingCount: 2000,
onUpdate: function(starlings) {
context.clearRect(0, 0, canvas.width, canvas.height);
for(let i = 0; i < starlings.length; i++) {
const minScale = 0.01;
let scale = (starlings[i].z * starlings[i].zMod) + zoom;
let x = starlings[i].x;
let y = starlings[i].y;
context.beginPath();
context.arc(x, y, scale > minScale ? scale : minScale, 0, 2 * Math.PI, false);
context.fillStyle = colours[i % colours.length];
context.fill();
}
}
});
murmuration.run();
</script>
</body>
</html>