-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
140 lines (127 loc) · 6.32 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
doctype html
html
head
meta(charset="utf-8")
title Tatamibari 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="tatamibari.js")
script(type="text/javascript").
if (/[?&]hud=0/.test(window.location.search)) // avoid blinking
document.documentElement.classList.add('hud-false');
style
:stylus
.hud-false > body > *:not(#output), #hud
display: none
.font-puzzle
.rectangles, .rectEdges
opacity: 0
.solved .rectangles
transition: opacity 1s
opacity: 1
.font-solved
.edges, .errors
opacity: 0
.icon
display: inline-block
width: auto
height: 1em
include:stylus tatamibari.styl
//#include virtual="../../analytics.html"
body
table.w-100
tr
td.text-left.align-middle
h1 <a href="./">Tatamibari Font</a>
td.text-right.align-middle
h2 by Aviv Adler, Jeffrey Bosboom, <a href="https://erikdemaine.org/">Erik Demaine</a>, and <a href="http://martindemaine.org">Martin Demaine</a>, Quanquan Liu, and Jayson Lynch, 2020
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
input#hud(type="checkbox", checked)
#size.noprint
p
#output.w-100
.text-right.noprint
button#nohud(title="Use browser back button to restore interface.") Hide all but font rendering
hr.noprint
p.noprint.
In a Tatamibari puzzle, you are given a grid of unit squares, some of
which have a clue icon of
<svg class="icon" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#p1"/></svg>,
<svg class="icon" height="1.5em" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#h1"/></svg>, or
<svg class="icon" height="1.5em" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#v1"/></svg>.
The goal is to decompose the grid into <b>rectangles</b>,
each containing exactly one clue icon,
where rectangles containing
<svg class="icon" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#p1"/></svg> are squares,
rectangles containing
<svg class="icon" height="1.5em" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#h1"/></svg> are wider than they are tall,
and rectangles containing
<svg class="icon" height="1.5em" viewBox="-0.025 -0.025 1.05 1.05"><rect width="1" height="1" fill="white" stroke="#666" stroke-width="0.05"/><use href="#v1"/></svg> are taller than they are wide.
Furthermore, at most three rectangles can meet at any grid intersection.
p.noprint.
<a href="https://en.wikipedia.org/wiki/Tatamibari">Tatamibari (タタミバリ in Japanese)</a>
is one of the many pencil-and-paper puzzles designed for the
Japanese puzzle magazine and publisher
<a href="http://nikoli.co.jp/en/"><i>Nikoli</i></a>.
Like most Nikoli puzzles,
<a href="https://erikdemaine.org/papers/Tatamibari_FUN2020/">Tatamibari is NP-complete</a>,
meaning that there is no efficient algorithm to solve them,
assuming P ≠ NP.
Unusually, it took 16 years for this puzzle to be proved NP-complete.
p.noprint.
This typeface features 26 uniquely solvable Tatamibari puzzles,
one for each letter of the alphabet.
The <b>puzzle font</b> shows just the clues.
We introduce clues of two different colors, black and white;
after solving the puzzle, the corresponding rectangle should be
filled the same color. The black rectangles then form a letter.
The <b>solved font</b> illustrates these solutions.
See <a href="https://erikdemaine.org/papers/Tatamibari_FUN2020/">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 a rectangle
(<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 rectangle.
The rectangles will fill in when you solve the puzzle.
Click <b>Reset all puzzles</b> to start over.
p.noprint.
This font was designed using a
<a id="designLink">custom design tool</a>
which uses our
<a href="https://github.com/jbosboom/tatamibari-solver)">Tatamibari solver</a>
built on the
<a href="https://github.com/Z3Prover/z3">Z3 engine</a>.
You can use it to design your own 10×10 Tatamibari puzzles
and check for unique solutions.
As possible starting points,
here are links to load each letter into the design tool:
<span id="designLinks"></span>.
p.noprint.
Check out <a href="http://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-tatamibari">Source code on GitHub</a>.
include symbols.svg