-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
172 lines (157 loc) · 6.07 KB
/
index.pug
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
doctype html
html
head
title Strip Folding Font
script(type="text/javascript", src="node_modules/@svgdotjs/svg.js/dist/svg.min.js")
script(type="text/javascript", src="node_modules/furls/furls.js")
script(type="text/javascript", src="strip.js")
script(type="text/javascript", src="index.js")
style
:stylus
.hud-false > body > *:not(#strip, #square, #folded), #hud, #download
display: none
@media print
.noprint
display: none
.w-100
width: 100%
.h-100
height: 100%
.text-left
text-align: left
.text-right
text-align: right
.align-middle, textarea
vertical-align: middle
.float-left
float: left
.overflow-x-scroll
#output
display: flex
> div
min-width: 10px
min-height: 10px
#folded
flex: 1 1
> svg
width: 100%
height: 100%
:root.paper-square
#unfolded
flex: 1 1
> svg
width: 100%
height: 100%
:root.paper-strip
#output
flex-direction: column
#unfolded
box-sizing: border-box
height: fit-content
overflow-x: scroll
//#include virtual="../../analytics.html"
body
table.w-100
tr
td.text-left.align-middle
h1
a(href="./") Strip Folding Font
td.text-right.align-middle
h2 by <a href="https://erikdemaine.org/">Erik Demaine</a> and <a href="https://martindemaine.org">Martin Demaine</a>, 2017
table#data.w-100.noprint
tr
td
label(for="text") Enter text to render:
textarea#text(rows=4, cols=40) text
td
label
input(type="radio", name="paper", value="strip", checked)
| 1 ×
span#aspectRatio ?
| strip
br
label
input(type="radio", name="paper", value="square")
span#squareDim1 ?
| ×
span#squareDim2 ?
| square
div(style="margin-bottom: 1ex")
input#left(type="checkbox")
label(for="left") Leftward first line
br
input#mirror(type="checkbox")
label(for="mirror") Mirror successive lines of text
td
label(for="shadow") Shadow:
br
input#shadow(type="range", min=0, max=100, value=50)
br
label(for="opacity") Paper opacity:
br
input#opacity(type="range", min=0, max=100, value=100)
br
input#backlight(type="checkbox")
label(for="backlight") Backlight
p
#output.w-100
#unfolded
#folded
.text-right.noprint
button#simulate.float-left Simulate in Origami Simulator
| Download SVG:
button#downloadCP Crease Pattern
button#downloadSim Crease Pattern for Origami Simulator
button#downloadFolded Folded Form
a#download
hr.noprint
p.noprint.
These fonts are inspired by our theorem with Nadia Benbernou and Anna Lubiw
that a unit-width strip of paper can fold <b>universally into any grid
polyhedron</b> (made up of unit cubes) using grid-aligned orthogonal and
diagonal creases.
To design the font, we folded each letter of the alphabet from a strip
with grid-aligned orthogonal and diagonal folds, in such a way that the
letters can be chained together so that entire texts can be folded
from a single strip.
The theorem and font are described in our paper,
“<a href="https://erikdemaine.org/papers/StripsGrid_WADS2017/">Universal
Hinge Patterns for Folding Strips Efficiently into Any Grid Polyhedron</a>”.
p.noprint.
The unfolded strip with crease pattern (shown on top, with scrollbar)
serves as a <b>puzzle font</b>. Simply fold the crease pattern to
discover the secret message! The folded form (shown on bottom)
is the readable form of the font.
Be sure to try <b>multiple lines of text</b>!
Then, for fun, you can turn on <b>Mirror successive lines of text</b>
(which is actually a more “natural” form of the font).
p.noprint.
You can also play with the lighting of the paper.
By default, you see fully opaque paper with medium drop shadows.
You can adjust the shadow darkness for a more dramatic effect.
Or you can turn off the shadows and turn down the paper opacity,
for a more transparent look.
Turn on the backlight to simulate a bright light from behind the paper,
highlighting the deviation in layers.
p.noprint.
These fonts were designed using our custom
<b><a href="design.html">Strip Folding Designer</a></b> webapp.
Try making your own letters!
(Or use the <a href="simple.html">simplified designer</a>
which does not distinguish letters from chain connections.)
You can play with our font designs here:
•
<span id="fontLinks"></span>
p.noprint.
Related fonts include
<a href="http://www.peterpuzzle.com/">Peter Grabarchuk</a>'s
<a href="http://www.ageofpuzzles.com/Puzzles/OrigamiStripAlphabet/OrigamiStripAlphabet.htm">Origami Strip Alphabet</a>
(presented as a puzzle without solutions),
Julie Ferrieux's <a href="https://www.behance.net/gallery/13661733/Abcdaire-deon">pleated strip folding font</a>,
<a href="http://making.digital/">makingDigital</a>'s <a href="http://www.dafont.com/origami-making.font">origami making font</a>,
why.h's <a href="http://whyh7.blogspot.com/2010/04/font-design-strip-folding.html">strip folding font</a>.
p.noprint.
Check out <a href="https://erikdemaine.org/fonts/">other mathematical and
puzzle fonts</a>. • Feedback or not working?
<a href="mailto:[email protected]">Email Erik</a>. •
<a href="https://github.com/edemaine/font-tetris">Source code on GitHub</a>.