-
Notifications
You must be signed in to change notification settings - Fork 6
/
dotpattern.html
153 lines (152 loc) · 10.4 KB
/
dotpattern.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>jsdotpattern - Periodic dot and symbol pattern generator</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>
<script type="text/javascript" src="js/svg_todataurl.js"></script>
<script type="text/javascript" src="js/url.min.js"></script>
<script type="text/javascript" src="js/seedrandom.min.js"></script>
<script type="text/javascript" src="symbols.js"></script>
<script type="text/javascript" src="jsdotpattern.js"></script>
<link rel="stylesheet" type="text/css" href="css/jsdotpattern.css" />
</head>
<body>
<div class="main">
<h2>Periodic dot and symbol pattern generator</h2>
<p>This tool generates a irregular but uniformly distributed dot pattern with
periodic boundary conditions and symbol patterns based on it for use in map rendering. It does so by first
producing a randomly displaced grid pattern (<em>generate</em>) and then relaxing the points to maximize their
distance (<em>relax</em>, can be applied multiple times). It also produces SVGs placing symbols at the point locations including the periodic
duplicates necessary for a seamless pattern (<em>render</em>) and can print out the raw point location list (<em>point list</em>).</p>
<p>If you want to modify or extend the functionality you can find the <a href="https://github.com/imagico/jsdotpattern">source code on github</a>.
Licensed under <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL</a>. Symbols are <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
but it would be much appreciated if you credit me and support work on jsdotpattern with a donation in case you use some of the more elaborate stuff in your map designs.</p>
<div class="form">
<table class="dotpattern">
<tr>
<td><strong>dot pattern:</strong></td>
<td><strong>symbol pattern:</strong>
<input class="input-color" title="select symbol color for rendered pattern" type='color' id='sym_color' name='sym_color' value='#000000' />
<input class="input-color" title="select background color for rendered pattern" type='color' id='bkg_color' name='bkg_color' value='#d0d0d0' /></td>
<td><strong>symbol definition:</strong></td>
</tr>
<tr>
<td class="rim">
<canvas id="Canvas" width="256" height="256"></canvas>
</td>
<td class="rim">
<svg id="Svg">
<defs>
<clipPath id="clipPath">
<rect x="0" y="0" width="256" height="256" />
</clipPath>
</defs>
<g id="Pattern" style="clip-path: url(#clipPath);">
</g>
</svg>
</td>
<td class="sym-stuff">
<div id="sym_selector_box">
<div id="sym_selector">
</div>
</div>
<div class="sym-bar">
<div id="sym_preview"><svg id="Svg_Test"></svg></div>
offset: <input type="text" size="3" name="offset_x" id="offset_x" value="" />
<input type="text" size="3" name="offset_y" id="offset_y" value="" />
scale: <input type="text" size="4" name="sym_scale" id="sym_scale" value="1.0" title="scale factor to apply to the symbol for rendering"/>
<input type="checkbox" name="B_rrotate" id="B_rrotate" value="1" title="rotate symbols randomly"> random rotate
<input type="button" name="B_inspect" id="B_inspect" value="show" title="show a preview of the text field in scaled size and calculate offsets">
</div>
</td>
</tr>
</table>
<div class="dotpattern">
<table>
<tr>
<td>
<fieldset><legend>point generation</legend>
distance: <input class="nb" type="text" size="2" name="dot_dist" id="dot_dist" value="20" title="average distance of dots"/>
<input type="button" name="B_generate" id="B_generate" value="generate" title="generate a new random dot pattern"><br>
<input type="button" class="btn-small" name="B_generate_triangle" id="B_generate_triangle" value="‣" title="generate a regular triangular dot pattern">
<input type="button" class="btn-small" name="B_generate_triangle2" id="B_generate_triangle2" value="∇" title="generate a regular rotated triangular dot pattern">
<input type="button" class="btn-small" name="B_generate_square" id="B_generate_square" value="☐" title="generate a regular square dot pattern">
<input type="button" class="btn-small" name="B_generate_snub" id="B_generate_snub" value="5" title="generate a regular snub square dot pattern">
</fieldset>
</td>
<td>
<fieldset><legend>relaxation</legend>
radius: <input class="nb" type="text" size="2" name="dot_radius" id="dot_radius" value="32" title="larger than distance, power of two, less than half the pattern size"/>
radius y: <input class="nb" type="text" size="2" name="dot_radius_y" id="dot_radius_y" value="32" title="vertical direction radius, not larger than radius, normally identical"/>
metric: <input class="nb" type="text" size="2" name="metric" id="metric" value="2" title="metric of distance calculation, normally 2, >100 is assumed to be maximum metric"/><br>
<input type="button" name="B_relaxS" id="B_relaxS" value="relax small area" style="display:none;" title="relax the dot positions in the small topleft area">
<input type="button" name="B_relax" id="B_relax" value="relax" title="relax the dot positions to maximize their distance">
<input type="button" name="B_relax10" id="B_relax10" value="relax ×10" title="relax more">
<input type="button" name="B_shake" id="B_shake" value="shake" title="randomize the pattern a bit">
<input type="button" name="B_jitter" id="B_jitter" value="jitter" title="jitter dot positions">
<input type="button" class="btn-small" name="B_rotate" id="B_rotate" value="♦" title="rotate the dot pattern 45 degrees and scale to fit">
<input type="button" class="btn-small" name="B_swap" id="B_swap" value="➚" title="mirror dot pattern diagonally">
<input type="button" class="btn-small" name="B_zigzag" id="B_zigzag" value=">" title="zigzag pattern horizontally">
</fieldset>
</td>
<td>
<fieldset><legend>rendering</legend>
casing: <input class="nb" type="text" size="2" name="casing_width" id="casing_width" value="0" title="width of white casing around individual symbols (0 means no casing)"/>
<input type="button" name="B_render" id="B_render" value="render" title="render the symbol from the right in the dot pattern on the left">
<input type="button" name="B_prender" id="B_prender" value="render (px aligned)" title="render the symbol from the right in the dot pattern on the left aligned to pixel coordinates"><br>
<input type="button" name="B_irender" id="B_irender" value="render (inlined)" title="render the symbol from the right in the dot pattern on the left with inlined geometries">
<input type="button" name="B_iprender" id="B_iprender" value="render (inlined & aligned)" title="render the symbol from the right in the dot pattern on the left with inlined geometries aligned to pixel coordinates">
</fieldset>
</td>
</tr>
</table>
</div>
<div class="dotpattern">
<a id="SvgData" target="_blank" href="data:" title="link to the generated SVG for saving">get pattern SVG data</a>
<input type="button" name="B_list" id="B_list" value="point list" title="print the point location list below for custom processing">
<input type="button" name="B_cmdseq" id="B_cmdseq" value="sequence" title="show/hide current command sequence">
<input type="button" name="B_help" id="B_help" value="instructions" title="show/hide basic use instructions">
pattern size:
<span class="sz-switch inactive" id="sz_64">64</span> |
<span class="sz-switch inactive" id="sz_128">128</span> |
<span class="sz-switch active" id="sz_256">256</span> |
<span class="sz-switch inactive" id="sz_512">512</span> |
<span class="sz-switch inactive" id="sz_1024">1024</span>
<span id="msg"></span>
</div>
<div class="dotpattern cmdseq">
<a id="cmd_seq_link" href="#">command sequence</a>: <span id="cmd_seq"></span><br>
<span class="alert">command sequence replay does not work with manually entered symbols!</span>
</div>
<div class="dotpattern help">
<h3>basic use instructions:</h3>
<p>The following buttons are available:</p>
<ul>
<li><em>generate</em> generates a new random point set. This (or the next) should be done before any of the other buttons is used.</li>
<li><em>‣/∇/☐</em> generates a new regular grid point set. The triangular grids are distorted as needed to fit the square pattern.<br>Be aware that the triangular patterns are only truly periodic for certain distance values.</li>
<li><em>relax</em> relaxes the point positions by maximizing their distance.</li>
<li><em>relax ×10</em> relaxes ten times.</li>
<li><em>shake</em> displaces the points of the current set each by a small random distance.</li>
<li><em>jitter</em> displaces the points of the current set each by a sub pixel distance to randomize pixel alignment</li>
<li><em>render</em> renders the current point pattern in a svg using the symbol specified on the right.</li>
<li><em>render (px aligned)</em> renders the current point pattern aligned to integer pixel coordinates.</li>
<li><em>render (inlined)</em> renders the current point pattern aligned to integer pixel coordinates and inlines the symbols instead of referencing them.</li>
<li><em>show</em> displays the entered svg symbol and calculates offsets to center it.</li>
</ul>
<p>The following input fields are available:</p>
<ul>
<li><em>distance</em> specifies the dot distance for the initial generation of the points.</li>
<li><em>radius</em> is the influence radius of the points during relaxation. Should be larger than distance, needs to be a power of two and less than half the pattern size.</li>
<li><em>radius y</em> a different radius can be specified for the vertical direction, can be used for anisotropic patterns. No larger than nradius but does not need to be a power of two.</li>
<li><em>metric</em> specifies the metric for distance calculation. The default of 2 means normal euclidian metric.</li>
<li><em>casing</em> when >0 a white casing is drawn in that width during rendering below every symbol to separate it from other symbols in case of overlap.</li>
<li><em>offset</em> specifies an offset for the symbol used when rendering it in the pattern.</li>
<li><em>scale</em> specifies a scale factor for the symbol when used in the pattern.</li>
</ul>
</div>
</div>
<div id="pointdata"></div>
</div>
</html>