forked from jbernard3396/Tessalations
/
index.html
55 lines (51 loc) · 1.42 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
<style>
body {
background-color: #444;
margin: 0;
width: 100vw;
height: 100vh;
}
#canvas {
width: 100%;
height: 100%;
}
.abs {
position: absolute;
padding: 10px;
}
</style>
<title>Image Tessellator Demo</title>
<div class="abs">
<button id="playBtn">play</button>
<button id="pauseBtn">pause</button>
<button id="tickBtn">tick</button>
</div>
<canvas id="canvas"></canvas>
<script src="../dist/tessellator.js"></script>
<script>
let params = new URLSearchParams(window.location.search);
let tessOptions = {};
params.forEach((val, key) => {
if (!ImageTessellator.defaultOptions.hasOwnProperty(key)) return;
let defVal = ImageTessellator.defaultOptions[key];
let defType = typeof defVal;
if (defType == "string") tessOptions[key] = val;
else if (defType == "boolean") tessOptions[key] = val == "true" || val > 0;
else if (defType == "number") tessOptions[key] = Number(val);
});
let src = params.get("src") || "image1.jpg";
let c = document.getElementById("canvas");
let it = new ImageTessellator(c, src, tessOptions);
// it.loadCallback = "playAnimation"
document.getElementById("playBtn").addEventListener("click", () =>{
console.log(it)
it.playAnimation();
console.log(it.triangles)
});
document.getElementById("pauseBtn").addEventListener("click", () =>{
it.pauseAnimation();
});
document.getElementById("tickBtn").addEventListener("click", () =>{
it.tick();
});
</script>