-
-
Notifications
You must be signed in to change notification settings - Fork 82
/
index.html
97 lines (91 loc) · 4.06 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/app.css" />
<title>primitive.js – drawing images with geometric primitives</title>
</head>
<body>
<p><img src="logo.png" alt="Logo" /></p>
<h1>primitive.js</h1>
<p>This is a JavaScript port of the <a href="https://primitive.lol">https://primitive.lol</a> app, originally created by Michael Fogleman. Its purpose is to re-draw existing images using only primitive geometric shapes.</p>
<p>You can find some additional (technical) information in the <a href="https://github.com/ondras/primitive.js">GitHub repository</a>. This page acts as a small demo where you can experiment with the algorithm.</p>
<h2>Try it in your browser!</h2>
<form>
<h3>Pick an image file</h3>
<ul>
<li>From your computer: <input type="file" /></li>
<li>From URL (must be <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">CORS-enabled</a>): <input type="url" name="url" /></li>
</ul>
<h3>Check or adjust various rendering options</h3>
<div>
<p>Add <span class="value"></span> geometric shapes
<em>(large number: better results, slower)</em>
</p>
<input name="steps" type="range" min="1" max="500" value="50" />
</div>
<div>
<p>Use these shape types:</p>
<label><input type="checkbox" name="shapeType" value="triangle" checked="checked" />Triangles</label><br/>
<label><input type="checkbox" name="shapeType" value="rectangle" />Rectangles</label><br/>
<label><input type="checkbox" name="shapeType" value="ellipse" />Ellipses</label><br/>
<label><input type="checkbox" name="shapeType" value="smiley" />Smileys</label>
</div>
<div>
<p>Fill background with:</p>
<label><input type="radio" name="fill" value="auto" checked="checked" />an auto-detected color</label><br/>
<label><input type="radio" name="fill" value="fixed" />a fixed color: </label>
<input type="color" value="#ffffff" name="fill-color" />
</div>
<div>
<p>Starting opacity: <span class="value"></span></p>
<input name="alpha" type="range" min="0" max="1" step="0.1" value="0.5" /><br/>
<label><input type="checkbox" name="mutateAlpha" checked="checked" />Adjust opacity automatically</label>
</div>
<div>
<p>Computation size: <span class="value"></span> pixels
<em>(smaller is faster)</em>
</p>
<input name="computeSize" type="range" min="128" max="512" value="256" /><br/>
</div>
<div>
<p>Viewing size: <span class="value"></span> pixels</p>
<input name="viewSize" type="range" min="256" max="2048" value="512" />
</div>
<div>
<p>Start every iteration with <span class="value"></span> random shapes
<em>(larger number: more precise results, slower)</em>
</p>
<input name="shapes" type="range" min="1" max="1000" value="200" />
</div>
<div>
<p>Stop shape optimization after <span class="value"></span> failures
<em>(larger number: more precise results, slower)</em>
</p>
<input name="mutations" type="range" min="0" max="100" value="30" />
</div>
<h3>Hit the button to start</h3>
<p>This is a CPU-intensive process. It might take a while.</p>
<input type="submit" value="Let's go!" />
</form>
<section id="output">
<div>
<h3>Original</h3>
<div id="original"></div>
</div>
<div>
<h3>Result <span id="steps"></span></h3>
<div class="raster" id="raster"></div>
<div class="vector" id="vector"></div>
<label><input type="radio" name="type" value="raster" checked="checked" />Raster image: right-click to save</label><br/>
<label><input type="radio" name="type" value="vector" />Vector image: copy&paste data from the text area below</label><br/>
<textarea class="vector" id="vector-text" spellcheck="false"></textarea>
</div>
</section>
<footer>
© 2016 <a href="https://ondras.zarovi.cz/">Ondřej Žára</a>, <a href="https://github.com/ondras/primitive.js">GitHub repository</a>
</footer>
<script src="js/app.js"></script>
</body>
</html>