-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (99 loc) · 3.05 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>Tearing Test</title>
</head>
<body>
<canvas id="myCanvas" style="position: fixed; top: 0; left: 0;">
</canvas>
<script type="text/javascript">
//CONFIG
var enableSubpixelRendering = true; //enable to make the animation smoother. there's a performance hit however.
//END CONFIG
var linesCanvas = document.createElement("canvas");
var linesContext = linesCanvas.getContext("2d");
var mainContext=document.getElementById("myCanvas").getContext("2d");
var viewportHeight = null;
var viewportWidth = null;
var lineWidth=null;
var lineSpeed=null;
var linePosition, linePositionRender;
var initialTime=null;
var nowTime=null;
var previousTime=null;
window.requestAnimationFrame(mainLoop);
function createLinesContext(){
linesCanvas.width = lineWidth*6;
linesCanvas.height = viewportHeight;
drawBackground(linesContext);
drawTearingLines(linesContext);
}
function mainLoop(timestamp){
updateTimeVariables(timestamp);
updateViewportSize();
linePosition = ((lineSpeed*getDeltaTime()) % (viewportWidth+linesCanvas.width)) - linesCanvas.width;
if(enableSubpixelRendering){
linePositionRender=linePosition;
}
else{
linePositionRender=Math.floor(linePosition);
}
//check whether we need to redraw the background
//playing it safe here.
if(previousTime && Math.ceil(nowTime-previousTime) >= Math.floor(3*lineWidth/lineSpeed)){
drawBackground(mainContext);
}
render();
window.requestAnimationFrame(mainLoop);
}
function render() {
mainContext.drawImage(linesCanvas, linePositionRender, 0);
}
function updateViewportSize(){
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var changed=false;
if(windowWidth!=viewportWidth){
viewportWidth = windowWidth;
mainContext.canvas.width = viewportWidth;
changed=true;
}
if(windowHeight!=viewportHeight){
viewportHeight = windowHeight;
mainContext.canvas.height = viewportHeight;
changed=true;
}
if(changed){
console.log("ViewportSizeChanged")
onViewportSizeChanged();
}
}
function onViewportSizeChanged(){
lineWidth=Math.floor(viewportWidth*0.01);
lineSpeed=lineWidth*0.015;
createLinesContext();
drawBackground(mainContext);
}
function updateTimeVariables(timestamp){
previousTime=nowTime;
if(!initialTime)
initialTime=timestamp;
nowTime=timestamp;
}
function getDeltaTime(){
return nowTime-initialTime;
}
function drawBackground(context2d){
context2d.fillStyle = "#000000";
context2d.fillRect(0,0,context2d.canvas.width,context2d.canvas.height);
}
function drawTearingLines(context2d){
context2d.fillStyle = "#FF0000";
context2d.fillRect(lineWidth*3,0,lineWidth,context2d.canvas.height);
context2d.fillRect(lineWidth*5,0,lineWidth,context2d.canvas.height);
}
</script>
</body>
</html>