-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
162 lines (153 loc) · 5.88 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<title>Drawing with circles</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fft.js"></script>
<script src="lib/zfp_wasm/zfp_wasm.js"></script>
<script src="lib/hammer.min.js"></script>
<script src="lib/base64js.min.js"></script>
<style>
body {
background: black;
color: white;
}
#canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="imageCanvas" style="display: none"></canvas>
<img id="imageElement" style="display: none"/>
<div id="control" class="container-fluid fixed-bottom" style="display: none">
<div class="row mb-2">
<div class="col-sm">
<div class="row">
<div class="col flex-grow-0">
<button id="center" class="btn btn-light btn-sm">Center</button>
</div>
<div class="col flex-grow-1">
<div class="form-check">
<input type="checkbox" id="follow" class="form-check-input">
<label for="follow" class="form-check-label">Follow the end point?</label>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col">
<label>Number of circle(s):</label><label id="numCircles" class="px-2"></label>
</div>
<div class="col flex-grow-1">
<input type="range" id="numCirclesSlider" min="1" max="500" value="500" step="1" class="form-range">
</div>
</div>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col flex-grow-0">
<button id="pause" class="btn btn-light btn-sm">Pause/Resume</button>
</div>
<div class="col flex-grow-1">
<input type="range" id="time" min="0" value="0" step="1" class="form-range">
</div>
<div class="col flex-grow-0">
<button id="share" class="btn btn-primary btn-sm">
<div class="d-flex flex-nowrap align-items-center">
<span id="shareSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none; margin-right: 0.5em"></span>
<span>Share</span>
</div>
</button>
</div>
<div class="col flex-grow-0">
<a id="export" href="" class="btn btn-primary btn-sm" role="button">
Export JSON
</a>
</div>
</div>
</div>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="shareToast" class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Link copied!
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<label for="image" class="form-label">Try it now with your picture, or import JSON</label>
<input id="image" type="file" accept="image/png,image/jpeg,application/JSON" class="form-control form-control-sm mb-1">
</div>
<div class="col" id="examples">
or using example images<br/>
<button class="btn btn-outline-light btn-sm">
<img height="50" src="examples/Fourier2.jpg"/>
</button>
<button class="btn btn-outline-light btn-sm">
<img height="50" src="examples/Homer-Simpson.png"/>
</button>
</div>
</div>
<div id="desc" class="row mt-4">
<div class="col">
<h1>What is it?</h1>
This application draws anything using orbiting circles. Here is an example:
<br/>
<a href="https://www.youtube.com/watch?v=QVuU2YCwHjw">https://www.youtube.com/watch?v=QVuU2YCwHjw</a>
<br/>
<br/>
<h1>How does it work?</h1>
<ol>
<li>You input an image.</li>
<li>
The application performs edge detection and converts detected edges to lines.
<ul>
<li>A sub-pixel edge detection algorithm <sup>[1]</sup> is used in this step.</li>
</ul>
</li>
<li>
The application makes lines into an one-liner line.
<ul>
<li>The details of this step can be found in the source code.</li>
</ul>
</li>
<li>
The application draws the one-liner line using orbiting circles.
<ul>
<li>The details of this step are explained in <a href="https://www.youtube.com/watch?v=r6sGWTCMz2k">this video</a> <sup>[2]</sup>.</li>
</ul>
</li>
</ol>
<h1>Source code</h1>
<a href="https://github.com/phqb/circle_drawing/">https://github.com/phqb/circle_drawing/</a>
<h1>References</h1>
<div>
[1] <span style="font-variant: small-caps">Rafael Grompone von Gioi,
and Gregory Randall</span>,
<span style="font-style: italic">A Sub-Pixel Edge Detector: an Implementation of the Canny/Devernay Algorithm</span>,
<a href="https://doi.org/10.5201/ipol">Image Processing On Line</a>,
<a href="https://doi.org/10.5201/ipol.2017">7</a> (2017),
pp. 347–372.
<a href="https://doi.org/10.5201/ipol.2017.216">https://doi.org/10.5201/ipol.2017.216</a>
</div>
<div>
[2] But what is a Fourier series? From heat flow to drawing with circles | DE4 <a href="https://www.youtube.com/watch?v=r6sGWTCMz2k">https://www.youtube.com/watch?v=r6sGWTCMz2k</a>
</div>
</div>
</div>
</div>
<script src="main.js" type="module"></script>
</body>
</html>