-
Notifications
You must be signed in to change notification settings - Fork 0
/
fullscreen.html
319 lines (279 loc) · 19.7 KB
/
fullscreen.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:700" rel="stylesheet">
<style>
body {
/*background-color: white;*/
/*background-color: #FEDEC7;*/
margin: 0;
padding: 0 5%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: calc(100vw - 10%);
font-family: 'Noto Sans', sans-serif;
color: teal;
}
svg {
max-width: 100%;
width: 100%;
height: auto;
/*border: 1px solid black;*/
cursor: pointer;
}
.node {
stroke: none;
fill: #ffffff;
transition-property: fill;
transition-duration: .2s;
transition-timing-function: linear;
transition-delay: .0s;
}
.node.is-inside {
fill: MEDIUMAQUAMARINE;
}
.node.root-node {
display: none;
}
g text {
display: none;
}
#lettering polygon {
stroke: blue;
fill: none;
display: none;
}
.back-to-index {
position: absolute;
top: 10px;
left: 10px;
}
</style>
<svg id="calogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<title>lettering-noto</title>
<g id="lettering">
<g id="uppercase">
<g id="fatlettering">
<polygon points="111.6 238.8 110.2 237.8 107.1 227.4 91.7 227.4 88.6 237.8 87.2 238.8 76.3 238.8 75 236.9 91.8 188.9 93.2 188 105.6 188 106.9 188.9 123.8 236.9 122.5 238.8 111.6 238.8" />
<polygon points="142.6 238.8 141.1 237.4 141.1 199.4 129.6 199.4 128.2 198 128.2 189.6 129.6 188.2 165.7 188.2 167.1 189.6 167.1 198 165.7 199.4 154.1 199.4 154.1 237.4 152.7 238.8 142.6 238.8" />
<polygon points="181.1 238.8 179.6 237.4 179.6 189.6 181.1 188.2 191.2 188.2 192.6 189.6 192.6 227.6 210.6 227.6 212 229 212 237.4 210.6 238.8 181.1 238.8" />
<polygon points="256.2 238.8 254.8 237.8 251.7 227.4 236.3 227.4 233.2 237.8 231.8 238.8 220.9 238.8 219.6 236.9 236.4 188.9 237.8 188 250.2 188 251.5 188.9 268.4 236.9 267.1 238.8 256.2 238.8" />
<polygon points="310.7 238.8 309.4 238.1 291.2 206.4 291.6 214.8 291.6 237.4 290.2 238.8 281.1 238.8 279.7 237.4 279.7 189.6 281.1 188.2 293.9 188.2 295.1 188.9 313.3 220.2 313 212.2 313 189.6 314.4 188.2 323.5 188.2 325 189.6 325 237.4 323.5 238.8 310.7 238.8" />
<polygon points="351.9 238.8 350.5 237.4 350.5 199.4 338.9 199.4 337.5 198 337.5 189.6 338.9 188.2 375 188.2 376.4 189.6 376.4 198 375 199.4 363.5 199.4 363.5 237.4 362 238.8 351.9 238.8" />
<polygon points="390.4 238.8 389 237.4 389 189.6 390.4 188.2 417.9 188.2 419.4 189.6 419.4 197.9 417.9 199.3 402 199.3 402 207 416.7 207 418.1 208.4 418.1 216.7 416.7 218.1 402 218.1 402 227.6 417.9 227.6 419.4 229 419.4 237.4 417.9 238.8 390.4 238.8" />
<polygon points="94.2 301.4 93.9 301.4 89.1 300.1 88.8 300 85.2 298 84.9 297.8 81.8 295 81.6 294.8 79.2 291.3 79 291 77.3 286.8 77.2 286.6 76.2 281.7 76.2 281.5 75.8 275.9 75.8 275.7 76.5 268.7 76.6 268.4 78.6 262.3 78.8 262 82.1 257 82.4 256.7 86.9 253.1 87.2 252.9 92.7 250.6 93.1 250.5 99.5 249.8 99.8 249.8 106.8 250.6 107.1 250.7 114.1 253.2 115 255.1 111.7 263.3 109.8 264.1 107.1 262.9 104.6 261.9 102.1 261.3 99.7 261.1 95.2 262 92 264.8 89.8 269.5 89.1 275.9 89.7 282.1 91.8 287 95 289.6 99.7 290.4 105 289.9 111.5 288 113.3 289.4 113.3 297.9 112.3 299.2 106 301.1 105.8 301.1 98.8 301.7 98.6 301.7 94.2 301.4" />
<polygon points="159.3 301.1 158 300.1 154.8 289.7 139.5 289.7 136.3 300.1 135 301.1 124 301.1 122.7 299.2 139.6 251.2 140.9 250.3 153.3 250.3 154.6 251.2 171.6 299.2 170.2 301.1 159.3 301.1" />
<polygon points="184.3 301.1 182.9 299.7 182.9 251.9 184.3 250.5 194.4 250.5 195.8 251.9 195.8 289.9 213.8 289.9 215.2 291.3 215.2 299.7 213.8 301.1 184.3 301.1" />
<polygon points="239.7 301.1 238.3 300.1 222.1 252.3 223.5 250.5 233.7 250.5 235.1 251.5 244 279.9 245.3 284.5 246.3 280 246.3 279.9 255.4 251.5 256.7 250.5 267 250.5 268.3 252.3 252.1 300.1 250.7 301.1 239.7 301.1" />
<polygon points="277.2 301.1 275.8 299.7 275.8 293.9 276.6 292.6 281.6 290.3 281.6 261.2 276.6 258.9 275.8 257.6 275.8 251.9 277.2 250.5 298.9 250.5 300.3 251.9 300.3 257.6 299.5 258.9 294.5 261.2 294.5 290.3 299.5 292.6 300.3 293.9 300.3 299.7 298.9 301.1 277.2 301.1" />
<polygon points="344.6 301.1 343.4 300.4 325.2 268.7 325.6 277.1 325.6 299.7 324.2 301.1 315.1 301.1 313.7 299.7 313.7 251.9 315.1 250.5 327.9 250.5 329.1 251.2 347.3 282.5 347 274.5 347 251.9 348.4 250.5 357.5 250.5 358.9 251.9 358.9 299.7 357.5 301.1 344.6 301.1" />
<polygon points="398 301.7 388.3 300.1 387.7 299.9 380.6 295.1 380.1 294.6 375.7 286.9 375.5 286.4 374.1 275.8 374.1 275.4 375.5 264.9 375.7 264.4 380.1 256.7 380.6 256.2 387.8 251.5 388.3 251.3 398 249.7 398.5 249.7 408.2 251.3 408.8 251.5 415.9 256.3 416.4 256.8 420.7 264.5 420.9 265 422.4 275.5 422.4 275.9 420.9 286.4 420.7 286.9 416.3 294.6 415.9 295.1 408.7 299.9 408.1 300.1 398.4 301.7 398 301.7" />
<polygon points="105.7 217.5 100.3 200 99.4 196.8 93.2 217.5 105.7 217.5 105.7 217.5" />
<polygon points="250.3 217.5 244.9 200 244 196.8 237.8 217.5 250.3 217.5 250.3 217.5" />
<polygon points="153.4 279.8 148 262.3 147.2 259.1 141 279.8 153.4 279.8 153.4 279.8" />
<polygon points="386.1 275.7 386.8 282.7 389.1 287.8 392.9 290.8 398.2 291.8 403.5 290.8 407.3 287.8 409.7 282.2 410.3 275.7 409.7 269 407.3 263.6 398.3 259.6 393 260.6 389.2 263.6 386.8 268.7 386.1 275.7 386.1 275.7" />
</g>
<g id="lettering-2" data-name="lettering">
<polygon points="111.6 237.4 108.1 226 90.7 226 87.2 237.4 76.3 237.4 93.2 189.4 105.6 189.4 122.5 237.4 111.6 237.4 111.6 237.4" />
<polygon points="105.7 217.5 100.3 200 99.4 196.8 93.2 217.5 105.7 217.5 105.7 217.5" />
<polygon points="152.7 237.4 142.6 237.4 142.6 198 129.6 198 129.6 189.6 165.7 189.6 165.7 198 152.7 198 152.7 237.4 152.7 237.4" />
<polygon points="181.1 237.4 181.1 189.6 191.2 189.6 191.2 229 210.6 229 210.6 237.4 181.1 237.4 181.1 237.4" />
<polygon points="256.2 237.4 252.7 226 235.3 226 231.8 237.4 220.9 237.4 237.8 189.4 250.2 189.4 267.1 237.4 256.2 237.4 256.2 237.4" />
<polygon points="250.3 217.5 244.9 200 244 196.8 237.8 217.5 250.3 217.5 250.3 217.5" />
<polygon points="323.5 237.4 310.7 237.4 289.9 201.2 289.6 201.2 290.2 214.9 290.2 237.4 281.1 237.4 281.1 189.6 293.9 189.6 314.7 225.4 314.9 225.4 314.4 212.2 314.4 189.6 323.5 189.6 323.5 237.4 323.5 237.4" />
<polygon points="362 237.4 351.9 237.4 351.9 198 338.9 198 338.9 189.6 375 189.6 375 198 362 198 362 237.4 362 237.4" />
<polygon points="417.9 237.4 390.4 237.4 390.4 189.6 417.9 189.6 417.9 197.9 400.5 197.9 400.5 208.4 416.7 208.4 416.7 216.7 400.5 216.7 400.5 229 417.9 229 417.9 237.4 417.9 237.4" />
<polygon points="99.7 259.6 94.6 260.7 90.8 263.9 88.4 269.1 87.7 275.9 88.3 282.4 90.7 287.9 94.4 290.9 99.7 291.9 105.2 291.2 111.9 289.4 111.9 297.9 105.6 299.7 98.7 300.3 94.3 300 89.5 298.7 85.8 296.8 82.8 294 80.3 290.5 78.6 286.3 77.6 281.4 77.2 275.8 77.9 268.8 79.9 262.8 83.3 257.8 87.7 254.2 93.3 251.9 99.7 251.2 106.6 252 113.7 254.6 110.4 262.8 107.7 261.6 105 260.6 102.3 259.9 99.7 259.6 99.7 259.6" />
<polygon points="159.3 299.7 155.8 288.3 138.4 288.3 135 299.7 124 299.7 140.9 251.7 153.3 251.7 170.2 299.7 159.3 299.7 159.3 299.7" />
<polygon points="153.4 279.8 148 262.3 147.2 259.1 141 279.8 153.4 279.8 153.4 279.8" />
<polygon points="184.3 299.7 184.3 251.9 194.4 251.9 194.4 291.3 213.8 291.3 213.8 299.7 184.3 299.7 184.3 299.7" />
<polygon points="256.7 251.9 267 251.9 250.7 299.7 239.7 299.7 223.5 251.9 233.7 251.9 242.7 280.3 244.2 286.2 245.2 290.8 247.7 280.3 256.7 251.9 256.7 251.9" />
<polygon points="298.9 299.7 277.2 299.7 277.2 293.9 283 291.2 283 260.3 277.2 257.6 277.2 251.9 298.9 251.9 298.9 257.6 293.1 260.3 293.1 291.2 298.9 293.9 298.9 299.7 298.9 299.7" />
<polygon points="357.5 299.7 344.6 299.7 323.8 263.5 323.6 263.5 324.2 277.2 324.2 299.7 315.1 299.7 315.1 251.9 327.9 251.9 348.7 287.7 348.9 287.7 348.4 274.5 348.4 251.9 357.5 251.9 357.5 299.7 357.5 299.7" />
<polygon points="421 275.7 419.5 286.2 415.1 293.9 407.9 298.7 398.2 300.3 388.5 298.7 381.3 293.9 376.9 286.2 375.5 275.6 376.9 265.1 381.4 257.4 388.5 252.7 398.3 251.1 408 252.7 415.1 257.5 419.5 265.2 421 275.7 421 275.7" />
<polygon points="386.1 275.7 386.8 282.7 389.1 287.8 392.9 290.8 398.2 291.8 403.5 290.8 407.3 287.8 409.7 282.2 410.3 275.7 409.7 269 407.3 263.6 398.3 259.6 393 260.6 389.2 263.6 386.8 268.7 386.1 275.7 386.1 275.7" />
</g>
</g>
<g id="lowercase">
<polygon points="51.9 235.2 50.1 230.7 48.4 226.2 48.1 226.2 47.9 226.2 43.3 231.1 38.5 234.2 32.9 235.9 25.8 236.4 17.2 235 10.7 230.9 6.6 224.3 5.2 215.3 7 206.1 12.6 199.7 21.9 195.8 35 194.1 40.8 193.9 46.5 193.8 46.5 192.3 46.5 190.8 43.9 183.2 36.2 180.7 27.5 181.9 17.4 185.5 14.4 179.4 11.4 173.3 23.5 168.8 36.9 167.2 48.7 168.7 57.4 173.1 62.8 180.4 64.6 190.8 64.6 213 64.6 235.2 58.2 235.2 51.9 235.2 51.9 235.2" />
<polygon points="46.5 204.4 43 204.5 39.5 204.6 32.6 205.4 27.7 207.5 24.8 210.8 23.8 215.4 26 221.2 32.7 223.1 38.3 222.2 42.8 219.5 45.6 215.3 46.5 209.8 46.5 207.1 46.5 204.4 46.5 204.4" />
<polygon points="121.1 221.9 132.6 219.9 132.6 233.4 123.7 235.9 115.9 236.4 107.2 235.3 100 230.9 96.1 223.2 95 214.4 95 182.3 86.3 182.3 86.3 174.6 96.3 168.5 101.6 154.4 113.2 154.4 113.2 168.6 131.8 168.6 131.8 182.3 113.2 182.3 113.2 214.4 115.4 220.1 121.1 221.9 121.1 221.9" />
<polygon points="174 235.2 155.8 235.2 155.8 142.5 174 142.5 174 235.2 174 235.2" />
<polygon points="245.1 235.2 243.3 230.7 241.6 226.2 241.3 226.2 241.1 226.2 236.4 231.1 231.6 234.2 226.1 235.9 219 236.4 210.4 235 203.9 230.9 199.8 224.3 198.4 215.3 200.2 206.1 205.8 199.7 215.1 195.8 228.2 194.1 233.9 193.9 239.7 193.8 239.7 192.3 239.7 190.8 237.1 183.2 229.4 180.7 220.7 181.9 210.6 185.5 207.6 179.4 204.6 173.3 216.7 168.8 230.1 167.2 241.9 168.7 250.6 173.1 256 180.4 257.8 190.8 257.8 213 257.8 235.2 251.4 235.2 245.1 235.2 245.1 235.2" />
<polygon points="239.7 204.4 236.2 204.5 232.7 204.6 225.8 205.4 220.9 207.5 218 210.8 217 215.4 219.2 221.2 225.8 223.1 231.5 222.2 235.9 219.5 238.8 215.3 239.7 209.8 239.7 207.1 239.7 204.4 239.7 204.4" />
<polygon points="347.7 235.2 338.6 235.2 329.6 235.2 329.6 215.8 329.6 196.3 328.9 190 327 185.5 323.7 182.8 318.8 181.9 312.3 183.2 307.8 187 305.3 193.8 304.4 203.9 304.4 219.6 304.4 235.2 295.3 235.2 286.2 235.2 286.2 201.9 286.2 168.6 293.2 168.6 300.1 168.6 301.3 172.9 302.6 177.1 303.1 177.1 303.6 177.1 307.2 172.9 311.9 169.8 317.6 168 324.1 167.4 334.3 168.9 341.7 173.7 346.2 181.3 347.7 191.8 347.7 213.5 347.7 235.2 347.7 235.2" />
<polygon points="404.3 221.9 415.7 219.9 415.7 233.4 407 235.8 399 236.4 389.8 235.1 383.1 230.9 379 222.5 378.2 214.4 378.2 182.3 369.5 182.3 369.5 174.6 379.5 168.5 384.7 154.4 396.3 154.4 396.3 168.6 415 168.6 415 182.3 396.3 182.3 396.3 214.4 398.5 220.1 404.3 221.9 404.3 221.9" />
<polygon points="469.1 236.4 454.7 234.2 443.9 227.5 437.1 216.8 434.9 202.4 437 187.6 443.2 176.5 453.2 169.7 466.4 167.4 478.9 169.4 488.4 175.4 494.3 185 496.2 197.6 496.2 202 496.2 206.4 474.8 206.4 453.3 206.4 454.6 213.3 457.9 218.5 463 221.8 469.9 222.9 475.8 222.6 481.3 221.6 486.8 220 492.5 217.6 492.5 224.7 492.5 231.7 487.6 233.8 482.3 235.3 476.3 236.1 469.1 236.4 469.1 236.4" />
<polygon points="466.5 180.3 461.4 181.2 457.4 184 454.9 188.4 453.7 194.4 466.4 194.4 479.2 194.4 478.3 188.4 475.7 184 471.7 181.2 466.5 180.3 466.5 180.3" />
<polygon points="40 343.8 26.8 341.8 16.7 335.2 10.6 323.5 8.9 309.6 11.1 294.7 17.4 283.7 27.7 277 41.7 274.7 52.6 275.9 62.4 279.2 59.7 286.3 57 293.3 52.9 291.7 49 290.5 45.3 289.7 41.7 289.4 31 294.4 27.5 309.5 31 324.2 41.7 329.1 46.7 328.7 51.4 327.7 55.8 325.9 60.3 323.3 60.3 331.1 60.3 338.8 55.9 341.2 51.4 342.7 46.3 343.5 40 343.8 40 343.8" />
<polygon points="127.8 342.6 126 338.1 124.3 333.5 124 333.5 123.8 333.5 119.1 338.4 114.4 341.5 108.8 343.2 101.7 343.8 93.1 342.4 86.6 338.3 82.5 331.6 81.1 322.7 82.9 313.5 88.5 307 97.8 303.1 110.9 301.5 116.7 301.3 122.4 301.1 122.4 299.7 122.4 298.2 119.8 290.6 112.1 288.1 103.4 289.3 93.3 292.9 90.3 286.8 87.3 280.6 99.4 276.1 112.8 274.6 124.6 276.1 133.3 280.4 138.7 287.8 140.5 298.2 140.5 320.4 140.5 342.6 134.1 342.6 127.8 342.6 127.8 342.6" />
<polygon points="122.4 311.7 118.9 311.8 115.4 312 108.5 312.8 103.6 314.8 100.7 318.1 99.7 322.8 101.9 328.6 108.5 330.5 114.2 329.6 118.6 326.9 121.5 322.6 122.4 317.2 122.4 314.5 122.4 311.7 122.4 311.7" />
<polygon points="187.1 342.6 169 342.6 169 249.9 187.1 249.9 187.1 342.6 187.1 342.6" />
<polygon points="231.8 342.6 206.4 276 225.4 276 238.3 313.9 240.9 327.6 241.3 327.6 244 313.9 256.8 276 275.8 276 250.4 342.6 231.8 342.6 231.8 342.6" />
<polygon points="294.3 258.8 296.4 252.5 304.2 249.9 311.5 252 314.1 258.8 311.7 265.3 304.2 267.7 297.5 266 294.3 258.8 294.3 258.8" />
<polygon points="313.3 342.6 295.1 342.6 295.1 276 313.3 276 313.3 342.6 313.3 342.6" />
<polygon points="403.6 342.6 385.4 342.6 385.4 303.7 382.9 292.9 374.7 289.3 363.7 294.4 360.3 311.2 360.3 342.6 342.1 342.6 342.1 276 356 276 358.4 284.5 359.5 284.5 367.8 277.2 379.9 274.7 390.2 276.3 397.6 281 402.1 288.7 403.6 299.1 403.6 342.6 403.6 342.6" />
<polygon points="492.6 309.2 490.5 323.6 484 334.6 473.8 341.5 460.1 343.8 451.1 342.7 443.2 339.6 436.7 334.5 431.9 327.5 429 319 428 309.2 430.1 294.6 436.5 283.8 446.8 277 460.5 274.7 469.5 275.8 477.4 278.9 483.9 284 488.7 290.9 491.6 299.3 492.6 309.2 492.6 309.2" />
<polygon points="446.5 309.2 447.4 317.8 449.8 324.1 454.1 327.9 460.4 329.2 466.6 327.9 470.8 324.1 473.2 317.9 474 309.2 473.2 300.5 470.8 294.3 466.6 290.6 460.3 289.4 454 290.6 449.8 294.3 447.4 300.5 446.5 309.2 446.5 309.2" />
</g>
<g id="c-letter">
<polygon points="273.6 132.3 254.9 134.1 238.4 139.7 224.1 149.1 212.1 162.1 202.5 178.5 195.7 197.9 191.6 220.1 190.3 245.4 195.5 293.9 211.1 328.6 237.2 349.5 273.6 356.4 292 355.3 312.3 352 334.4 346.6 358.3 338.9 358.3 353.7 358.3 368.4 358.3 383.2 358.3 398 337.3 405.4 315.1 410.7 291.7 413.9 267 415 232.9 412.2 203.1 404 177.5 390.3 156.2 371.1 139.4 346.7 127.4 317.5 120.2 283.6 117.8 244.9 119 219.8 122.5 196.3 128.4 174.4 136.7 154.2 147.1 135.8 159.7 119.8 174.2 106 190.8 94.4 209.3 85.4 229.2 78.9 250.7 75 273.6 73.7 297.8 75.1 322.1 79.5 346.4 86.8 370.8 97.1 365.1 111.4 359.5 125.7 353.8 140 348.1 154.3 338.8 150 329.4 146 320.1 142.3 310.6 138.8 301.3 136 292 133.9 282.8 132.7 273.6 132.3 273.6 132.3" />
</g>
</g>
</svg>
<a class="back-to-index" href="./index.html">Back</a>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/svg-points.min.js"></script>
<script>
let svg = d3.select("svg"),
width = 500,
height = 500,
rootNode,
nodes = [],
node = svg.selectAll(".node"),
scaleFactor = 500 / width,
lettersPolygons = [],
margin = {};
let config = [{
nodeRadius: 3.5,
collisionMargin: .5,
amountNodes: 3800,
radiusRootNode: 2,
margin: {
top: scaleFactor * height * 0.28,
bottom: scaleFactor * height * 0.7,
left: 0,
right: scaleFactor * width
}
}]
let configuration = config[0];
// A class for converting the poligons into an object suitable for the library svg-points.js
class polygonModel {
constructor(type, attr, element) {
this['type'] = type;
this[attr] = d3.select(element).attr(attr);
}
}
// Convert all polygons in array of coordinates, thanks to svg-points.js
svg.selectAll('#lowercase polygon').each(function() {
let thisPolygon = new polygonModel('polygon', 'points', this);
let thisPolygonPointsObjects = SVGPoints.toPoints(thisPolygon);
let thisPolygonPointsArray = [];
thisPolygonPointsObjects.forEach(function(d) {
thisPolygonPointsArray.push([d.x, d.y]);
});
lettersPolygons.push(thisPolygonPointsArray);
});
// This function checks whether the circle is or not whitin any of the letters polygon
function checkIfInside(coordinates) {
let flag = 0;
lettersPolygons.forEach(function(d) {
if (d3.polygonContains(d, coordinates)) {
flag++;
}
})
if (flag == 1) {
return true;
} else {
return false;
}
}
// A function for randomly adding circles to the nodes array
function addNodes(n) {
for (let i = 0; i < n; i++) {
let myX = d3.randomUniform(configuration.margin.left, configuration.margin.right)();
let myY = d3.randomUniform(configuration.margin.top, configuration.margin.bottom)();
// let myX = [configuration.margin.left,configuration.margin.right][Math.floor(Math.random() * 2)];
// let myY = [configuration.margin.top,configuration.margin.bottom][Math.floor(Math.random() * 2)];
let myRadius = d3.randomUniform(1, configuration.nodeRadius)();
nodes.push({ 'id': i, 'r': myRadius, 'x': myX, 'y': myY });
}
if (configuration.radiusRootNode && !rootNode) {
rootNode = nodes[0];
rootNode.x = d3.randomUniform(configuration.margin.left, configuration.margin.right)();
rootNode.y = d3.randomUniform(configuration.margin.top, configuration.margin.bottom)();
rootNode.r = width / 40;
rootNode.r = configuration.nodeRadius * configuration.radiusRootNode;
}
}
let xForce = d3.forceY(width / 2).strength(0.04);
let yForce = d3.forceX(height / 2).strength(0.02);
let chargeForce = d3.forceManyBody().strength(0);
let collideForce = d3.forceCollide(function(d) { return d.r + configuration.collisionMargin }).iterations(2);
//Declare simaltion
let simulation = d3.forceSimulation(nodes)
// .force("x", xForce)
// .force("y", yForce)
.force("charge", chargeForce)
.force("collide", collideForce)
.alpha(1)
.alphaDecay(0.01)
.on("tick", ticked);
// Update function
function update() {
let beginTime = d3.now();
// if(window.width > 767) { collisionMargin = .5 }
function drawGraph() {
// Apply the general update pattern to the nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
node = node.enter().append("circle")
.merge(node)
.classed('node', true)
.classed('is-inside', function(d) { return checkIfInside([d.x, d.y]) })
.classed('root-node', function(d) { if (d.id == 0) { return true } else { return false } })
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
}
drawGraph();
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.alpha(1).restart();
simulation.on("end", function() {
console.log('simulation done', d3.now() - beginTime);
})
}
function ticked() {
// if (simulation.alpha() < 0.7) {
// simulation.force("x", null)
// .force("y", null)
// .force("charge", null)
// .force("collide", collideForce)
// }
node.attr("cx", function(d) { return d.x = Math.max(configuration.margin.left + d.r, Math.min(configuration.margin.right - d.r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(configuration.margin.top + d.r, Math.min(configuration.margin.bottom - d.r, d.y)); })
.classed('is-inside', function(d) { return checkIfInside([d.x, d.y]) })
}
// Anticolllision on mouse move
svg.on("mousemove", function() {
let p1 = d3.mouse(this);
if (rootNode) {
rootNode.fx = p1[0];
rootNode.fy = p1[1];
simulation
// .force("x", null)
// .force("y", null)
// .force("charge", null)
.alpha(0.5)
.restart(); //reheat the simulation
}
});
// // add circles on click
// svg.on("click", function() {
// // window.location = './';
// simulation.alpha(0.9).restart();
// });
//Add 100 nodes to the array, then draw the first time
addNodes(configuration.amountNodes);
update();
// add circles every tot seconds
// d3.interval(function() {
// if (nodes.length < 1000) {
// // console.log('interval');
// addNodes(25);
// update();
// }
// }, 50, d3.now());
</script>