-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
138 lines (122 loc) · 5.92 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
doctype html
html
head
title Impossible 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="node_modules/font-webapp/font-webapp.js")
script(type="text/javascript", src="font.js")
script(type="text/javascript", src="index.js")
style
:stylus
@media print
.noprint
display: none
.w-100
width: 100%
textarea
vertical-align: middle
svg
width: 100%
height: 100%
path, line
fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:7.7px
//#include virtual="../../analytics.html"
body
table.w-100
tr
td(style="text-align: left; vertical-align: middle;")
h1 Impossible Folding Font
td(style="text-align: right; vertical-align: middle;")
h2 by <a href="https://erikdemaine.org/">Erik Demaine</a>, <a href="http://martindemaine.org">Martin Demaine</a>, Tomoko Taniguchi, and <a href="https://www.jaist.ac.jp/~uehara/index-e.html">Ryuhei Uehara</a>, 2019
table#data.noprint.w-100
tr
td
label(for="text") Enter text to render:
|
textarea#text(name="text", rows=4, cols=40) text
td
input#folded(name="font", value="folded", type="radio")
label(for="folded") Folded 3D form (impossible font)
br
input#unfolded(name="font", value="unfolded", type="radio")
label(for="unfolded") Unfolded cut/crease pattern (puzzle font)
br
input#both(name="font", value="both", type="radio" checked)
label(for="both") Both folded and unfolded
<P>
input#lowercase(type="checkbox")
label(for="lowercase") Lower-case letters
p
#output.w-100
svg#svg
include font-inline.svg
.noprint(style="text-align: right")
button#simulate Simulate in Origami Simulator
button#downloadSim Download Crease Pattern for Origami Simulator
button#downloadSVG Download SVG
hr.noprint
figure.noprint(style="float: right; text-align: center; margin-left: 1em")
img(src="magiccards_small.jpg")
br
figcaption Example hypercards
p.noprint.
<b>Impossible objects</b> are physical objects that obviously exist yet appear to
be impossible; see, for example, <a href="http://www.isc.meiji.ac.jp/~kokichis/Welcomee.html">Sugihara's award-winning collection</a>.
One elegant form of the impossible object is the <b>hypercard</b>, popularized by Martin Gardner in 1978.
Hypercards are typically made from one complete playing card or index card,
and yet seem to be impossible; see the figure on the right.
p.noprint.
Each letter and numeral in this typeface is represented by a one-flap
impossible folding or hypercard.
In our designs, we use a square sheet of paper with crease lines on
horizontal, vertical, and 45° diagonal lines.
Each folding angle is orthogonal, that is, ±90° or ±180°.
p.noprint.
Why do these objects seem to be impossible?
One reason is that the sheet has been <b>twisted</b>, and twisting is
necessary to form the 3D shape, while the resulting folded state does not
seem to be twisted.
A key feature of the folded state is a <b>vertical flap</b> extending from a
horizontal plane (shaded darker in the folded form), with the property that
the vertical flap overlaps other material when rotated in either direction
onto the horizontal plane, thus seeming to be impossible from a single
sheet of material.
p.noprint.
This typeface consists of two main fonts:
the <b>folded 3D form</b> and the <b>unfolded cut/crease pattern</b>.
Each folded 3D form is an impossible-object puzzle:
how can it be cut/folded from a square of paper?
Each cut/crease patterns is also a (straightforward) puzzle:
what letter/numeral does it fold into?
To reveal the solutions to both puzzles, you can display both fonts
side-by-side using the “<b>both</b>” font.
By default, we render all letters in upper case (because these letters
have been more carefully design to have correct heights);
if you want to include <b>lower-case letters</b>, please check the box.
p.noprint.
If you'd like to see <b>animations</b> of the folding process
(which really helps show the twisting that happens),
try the "Simulate in Origami Simulator" button.
(This currently works best with just a single letter.)
Alternatively,
download one of the following SVG cut/crease patterns and load them
into <a href="https://origamisimulator.org/">Origami Simulator</a>:
<span id="links"></span>.
You can also print these out to try making an impossible object yourself.
Red lines are mountain folds; blue lines are valley folds;
lighter lines fold 90° while darker lines fold 180°;
and green lines are cuts.
p.noprint.
For more about this typeface and hypercards in general, see our paper
“<b><a href="https://erikdemaine.org/papers/Impossible_BRIDGES2019/">Impossible Folding Font</a></b>” at BRIDGES 2019.
//-
p.noprint.
This font looks somewhat better in Firefox which can properly render the
gradients in the vertical flaps; Chrome currently has
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=572685">a bug</a> which prevents this.
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-impossible">Source code on GitHub</a>.