-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
111 lines (102 loc) · 3.9 KB
/
index.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
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>A canvas 2d renderer & An awesome animator</title>
<script type="text/javascript">
(function() {
'use strict';
var UI = {
VOH: 'width',
DsgSize: 640,
root: document.documentElement,
needPut: false,
ucHole: 1,
resolution: Math.min(2, window.devicePixelRatio),
rem: 100,
monitoring: false,
isUC: /uc/i.test(window.navigator.userAgent)
};
UI.init = function(opts) {
opts = opts || {};
this.VOH = opts.VOH || 'width';
this.DsgSize = opts.DsgSize || 640;
this.rem = opts.rem || 100;
this.resolution = opts.resolution || this.resolution;
this.meta = this.meta || document.querySelector('meta[name="viewport"]');
this._putMeta();
};
UI._putMeta = function() {
if (!this.meta) {
this.meta = document.createElement('meta');
this.meta.setAttribute('name', 'viewport');
this.needPut = true;
}
var ratio = 1 / this.resolution;
this.meta.setAttribute('content', 'width=device-width,initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no');
if (this.needPut) {
document.head.appendChild(this.meta);
this.needPut = false;
}
this.suit();
this._ears();
};
UI._ears = function() {
if (this.monitoring) return;
var This = this;
window.addEventListener('resize', function() {
This.suit();
}, false);
document.addEventListener("DOMContentLoaded", function() {
This.isUC && This._fillHole();
});
setTimeout(function() {
This.suit();
}, 100);
this.monitoring = true;
};
UI._fillHole = function() {
var dom = document.createElement('div'),
sPX = 100,
tPX = 100;
dom.style.fontSize = sPX + "px";
document.body.appendChild(dom);
tPX = parseInt(window.getComputedStyle(dom, null).fontSize, 10) || tPX;
this.ucHole = sPX / tPX;
this.suit();
setTimeout(function() {
document.body.removeChild(dom);
}, 100);
};
UI.suit = function() {
var nowSize = this.VOH === 'width' ? document.documentElement.offsetWidth : document.documentElement.offsetHeight;
this.sPPR = this.rem * nowSize / this.DsgSize;
this.curPPR = this.ucHole * this.sPPR;
this.root.style.fontSize = this.curPPR + 'px';
};
UI.RTP = function(rem, bool) {
return (bool ? rem * this.curPPR : rem * this.sPPR) >> 0;
};
UI.PTR = function(px) {
return px / this.curPPR;
};
window.JC = window.JC || {};
window.JC.UI = UI;
})();
window.JC.UI.init({
resolution: 1,
});
</script>
<link href="./static/css/tangerine.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./static/css/main.css">
</head>
<body>
<canvas id="line-canvas"></canvas>
<script type="text/javascript" src="./build/jcc2d.js"></script>
<script type="text/javascript" src="./static/js/simplexnoise.js"></script>
<script type="text/javascript" src="./static/js/particleEngine.js"></script>
<script type="text/javascript" src="./static/js/main.js"></script>
</body>
</html>