-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
98 lines (89 loc) · 3.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Audio orbit | made with cables</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<style>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
}
canvas {
display: block;
position: fixed;
}
footer {
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100vw;
padding: 20px;
text-align: right;
font-size: 18px;
color: #24baa7;
}
footer a, footer a:hover, footer a:active {
color: #24baa7;
}
</style>
</head>
<body>
<canvas id="glcanvas" width="100vw" height="100vh"></canvas>
<div class="row">
<div class="col-12" style="padding: 400px 0px 400px 0px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div class="row">
<div class="col-12" style="padding: 400px 0px 400px 0px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<script type="text/javascript" src="js/tone.js"></script>
<script type="text/javascript" src="js/patch.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
/**
* Called when there was a cables error.
* @param {string} errId - ID of the error, e.g. 'NO_WEBGL' or 'NO_WEBAUDIO'
* when the browser does not support the used APIs
* @param {string} errMsg - The error message
*/
function showError(errId, errMsg) {
alert('An error occured: ' + errId + ', ' + errMsg);
}
function patchInitialized() {
// You can now access the patch object (CABLES.patch), register variable watchers and so on
}
function patchFinishedLoading() {
// The patch is ready now, all assets have been loaded
}
document.addEventListener('DOMContentLoaded', function(event) {
CABLES.patch = new CABLES.Patch({
patch: CABLES.exportedPatch,
prefixAssetPath: '',
glCanvasId: 'glcanvas',
glCanvasResizeToWindow: true,
onError: showError,
onPatchLoaded: patchInitialized,
onFinishedLoading: patchFinishedLoading,
});
});
</script>
</body>
</html>