- Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathdotpattern.html
More file actions
Latest commit
153 lines (152 loc) · 10.4 KB
/
Copy pathdotpattern.html
File metadata and controls
153 lines (152 loc) · 10.4 KB
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>
<metahttp-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>jsdotpattern - Periodic dot and symbol pattern generator</title>
<scripttype="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript" src="js/snap.svg-min.js"></script>
<scripttype="text/javascript" src="js/svg_todataurl.js"></script>
<scripttype="text/javascript" src="js/url.min.js"></script>
<scripttype="text/javascript" src="js/seedrandom.min.js"></script>
<scripttype="text/javascript" src="symbols.js"></script>
<scripttype="text/javascript" src="jsdotpattern.js"></script>
<linkrel="stylesheet" type="text/css" href="css/jsdotpattern.css" />
</head>
<body>
<divclass="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 <ahref="https://github.com/imagico/jsdotpattern">source code on github</a>.
Licensed under <ahref="http://www.gnu.org/licenses/agpl-3.0.html">AGPL</a>. Symbols are <ahref="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>
<divclass="form">
<tableclass="dotpattern">
<tr>
<td><strong>dot pattern:</strong></td>
<td><strong>symbol pattern:</strong>
<inputclass="input-color" title="select symbol color for rendered pattern" type='color' id='sym_color' name='sym_color' value='#000000' />
<inputclass="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>
<tdclass="rim">
<canvasid="Canvas" width="256" height="256"></canvas>
</td>
<tdclass="rim">
<svgid="Svg">
<defs>
<clipPathid="clipPath">
<rectx="0" y="0" width="256" height="256" />
</clipPath>
</defs>
<gid="Pattern" style="clip-path: url(#clipPath);">
</g>
</svg>
</td>
<tdclass="sym-stuff">
<divid="sym_selector_box">
<divid="sym_selector">
</div>
</div>
<divclass="sym-bar">
<divid="sym_preview"><svgid="Svg_Test"></svg></div>
offset: <inputtype="text" size="3" name="offset_x" id="offset_x" value="" />
<inputtype="text" size="3" name="offset_y" id="offset_y" value="" />
scale: <inputtype="text" size="4" name="sym_scale" id="sym_scale" value="1.0" title="scale factor to apply to the symbol for rendering"/>
<inputtype="checkbox" name="B_rrotate" id="B_rrotate" value="1" title="rotate symbols randomly"> random rotate
<inputtype="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>
<divclass="dotpattern">
<table>
<tr>
<td>
<fieldset><legend>point generation</legend>
distance: <inputclass="nb" type="text" size="2" name="dot_dist" id="dot_dist" value="20" title="average distance of dots"/>
<inputtype="button" name="B_generate" id="B_generate" value="generate" title="generate a new random dot pattern"><br>
<inputtype="button" class="btn-small" name="B_generate_triangle" id="B_generate_triangle" value="‣" title="generate a regular triangular dot pattern">
<inputtype="button" class="btn-small" name="B_generate_triangle2" id="B_generate_triangle2" value="∇" title="generate a regular rotated triangular dot pattern">
<inputtype="button" class="btn-small" name="B_generate_square" id="B_generate_square" value="☐" title="generate a regular square dot pattern">
<inputtype="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: <inputclass="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: <inputclass="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: <inputclass="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>
<inputtype="button" name="B_relaxS" id="B_relaxS" value="relax small area" style="display:none;" title="relax the dot positions in the small topleft area">
<inputtype="button" name="B_relax" id="B_relax" value="relax" title="relax the dot positions to maximize their distance">
<inputtype="button" name="B_relax10" id="B_relax10" value="relax ×10" title="relax more">
<inputtype="button" name="B_shake" id="B_shake" value="shake" title="randomize the pattern a bit">
<inputtype="button" name="B_jitter" id="B_jitter" value="jitter" title="jitter dot positions">
<inputtype="button" class="btn-small" name="B_rotate" id="B_rotate" value="♦" title="rotate the dot pattern 45 degrees and scale to fit">
<inputtype="button" class="btn-small" name="B_swap" id="B_swap" value="➚" title="mirror dot pattern diagonally">
<inputtype="button" class="btn-small" name="B_zigzag" id="B_zigzag" value=">" title="zigzag pattern horizontally">
</fieldset>
</td>
<td>
<fieldset><legend>rendering</legend>
casing: <inputclass="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)"/>
<inputtype="button" name="B_render" id="B_render" value="render" title="render the symbol from the right in the dot pattern on the left">
<inputtype="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>
<inputtype="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">
<inputtype="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>
<divclass="dotpattern">
<aid="SvgData" target="_blank" href="data:" title="link to the generated SVG for saving">get pattern SVG data</a>
<inputtype="button" name="B_list" id="B_list" value="point list" title="print the point location list below for custom processing">
<inputtype="button" name="B_cmdseq" id="B_cmdseq" value="sequence" title="show/hide current command sequence">
<inputtype="button" name="B_help" id="B_help" value="instructions" title="show/hide basic use instructions">
pattern size:
<spanclass="sz-switch inactive" id="sz_64">64</span> |
<spanclass="sz-switch inactive" id="sz_128">128</span> |
<spanclass="sz-switch active" id="sz_256">256</span> |
<spanclass="sz-switch inactive" id="sz_512">512</span> |
<spanclass="sz-switch inactive" id="sz_1024">1024</span>
<spanid="msg"></span>
</div>
<divclass="dotpattern cmdseq">
<aid="cmd_seq_link" href="#">command sequence</a>: <spanid="cmd_seq"></span><br>
<spanclass="alert">command sequence replay does not work with manually entered symbols!</span>
</div>
<divclass="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>
<divid="pointdata"></div>
</div>
</html>