https://gfredericks.com/things/polyominoes

1<html>
2  <head>
3    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4    <meta content="width=device-width, initial-scale=1" name="viewport">
5    <title>Polyomino Tiler</title>
6    <link rel="shortcut icon" href="/gfr.png" />
7    <link href="/blog/atom.xml" rel="alternate" title="ATOM" type="application/atom+xml" />
8    <link href="/stylesheets/primary.css?1266505518" media="screen" rel="stylesheet" type="text/css" />
9    

9<script type="text/javascript" src="/javascripts/jquery-1.7.1.js"></script>

9
10    
11    <meta name="twitter:card" content="summary">
12<meta name="twitter:creator" content="@gfredericks_">
13<meta name="twitter:title" content="Polyomino Tiler">
14<meta name="og:type" content="website">
15<meta name="og:title" content="Polyomino Tiler">
16<meta name="og:url" content="https://gfredericks.com/things/polyominoes">
17<meta name="twitter:description" content="Explore grid tilings with polyominoes, including custom grids, pieces, and wrapping.">
18<meta name="og:description" content="Explore grid tilings with polyominoes, including custom grids, pieces, and wrapping.">
19
20
21  </head>
22  <body>
23    <div id="everything">
24      <div id="header">
25        <a href="/">gfredericks.com</a>
26        | <a href="/things">things</a>
27        | <a href="">polyomino tiler</a>
28        <div id="header_right">
29          
30        </div>
31      </div>
32      <div id="not-the-header">
33        <h1>Polyomino Tiler</h1>
34
35<div class="things-content">
36  <!-- POLYOMINO_SAVED_DATA -->
37<div id="polyomino-app">
38<button onclick="this.setStyle({visibility: 'hidden'});Effect.BlindDown('explain');">What's going on here?</button>
39  <div id="explain" style="display:none;">
40    <p>
41      The Polyomino Tiler lets you explore grid-tiling with different
42      sets of polyominoes (such as the tetris pieces,
43      a.k.a. tetrominoes). Using whatever set of polyominoes you
44      specify, and whatever grid-shape you create, it uses a
45      moderately-optimized search algorithm to try to find a way to tile
46      the grid with the specified polyominoes.
47    </p>
48    <p>
49      It has all of the dominoes, triominoes, tetrominoes, pentominoes,
50      hexominoes, and heptominoes. The grid can be wrapped around
51      either or both axes (which can be used to create seamless
52      repeating tile patterns).
53    </p>
54    <p>
55      If you create a grid or a tiling that you want to save, you can
56      download an image with the “Download Image” box.
57    </p>
58    <p>The algorithm is described <a href="/gfrlog/99">here</a>.</p>
59  </div>
60
61  <hr>
62  <div id="side_panel">
63    <div id="controls">
64      <h3>Controls</h3>
65      <div id="flash" style="display:none;"></div>
66      <button id="go_button" onclick="start()">Go</button>
67      <button id="selector_button" onclick="TetrisUI.start_select_pieces()">Select Pieces</button>
68      <button id="select_done_button" style="display:none;" onclick="TetrisUI.done_select_pieces()">Back to Grid</button>
69      <button id="pause_button" style="display:none;" onclick="pause()">Pause</button>
70      <button id="resume_button" style="display:none;" onclick="resume()">Resume</button>
71      <button id="reset_button" style="display:none;" onclick="reset();">Clear</button>
72      <div id="visit_div"><span>Visited Nodes:</span> <span id="visited"></span></div>
73    </div>
74
75    <div id="not_selecting" class="grouper">
76      <div id="grid_editor">
77        <h3>Grid Editor</h3>
78        <button onclick="random()">Random Grid</button>
79        <button onclick="clear_all()">Clear All</button>
80        <button onclick="invert()">Invert</button>
81        <button onclick="dimensions_dialog()">Grid Dimensions</button>
82        <div><input type="checkbox" id="wrapx" name="wrapx" value="1" onchange="wrap_change()"> Wrap horizontally</div>
83        <div><input type="checkbox" id="wrapy" name="wrapy" value="1" onchange="wrap_change()"> Wrap vertically</div>
84        <hr>
85        <h4>Connected Components</h4>
86        <div id="connect_div"><span id="connected"></span></div>
87      </div>
88
89      <div id="image_links">
90        <h3>Download Image</h3>
91        <p>
92          <button onclick="download_image('large')">Large</button><br>
93          <button onclick="download_image('medium')">Medium</button><br>
94          <button onclick="download_image('small')">Small</button>
95        </p>
96        <form id="image_form" style="display:none;"><input type="hidden" name="data"><input type="hidden" name="size"></form>
97      </div>
98      <div id="saving" class="omitted-panel" style="display:none;">
99        <h3>Persistence</h3>
100        <div id="saving_link"><a href="#" onclick="return false;">Save this <span id="save_type">grid</span></a></div>
101        <div id="saving_result"></div>
102      </div>
103    </div>
104
105    <div id="are_selecting" class="grouper" style="display:none;">
106      <div id="color_selector">
107        <h3>Color Selector</h3>
108        Drag colors to pieces
109        <hr>
110        <a href="#" onclick="custom_color();return false;">Add more colors</a>
111        <div id="colors"></div>
112        <div style="clear:both;"></div>
113      </div>
114      <div id="specific_piece_selector">
115        <h3>Non-free Pieces</h3>
116        <p>To edit the variations of a piece in one-sided or fixed mode, Ctrl+click on the piece.</p>
117        <hr>
118        <div id="specific_pieces_container"></div>
119        <div style="clear:both;"></div>
120      </div>
121    </div>
122  </div>
123
124  <div id="main_grid">
125    <table class="layout"><tbody>
126      <tr><td></td><td id="bup"><button class="big" onclick="contracty()">&uarr;</button></td><td></td></tr>
127      <tr>
128        <td id="bleft"><button class="big" onclick="contractx()">&larr;</button></td>
129        <td>
130          <table id="tetris" class="tetris_table" cellspacing="0"><tbody>
131              <tr>
132                <td class="tet"><div class="filler"></div></td>
133                <td class="tet"><div class="filler"></div></td>
134                <td class="tet"><div class="filler"></div></td>
135                <td class="tet"><div class="filler"></div></td>
136                <td class="tet"><div class="filler"></div></td>
137                <td class="tet"><div class="filler"></div></td>
138                <td class="tet"><div class="filler"></div></td>
139                <td class="tet"><div class="filler"></div></td>
140              </tr>
141              <tr>
142                <td class="tet"><div class="filler"></div></td>
143                <td class="tet"><div class="filler"></div></td>
144                <td class="tet"><div class="filler"></div></td>
145                <td class="tet"><div class="filler"></div></td>
146                <td class="tet"><div class="filler"></div></td>
147                <td class="tet"><div class="filler"></div></td>
148                <td class="tet"><div class="filler"></div></td>
149                <td class="tet"><div class="filler"></div></td>
150              </tr>
151              <tr>
152                <td class="tet"><div class="filler"></div></td>
153                <td class="tet"><div class="filler"></div></td>
154                <td class="tet"><div class="filler"></div></td>
155                <td class="tet"><div class="filler"></div></td>
156                <td class="tet"><div class="filler"></div></td>
157                <td class="tet"><div class="filler"></div></td>
158                <td class="tet"><div class="filler"></div></td>
159                <td class="tet"><div class="filler"></div></td>
160              </tr>
161              <tr>
162                <td class="tet"><div class="filler"></div></td>
163                <td class="tet"><div class="filler"></div></td>
164                <td class="tet"><div class="filler"></div></td>
165                <td class="tet blank"><div class="filler"></div></td>
166                <td class="tet blank"><div class="filler"></div></td>
167                <td class="tet"><div class="filler"></div></td>
168                <td class="tet"><div class="filler"></div></td>
169                <td class="tet"><div class="filler"></div></td>
170              </tr>
171              <tr>
172                <td class="tet"><div class="filler"></div></td>
173                <td class="tet"><div class="filler"></div></td>
174                <td class="tet"><div class="filler"></div></td>
175                <td class="tet blank"><div class="filler"></div></td>
176                <td class="tet blank"><div class="filler"></div></td>
177                <td class="tet"><div class="filler"></div></td>
178                <td class="tet"><div class="filler"></div></td>
179                <td class="tet"><div class="filler"></div></td>
180              </tr>
181              <tr>
182                <td class="tet"><div class="filler"></div></td>
183                <td class="tet"><div class="filler"></div></td>
184                <td class="tet"><div class="filler"></div></td>
185                <td class="tet"><div class="filler"></div></td>
186                <td class="tet"><div class="filler"></div></td>
187                <td class="tet"><div class="filler"></div></td>
188                <td class="tet"><div class="filler"></div></td>
189                <td class="tet"><div class="filler"></div></td>
190              </tr>
191              <tr>
192                <td class="tet"><div class="filler"></div></td>
193                <td class="tet"><div class="filler"></div></td>
194                <td class="tet"><div class="filler"></div></td>
195                <td class="tet"><div class="filler"></div></td>
196                <td class="tet"><div class="filler"></div></td>
197                <td class="tet"><div class="filler"></div></td>
198                <td class="tet"><div class="filler"></div></td>
199                <td class="tet"><div class="filler"></div></td>
200              </tr>
201              <tr>
202                <td class="tet"><div class="filler"></div></td>
203                <td class="tet"><div class="filler"></div></td>
204                <td class="tet"><div class="filler"></div></td>
205                <td class="tet"><div class="filler"></div></td>
206                <td class="tet"><div class="filler"></div></td>
207                <td class="tet"><div class="filler"></div></td>
208                <td class="tet"><div class="filler"></div></td>
209                <td class="tet"><div class="filler"></div></td>
210              </tr>
211          </tbody></table>
212        </td>
213        <td id="bright"><button class="big" onclick="expandx()">&rarr;</button></td>
214      </tr>
215      <tr><td></td><td id="bdown"><button class="big" onclick="expandy()">&darr;</button></td><td></td></tr>
216    </tbody></table>
217  </div>
218
219  <div id="piece_selector" style="display:none;">
220    <h2>Piece Selection</h2>
221    <div id="piece_category_links">

222      <table id="tab_bar" cellspacing="0"><tbody><tr>
223        <td class="nottab left"></td>
224            <td class="tab unselected" id="pc_link_small_pieces" onclick="switch_piece_window('small_pieces');return false;">
225              <span>small pieces</span>
226              <span id="pc_count_small_pieces" style="font-weight:bold;">(0)</span>
227            </td>
228            <td class="nottab middle"></td>
229            <td class="tab unselected" id="pc_link_heptominoes-1" onclick="switch_piece_window('heptominoes-1');return false;">
230              <span>heptominoes-1</span>
231              <span id="pc_count_heptominoes-1" style="font-weight:bold;">(0)</span>
232            </td>
233            <td class="nottab middle"></td>
234            <td class="tab unselected" id="pc_link_heptominoes-2" onclick="switch_piece_window('heptominoes-2');return false;">
235              <span>heptominoes-2</span>
236              <span id="pc_count_heptominoes-2" style="font-weight:bold;">(0)</span>
237            </td>
238            <td class="nottab middle"></td>
239            <td class="tab unselected" id="pc_link_heptominoes-3" onclick="switch_piece_window('heptominoes-3');return false;">
240              <span>heptominoes-3</span>
241              <span id="pc_count_heptominoes-3" style="font-weight:bold;">(0)</span>
242            </td>
243            <td class="nottab middle"></td>
244            <td class="tab unselected" id="pc_link_custom" onclick="switch_piece_window('custom');return false;">
245              <span>custom</span>
246              <span id="pc_count_custom" style="font-weight:bold;">(0)</span>
247            </td>
248        <td class="nottab right"></td>
249      </tr></tbody></table>
250    </div>
251    <div id="piece_categories">
252      <div id="piece_category_small_pieces" style="display:none;">
253        <div class="buttons">
254          <button onclick="piece_window_select_all('small_pieces');">Select all</button>
255          <button onclick="piece_window_deselect_all('small_pieces');">Deselect all</button>
256          <button onclick="piece_window_clear_colors('small_pieces');">Clear all colors</button>
257        </div>
258      </div>
259      <div id="piece_category_heptominoes-1" style="display:none;">
260        <div class="buttons">
261          <button onclick="piece_window_select_all('heptominoes-1');">Select all</button>
262          <button onclick="piece_window_deselect_all('heptominoes-1');">Deselect all</button>
263          <button onclick="piece_window_clear_colors('heptominoes-1');">Clear all colors</button>
264        </div>
265      </div>
266      <div id="piece_category_heptominoes-2" style="display:none;">
267        <div class="buttons">
268          <button onclick="piece_window_select_all('heptominoes-2');">Select all</button>
269          <button onclick="piece_window_deselect_all('heptominoes-2');">Deselect all</button>
270          <button onclick="piece_window_clear_colors('heptominoes-2');">Clear all colors</button>
271        </div>
272      </div>
273      <div id="piece_category_heptominoes-3" style="display:none;">
274        <div class="buttons">
275          <button onclick="piece_window_select_all('heptominoes-3');">Select all</button>
276          <button onclick="piece_window_deselect_all('heptominoes-3');">Deselect all</button>
277          <button onclick="piece_window_clear_colors('heptominoes-3');">Clear all colors</button>
278        </div>
279      </div>
280      <div id="piece_category_custom" style="display:none;">
281        <div class="buttons">
282          <button onclick="piece_window_select_all('custom');">Select all</button>
283          <button onclick="piece_window_deselect_all('custom');">Deselect all</button>
284          <button onclick="piece_window_clear_colors('custom');">Clear all colors</button>
285        </div>
286        <div>
287          <textarea id="custom_piece"></textarea>
288          <button id="custom_piece_button">Import</button>
289        </div>
290        <hr>
291      </div>
292    </div>
293  </div>
294
295  <div id="debug"></div>
296  <form id="version_updater" style="display:none;"><input type="hidden" name="version_update"></form>
297</div>
298
299<link rel="stylesheet" href="/things/polyominoes/style.css">

300<script src="/things/polyominoes/js/prototype.js"></script>

300

301<script src="/things/polyominoes/js/builder.js"></script>

301

302<script src="/things/polyominoes/js/effects.js"></script>

302

303<script src="/things/polyominoes/js/dragdrop.js"></script>

303

304<script src="/things/polyominoes/js/pieces.js"></script>

304

305<script src="/things/polyominoes/js/seeds.js"></script>

305

306<script src="/things/polyominoes/js/piece_selector.js"></script>

306

307<script src="/things/polyominoes/js/png_export.js"></script>

307

308<script src="/things/polyominoes/js/main.js"></script>

308
309</div>
310
311      </div>
312    </div>
313  </body>
314</html>