forked from levskaya/polyhedronisme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
polyhedronisme.html
190 lines (159 loc) · 7.69 KB
/
polyhedronisme.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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>polyHédronisme</title>
<script type="text/javascript" src="libs/jquery-1.7.min.js"></script>
<script type="text/javascript" src="libs/jquery.mousewheel.js"></script>
<script type="text/javascript" src="libs/underscore-min.js"></script>
<script type="text/javascript" src="libs/BlobBuilder.min.js"></script>
<script type="text/javascript" src="libs/canvas-toBlob.min.js"></script>
<script type="text/javascript" src="libs/FileSaver.min.js"></script>
<script type="text/javascript" src="libs/peg-0.6.2.min.js"></script>
<script type="text/javascript" src="polyhedronisme.js"></script>
<link rel="stylesheet" type="text/css" href="polyhedronisme.css">
<style>
</style>
</head>
<body>
<div class="container">
<h2 style="text-align:center;">
<span class="fadey">poly</span>Héd<span class="fadey">r</span>onisme<span style="font-size:10px;">v0.2<span>
</h2>
<div class="canvaswrapper clearfix">
<div class="leftside" width="110" height="400">
</div>
<canvas id="poly" width="500" height="400"></canvas>
<div class="rightside" width="110" height="400">
</div>
</div>
<div class="controlswrapper">
<img id="strokeonly" src="media/strokeonly.png" style="vertical-align:middle;" title="Edges only (wireframe)">
<img id="fillonly" src="media/fillonly.png" style="vertical-align:middle;" title="Faces only">
<img id="fillandstroke" src="media/fillandstroke.png" style="vertical-align:middle;" title="Edges and faces">
<span style="width:100px;"> </span>
<img id="frontrot" src="media/frontrot.png" style="vertical-align:middle;position:relative;top:-1px;" title="Front rotation">
<img id="siderot" src="media/siderot.png" style="vertical-align:middle;" title="Side rotation">
<img id="toprot" src="media/toprot.png" style="vertical-align:middle;" title="Top rotation">
<span style="width:100px;"> </span>
<span id="pngsavebutton" style="font-size:12px;cursor:pointer;" title="Export as PNG image">PNG</span>
<span id="objsavebutton" style="font-size:12px;cursor:pointer;" title="Export as OBJ geometry">OBJ</span>
<span id="x3dsavebutton" style="font-size:12px;cursor:pointer;" title="Export as VRML2 model">VRML2</span>
<p class="centered"><i>rotate by dragging on polyhedron, rescale by scrolling over canvas</i><br>
</div>
<div class="specwrapper">
<label style="width: 10em">recipe <input id="spec"></input></label>
<a id="link" href="#" title="Copy this URL to share"><img src="media/link.png"></a>
<br>
<label>palette <input id="palette"></input></label>
</div>
<br />
<div class="statswrapper">
<label style="">stats </label>
<div id="statsinner">
<div id="basicstats"></div>
<img id="expandcollapse" src="media/plus.png" />
<br />
<div id="morestats"></div>
</div>
<div style="clear: both"></div>
</div>
<p>The specification consists of a space-delimited series of polyhedral recipes.
Each recipe looks like: </p>
<p>[<b>op</b>][<b>op</b>] ... [<b>op</b>][<b>base</b>] <i>no spaces,
just a string of characters</i> </p>
<p>where [<b>base</b>] is one of</p>
<ul>
<li>T - tetrahedron</li>
<li>C - cube</li>
<li>O - octahedron</li>
<li>I - icosahedron</li>
<li>D - dodecahedron</li>
<li>P<i>N</i> - N-sided prism</li>
<li>A<i>N</i> - N-sided anti-prism</li>
<li>Y<i>N</i> - N-sided pyramid</li>
</ul>
<p>and <b>op</b> is one of these
<a href="https://en.wikipedia.org/wiki/Conway_polyhedron_notation">polyhedron-building operators</a>:</p>
<ul>
<li><b>k<i>N</i></b> - <a href="https://en.wikipedia.org/wiki/Kleetope">kis</a> on N-sided faces (if no N, then general kis)</li>
<li><b>a</b> - ambo</li>
<li><b>g</b> - gyro</li>
<li><b>d</b> - dual</li>
<li><b>r</b> - reflect</li>
<li><b>e</b> - explode (a.k.a. <a href="https://en.wikipedia.org/wiki/Expansion_%28geometry%29">expand</a>, equiv. to <i>aa</i>) </li>
<li><b>b</b> - bevel (equiv. to <i>ta</i>) </li>
<li><b>o</b> - ortho (equiv. to <i>jj</i>) </li>
<li><b>m</b> - meta (equiv. to <i>k3j</i>) </li>
<li><b>t<i>N</i></b> - truncate vertices of degree N (equiv. to <i>dkNd</i>; if no N, then truncate all vertices) </li>
<li><b>j</b> - join (equiv. to <i>dad</i>) </li>
<li><b>s</b> - snub (equiv. to <i>dgd</i>) </li>
<li><b>p</b> - propellor</li>
<li><b>c</b> - chamfer</li>
<li><b>w</b> - whirl</li>
<!--
<li><b>h</b> - half (caution: requires even-sided faces, and can produce digons)</li>
-->
</ul>
<p>Also, some newer, experimental operators:</p>
<ul>
<li><b>l</b> - ste<b>l</b>lation</li>
<li><b>n<i>N</i></b> - i<b>n</b>setN </li>
<li><b>x<i>N</i></b> - e<b>x</b>trudeN </li>
<li><b>z</b> - triangulate</li>
<li><b>h</b> - hollow/skeletonize, useful for 3D printing, makes a
hollow-faced shell version of the polyhedron, only apply it once in
a recipe!</li>
</ul>
<p> There are more complicated, parameterized forms for <b>k</b> and <b>n</b>: </p>
<ul>
<li><b>n</b>(<i>n</i>,<i>inset</i>,<i>depth</i>) - this applies the
inset operator on <i>n</i>-sided faces, insetting by <i>inset</i> scaled from
0 to 1, and extruding in or out along the normal by <i>depth</i>
(can be negative)
</li>
<li><b>k</b>(<i>n</i>,<i>depth</i>) - this applies the kis operator
on <i>n</i>-sided faces, setting the pyramidal height out or in along the normal by <i>depth</i>
(can be negative)
</li>
<li><b>h</b>(<i>0</i>,<i>inset</i>,<i>depth</i>) - this applies the
hollowing/skeletonizing operator on all faces, insetting by
<i>inset</i> (scaled from 0 to 1), and with a shell thickness of <i>depth</i>
</li>
</ul>
<p>Note that for most of the above operations, while the <i>topology</i> of the result is uniquely specified,
a great variety of <i>geometry</i> is possible. For maximum flexibility, the above operators do not enforce convexity
of the polyhedron, or planarity of the faces,
at each step. If these properties are desired in the final result, the following geometric "refinement" operators
can be used. These operators are for
canonicalizing the polyhedral shape, and are mainly intended for making
the more traditional, convex polyhedra more symmetric:</p>
<ul>
<li><b>K<i>N</i></b> - quic<b>K</b> and dirty canonicalization, it can blow
up, iteratively refines shape N times.</li>
<li><b>C<i>N</i></b> - proper <b>C</b>anonicalization, intensive, slow convergence, iteratively refines shape N times.
Flattens faces.
A typical N is 200 or 300.</li>
<li><b>A<i>N</i></b> - convex spherical <b>A</b>djustment. Iterates N times. May give more pleasing symmetry,
but can be unstable for certain shapes.</li>
</ul>
<p>These can blow up the geometry of the weirder polyhedra, which can
be interesting too!</p>
<h4> 3D Printing </h4>
<p>You can export these shapes in forms appropriate for 3D printing by
shapeways. Export in VRML2 format to preserve face colors if you want
to use their colored fused-sand process.</p>
<p>Some relevant links: </p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Conway_polyhedron_notation">
Wikipedia on Conway Polyhedral Notation</a></li>
<li><a href="http://www.georgehart.com/">George W. Hart's Polyhedral Site</a></li>
<li><a href="https://github.com/levskaya/polyhedronisme/blob/master/readme.md">More about this project, its inspiration and goals</a></a></li>
</ul>
<div class="footer">
Text & Figures CC-BY | Code MIT License | <a href="http://anselmlevskaya.com">Anselm Levskaya</a> 2015
</div>
</div>
<a href="http://github.com/levskaya/polyhedronisme"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
</body>
</html>