-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (104 loc) · 3.58 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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grout</title>
<link rel="stylesheet" type="text/css" media="screen" href="global.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css' />
<script type="text/javascript">
ratio = 16/9;
episodes = ["dictation_message_1.mp3", "dictation_message_2.mp3", "dictation_message_3.mp3", "dictation_message_4.mp3", "dictation_message_5.mp3",
"dictation_message_6.mp3", "dictation_message_7.mp3", "dictation_message_8.mp3", "dictation_message_9.mp3"];
current = 0;
var img = new Image();
img.onload = start;
img.src = "background.jpg";
function start() {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
function mix(a, b, l) {
return a + (b - a) * l;
}
function upDown(v) {
return Math.sin(v) * 0.1 + 0.1;
}
function render(time) {
time *= 0.00018;
var t1 = time * 0.37;
var t2 = time * 0.62;
resize(canvas);
// for each line in the canvas
for (var dstY = 0; dstY < canvas.height; ++dstY) {
// v is value that goes 0 to 1 down the canvas
var v = dstY / canvas.height;
// compute some amount to offset the src
var off1 = Math.sin((v + 0.1) * mix(3, 18, upDown(t1))) * 30;
var off2 = Math.sin((v + 0.1) * mix(3, 12, upDown(-t2))) * 30;
var off = off1 + off2;
// compute what line of the source image we want
// NOTE: if off = 0 then it would just be stretching
// the image down the canvas.
var srcY = dstY * img.height / canvas.height + off;
// clamp srcY to be inside the image
srcY = Math.max(0, Math.min(img.height - 1, srcY));
//draw the image on the canvas
ctx.drawImage(img, 0, srcY, img.width, 1, 0, dstY, canvas.width, 1);
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function resize(canvas) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (width != canvas.width || height != canvas.height) {
canvas.width = width;
canvas.height = height;
}
}
}
function playnext() {
$('#grout').attr('src', 'audio/'+episodes[current]);
$('#grout').trigger('play');
current += 1;
}
function resize() {
$('.layer').css("height", $(window).height());
$('.layer').css("width", $(window).width());
if(($(window).width()/ratio) > $(window).height()) {
$('.scale').css("width", $(window).width());
$('.scale').css("height", $(window).width()/ratio);
} else {
$('.scale').css("width", $(window).height()*ratio);
$('.scale').css("height", $(window).height());
}
}
function playtwisted(){
$('#twisted').trigger('play');
}
$(document).ready(function() {
resize();
$(window).bind("resize", function(){ resize() });
$('#grout').bind("ended", function(){ playnext() });
playnext();
});
</script>
</head>
<body>
<canvas></canvas>
<div id="controls">
<audio controls="controls" onplay="playtwisted()" id="grout">
<source type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<audio id="twisted" autoplay loop>
<source type="audio/mp3" src="audio/disturbed_and_twisted.mp3" />
</audio>
</div>
<div id="credit">
now go buy <a href="http://store.steampowered.com/app/2600/">vampire: the masquerade - bloodlines</a>
<br />
Inspired by <a href="http://debofnight.andcuriouser.com/">Deb of Night</a>
</div>
</body>
</html>