-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathspin.html
99 lines (85 loc) · 3.48 KB
/
spin.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
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
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
}
canvas {
position: absolute;
width: 100vw;
height: 100vh;
}
section {
position: absolute;
width: 100vw;
height: 100vh;
font-family: sans-serif;
text-align: center;
}
h1 {
font-size: 14vw;
margin: 0;
}
.container {
background: rgba(0,0,0,0.1);
}
</style>
<canvas id="canvas-front"></canvas>
<section id="section">
<div class="container">
<h1>csv.london</h1>
<p>A gather of news nerds, first Tuesday of each month</p>
</div>
<a href="https://bl.ocks.org/mbostock/c66ab1426f4b8945a7ef">Animation based on this bl.ock</a>
</section>
<script>
/* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});
var canvasFront = document.getElementById("canvas-front");
var section = document.getElementById("section");
var contextFront,
scale = window.devicePixelRatio;
var width,
height,
ringRadius,
ringSeparation,
n, m;
function resize() {
width = section.offsetWidth
height = section.offsetHeight
ringRadius = width / 24
// ringSeparation = 1.5 * ringRadius
ringSeparation = 65
n = (width + ringRadius) / ringSeparation
m = (height + ringRadius) / ringSeparation
if (scale > 1) {
canvasFront.style.width = width + "px";
canvasFront.style.height = height + "px";
canvasFront.width = width * scale;
canvasFront.height = height * scale;
contextFront = canvasFront.getContext("2d");
contextFront.scale(scale, scale);
} else {
contextFront = canvasFront.getContext("2d");
}
// contextFront.font = width / 10 + 'px serif';
contextFront.font = '100px serif';
contextFront.fillStyle = '#ccc';
}
resize()
window.addEventListener("resize", resize, false);
d3_timer.timer(function(elapsed) {
contextFront.clearRect(0, 0, width, height);
for (var i = -1; i < n; ++i) {
for (var j = -1; j < m; ++j) {
contextFront.save();
contextFront.beginPath();
contextFront.translate(i * ringSeparation, j * ringSeparation);
contextFront.rotate((i + j) / (width / 100) + elapsed / 1400);
contextFront.fillText(',', 0, 0)
contextFront.restore();
}
}
});
</script>