-
Notifications
You must be signed in to change notification settings - Fork 1
/
sample.html
91 lines (82 loc) · 2.81 KB
/
sample.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
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
#backgroundCanvas {
position: fixed; z-index:-1;
}
#animationControl {
width: 320px;
height: 150px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #333;
color: white;
padding: 20px;
}
#animationControl label {
display: block;
margin-bottom: 5px;
}
a.github-link, a.github-link:visited {
color: white;
font-weight: bold;
font-size: 0.6em;
}
</style>
</head>
<body>
<canvas id="backgroundCanvas" style=""></canvas>
<div id="animationControl">
<label><input type="checkbox" id="enabled" checked="checked" /> Enabled</label>
<label><input type="color" id="backgroundColour" value="#000000" /> Background Colour</label>
<label><input type="color" id="primaryColour" value="#FFD700" /> Primary Colour</label>
<label><input type="color" id="secondaryColour" value="#808080" /> Secondary Colour</label>
<label><select id="directionBias">
<option value="0">Up</option>
<option selected value="1">Down</option>
<option value="2">Left</option>
<option value="3">Right</option>
</select> Direction</label>
<a class="github-link" href="https://github.com/ChrisPritchard/Wandering-Triangles">https://github.com/ChrisPritchard/Wandering-Triangles</a>
</div>
<script src="wandering-triangles.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("backgroundCanvas");
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
onResize();
window.onresize = onResize;
var animSettings = wanderingTriangles.baseSettings();
animSettings.backgroundColour = "black";
animSettings.primaryColour = "gold";
animSettings.secondaryColour = "gray";
var instance = wanderingTriangles.init(canvas, animSettings);
document.getElementById("enabled").onchange = function() {
instance.enabled = this.checked;
};
document.getElementById("backgroundColour").onchange = function() {
instance.settings.backgroundColour = this.value;
};
document.getElementById("primaryColour").onchange = function() {
instance.settings.primaryColour = this.value;
};
document.getElementById("secondaryColour").onchange = function() {
instance.settings.secondaryColour = this.value;
};
document.getElementById("directionBias").onchange = function() {
instance.settings.directionBias = this.value;
};
</script>
</body>
</html>