-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
162 lines (150 loc) · 5.76 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
doctype html
html
head
meta(charset="utf-8")
title Spiral Galaxies 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="spiralgalaxies.js")
style
:stylus
@media print
.noprint
display: none
.w-100
width: 100%
.text-left
text-align: left
.text-right
text-align: right
.align-middle
vertical-align: middle
svg
.grid rect, .edges polygon, .user line.true
stroke: black
stroke-width: 0.2
.user line.false
stroke: gray
stroke-width: 0.2
.user line
stroke-linecap: round
rect.background
fill: white
stroke: none
rect.outline
stroke: black
stroke-width: 0.2
fill: none
.grid line
stroke: #808080
stroke-width: 0.04
stroke-linecap: round
.centers circle
stroke: black
stroke-width: 0.1
// .centers circle.w { fill: #cccccc; }
.centers circle.w
fill: white
.centers circle.b
fill: black
.regions polygon.invalid
fill: red
.regions polygon.b
fill: #707070
.regions polygon.w
fill: #ffffff
.edges polygon
fill: none
.target
fill: purple
cursor: pointer
/.font-solved &
cursor: default
opacity: 0
/.font-puzzle &
.edges, .regions
opacity: 0
/.font-solved &
.user
opacity: 0
&.solved
.regions
transition: opacity 1s
opacity: 1
//#include virtual="../../analytics.html"
body
table.w-100
tr
td.text-left.align-middle
h1 <a href="./">Spiral Galaxies Font</a>
td.text-right.align-middle
h2 by Walker Anderson, <a href="https://erikdemaine.org/">Erik Demaine</a>, and <a href="http://martindemaine.org">Martin Demaine</a>, 2018
table#data.w-100.noprint
tr
td
label(for="text") Enter text to render:
|
textarea.align-middle#text(name="text", rows=4, cols=40) text
td
input#puzzle(type="radio", name="font", value="puzzle", checked)
label(for="puzzle") Puzzle font
br
input#solved(type="radio", name="font", value="solved")
label(for="solved") Solved font
td
button#reset Reset all puzzles
p
input#connectors(type="checkbox", name="connectors")
label(for="connectors")
| Enable third
br
| “connected” state
#size.noprint
p
#output.w-100
hr.noprint
p.noprint.
In a Spiral Galaxies puzzle, you are given a grid of unit squares and a
collection of <b>centers</b> (points, drawn as dots). The goal is to
decompose the grid into regions called <b>galaxies</b>,
one containing each center, so that each galaxy is a polyomino
(an edge-to-edge joining of unit squares) and 180° rotationally
symmetric about its center.
p.noprint.
Spiral Galaxies or
<a href="https://nikoli.co.jp/en/puzzles/astronomical_show.html">Tentai Show (天体ショー in Japanese)</a>
is one of the many pencil-and-paper puzzles designed for the
Japanese puzzle magazine and publisher
<a href="https://nikoli.co.jp/en/"><i>Nikoli</i></a>,
Like most Nikoli puzzles,
<a href="https://erich-friedman.github.io/papers/spiral/spiral.html">Spiral Galaxies is NP-complete</a>,
meaning that there is no efficient algorithm to solve them,
assuming P ≠ NP.
p.noprint.
This typeface features 36 uniquely solvable Spiral Galaxies puzzles,
one for each numeral and letter of the alphabet.
The <b>puzzle font</b> shows just the centers.
Like the Spiral Galaxies puzzles published by Nikoli,
the centers are drawn with dots of two different colors, black and white;
after solving the puzzle, the corresponding galaxy polyomino should be
filled the same color. The black galaxies then form a letter or numeral.
The <b>solved font</b> illustrates these solutions.
See <a href="https://erikdemaine.org/papers/SpiralGalaxies_MOVES2017/">our paper</a> for details, including how we designed the typeface.
p.noprint.
In the puzzle font, you can try your hand at solving the puzzles by
<b>clicking on grid edges</b> to toggle whether they are edges of the galaxy
(<b>black</b>).
If you <b>Enable third “connected” state</b>, then you
can click on an edge a second time to make it <b>gray</b> and perpendicular
to indicate that the two connected grid squares belong to the same galaxy.
(See Figure 3 of
<a href="https://erikdemaine.org/papers/SpiralGalaxies_MOVES2017/">our paper</a>.)
The galaxies will fill in when you solve the puzzle.
Click <b>Reset all puzzles</b> to start over.
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:/edemaine/font-spiralgalaxies">Source code on GitHub</a>.