-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (89 loc) · 4.57 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
<!DOCTYPE html>
<head>
<title>Image Triangulation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script src='lib/spectrum.js'></script>
<link rel='stylesheet' href='lib/spectrum.css' />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123138137-4"></script>
<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-123138137-4');</script>
<script src="lib/jcanvas.min.js"></script>
<script src="lib/queue.min.js"></script>
<script src="tri/geometry.js"></script>
<script src="tri/graph.js"></script>
<script src="tri/triangulate.js"></script>
<script src="lib/sobel.js"></script>
<script src="js/ruppert.js"></script>
<script src="js/loadimage.js"></script>
<style>
@font-face {
font-family: 'Patua One';
src: url('lib/PatuaOne-Regular.ttf');
}
</style>
</head>
<body>
<div align="center">
<h1 style="font-family: 'Patua One'; font-size: 50px; text-shadow: 0px 3px rgba(0, 0, 0, 0.5);
font-weight: bold; margin-bottom: 0px; margin-top: 0px;">Image
Triangulation</h1>
<textarea id="log" style="font-size: small; width: 400px; height: 30px; border-width:1px; "></textarea>
<br />
<button id="work" onclick="work()">Work</button>
<button id="stop" onclick="stop()">Stop</button>
<br /> Image width:
<input type="range" name="Width" id="widthImage" min="20" max="1500" value="400" />
<input type="number" id="chosenWidth" value="400" disabled /> x
<input type="number" id="chosenHeight" value="600" disabled />
<br />
<table>
<tr>
<td>
<label style="font-size: small">Drop image or </label><input type="file" name="Load" id="loadImage" />
</td>
<td>
<a id="download" download="triangulation.png"><button type="button" onClick="downloadImage()">Download image</button></a>
<button type="button" onClick="downloadObj()">Download OBJ</button>
<button type="button" onClick="downloadPly()">Download colored PLY</button>
</td>
</tr>
<tr>
<td>
<img id="img" src="data/iceland.jpg" width="300" style="vertical-align: top; border:1px solid #000000;"
onload="fixSizesByImage()" />
</td>
<td>
<canvas id="canvas" width="300px" height="600px" style="border:1px solid #000000;"></canvas>
</td>
</tr>
</table>
<div style="position: absolute; text-align: center; bottom: 10px; width: 100%;">
Created by <a href="https://github.com/erasta">Eran</a>
and assisted by <a href="https://github.com/adishavit">Adi Shavit</a>,
view code on <a href="https://github.com/erasta/ImageTriangulation">GitHub</a>
(Forked from <a href="https://github.com/mkacz91/Triangulations">mkacz91</a>)
</div>
</div>
<img id="img4canvas" src="out/iceland2.png" width="300" style="position: absolute; top: 0px; visibility: hidden" />
<div style="position: absolute; right: 10px; top: 10px; ">
<h3>Advanced:</h3>
Edge detection sensitivity:<br />
<input type="range" name="Sensitivity" id="Sensitivity" min="200" max="255" value="240">
<input type="number" id="chosenSensitivity" value="240" disabled />
<br />Triangle relaxation sensitivity:<br />
<input type="range" name="TrigSensitivity" id="TrigSensitivity" min="0.1" max="100" value="10">
<input type="number" id="chosenTrigSensitivity" value="10" disabled />
<br /> Triangulation steiner iterations:<br />
<input type="range" name="Iterations" id="Iterations" min="5000" max="50000" value="30000" />
<input type="number" id="chosenIterations" value="30000" disabled /><br />
<h3>Graph style:</h3>
<input type='radio' name='graph-style' value='midcolor' onchange="repaint()" checked="true" />Mid color<br />
<input type='radio' name='graph-style' value='random' onchange="repaint()" />Random color<br />
<input type='radio' name='graph-style' value='edges' onchange="repaint()" />Edges in color<br />
<input type='text' id="flat" />
<script>$("#flat").spectrum({ flat: true, showButtons: false, move: function (c) { repaint(c.toHexString()) } }); setTimeout(repaint, 10);</script>
</div>
<!-- images: data/sun.jpg data/me.jpg data/me2.jpg data/chrome-logo.jpg data/LadyGagaVector.jpg -->
</body>