-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathautomat.html
435 lines (358 loc) · 25.5 KB
/
automat.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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Ein Automat für Pixelmuster // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Vorsicht, es geht um Mathematik! Jedoch nicht um komplizierte Gleichungen, sondern um einfache Regeln, die eine weiße Fläche mit Mustern füllen.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/automat.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2021-02-19">Fr, 19. Febr. 2021</time>
<h1>Ein Automat für Pixelmuster</h1>
<p>Mich stimmt es traurig, wenn jemand stolz verkündet, in Mathe immer eine Niete gewesen zu sein. Weil das ja nur etwas für Nerds sei, viel zu kompliziert und im Alltag ziemlich unbrauchbar.</p>
<p>Natürlich gibt es wie in jeder Wissenschaft auch in Mathematik superspezialisierte Bereiche, die ohne Fachwissen unverständlich sind und deren Nutzen nur für einen kleinen Bereich von Bedeutung sind. Andererseits finde ich bestimmte Themen der Mathematik praktisch (z.<small> </small>B. Bruchrechnen), verblüffend (z.<small> </small>B. <a href="https://matheerklaert.de/die-aequatoraufgabe-kreisumfang/">Seil am Äquator verlängern</a>) oder wirklich schön (z.<small> </small>B. <a href="https://de.wikipedia.org/wiki/Parkettierung">Parkettierung</a>).</p>
<p>Besonders faszinierend finde ich, wenn aus eher kleinen Vorgaben ein überraschend komplexes Ding entsteht, das sich nicht intuitiv vorhersagen lässt. Ein Beispiel dafür ist ein zellulärer Automat (englisch: <em>cellular automaton</em>, kurz „CA“).</p>
<h2 id="wir-bauen-einen-zellulären-automaten">Wir bauen einen zellulären Automaten</h2>
<p>Viel braucht man dafür nicht, eigentlich nur eine große, leere Fläche mit einzelnen Bildpunkten („Zellen“). Unser Automat soll eindimensional werden, das heißt, er arbeitet die Fläche zeilenweise stur von oben nach unten ab. Als Ausgangspunkt färben wir in der ersten Zeile die mittlere Zelle schwarz.</p>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAEOAgMAAACr33pGAAAACVBMVEXT09P///8zMzMhY8lFAAABM0lEQVR42u3XMQqEMABFwRzBxvvY2Kskl/SUJmXQQgOigQksCMruuPzmhdTvWQL8V/gpdHuGMOdXiOU9ykUa82etLqr7zx7c9nyqB+P1g+vpG2/9Ijw8PDw8PDw8PDx8z3gl1f6H/nY28PDw8PDw8PDw8PAv45WU2cDDw8PDw8PDw8PDKymzgYeHh4eHh4eHh4eHl4FmAw8PDw8PDw8PDw+vpJQUPDw8PDw8PDw8PLySUlLw8PDw8PDw8PDw8EpKSdk8PDw8PDw8PDw8vJJSUmYDDw8PDw8PDw8PDy8DZaDNw8PDw8PDw8PDwyspJWU28PDw8PDw8PDw8PBKymzg4eHh4eHh4eHh4ZWUkoKHh4eHh4eHh4eHh5eBZgMPDw8PDw8PDw8Pr6SUFDw8PDw8PHwr/gDN1bPdmYHpUAAAAABJRU5ErkJggg==" alt="Eine weiße Fläche aus einzelnen Zellen. In der ersten Zeilen ist die mittlere Zelle schwarz gefärbt." /></p>
<p>Jetzt kommt die Kleinigkeit, die unseren zellulären Automaten zum Laufen bringt: Wir legen eine Regel fest, wie die Zellen ab der zweiten Zeile eingefärbt werden sollen. Dazu schauen wir uns für jede Zelle immer die drei Nachbarn in der vorigen Zeile an (schräg links darüber, direkt darüber und schräg rechts darüber). Wenn davon zum Beispiel alle drei weiß sind, dann legen wir mal fest, dass die fragliche Zelle in der neuen Zeile schwarz werden soll.</p>
<p>Insgesamt gibt es acht Fälle, wie die drei Zellen in der vorangegangenen Zeile aussehen können. Für jeden dieser Fälle legen wir fest, was mit der Zelle darunter passieren soll. Ich hab zum Beispiel mal folgendes ausgewählt:</p>
<p><img src="material/ca-rule73.png" alt="Alle Kombinationen der darüberliegenden drei Zellen, darunter dann, wie die fragliche Zelle gefärbt werden soll. Hier abgebildet ist die Regel 73, also: weiß, schwarz, weiß, weiß, schwarz, weiß, weiß, schwarz." /></p>
<p>Für jede der acht Positionen bestimmen wir entweder 0 (bleibt weiß) oder 1 (wird eingefärbt), womit insgesamt 255 verschiedene Regeln möglich sind. Unsere gewählte Regel lässt sich kurz als 01001001 schreiben. Lesen wir das als <a href="https://de.wikipedia.org/wiki/Dualsystem">Zahl im Binärsystem</a>, können wir das in die Dezimalzahl 73 übersetzen, das ist verständlicher. Nun wird es Zeit für die Praxis, wir starten unseren zellulären Automaten …</p>
<h2 id="einfache-regel-kompliziertes-ergebnis">Einfache Regel, kompliziertes Ergebnis</h2>
<p>Die Regel <input id="rulenumber" type="number" min="0" max="255" value="73" oninput="startFromInput(this.value)" /> <em>(zwischen 0 und 255)</em> sieht grafisch so aus:</p>
<style>
:root {--cellSize: 98.8% / 41; }
#ca-ruleset { margin: 1.5em 0 1.167em;
display: flex; justify-content: space-between; }
#ca-ruleset label { position: relative; }
#ca-ruleset input[type="checkbox"], #ca-ruleset svg {
width: min(8vw,3.2rem); height: auto; }
#ca-ruleset input[type="checkbox"] {
position: absolute; opacity: 0; top: -.2rem; left: -.25rem; }
#ca-ruleset input[type="checkbox"]:focus + svg {
outline: 2px dotted #666; outline-offset: 1px; }
#ca-ruleset input[type="checkbox"]:focus:not(:focus-visible) + svg {
outline: none; }
#ca-ruleset svg { stroke: #000; stroke-width: .5 }
#ca-ruleset .ankreuzer {fill: #fff; stroke: #060}
#ca-ruleset input[type="checkbox"]:checked + svg .ankreuzer {fill: #281}
#ca-ruleset span { position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#rulenumber { width: 4em; text-align:center; margin: 0 .3em;
font: bold .95em/1 czSlab,Georgia,serif; color: #060; }
#ca-field { margin: 1.5em 0 1.167em; }
.ca-row { font-size: 0; }
.ca-row div { width: 2.43%; width: var(--cellSize);
padding-bottom: 2.43%; padding-bottom: var(--cellSize);
display: inline-block; margin: 0; outline: 1px solid lightgrey; outline-offset:-.5px; }
.ca-row .active { background-color: black; }
.ca-row .inactive { background-color: white; }
.ca-row div[onclick] { outline-color: #deb; }
.ca-row div[onclick].active { background-color: #060; }
</style>
<div id="ca-ruleset">
<label for="c-111"><input type="checkbox" id="c-111" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#333" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 1 1 1</span></label>
<label for="c-110"><input type="checkbox" id="c-110" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#333" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 1 1 0</span></label>
<label for="c-101"><input type="checkbox" id="c-101" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#333" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 1 0 1</span></label>
<label for="c-100"><input type="checkbox" id="c-100" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#333" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 1 0 0</span></label>
<label for="c-011"><input type="checkbox" id="c-011" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#fff" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 0 1 1</span></label>
<label for="c-010"><input type="checkbox" id="c-010" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#fff" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 0 1 0</span></label>
<label for="c-001"><input type="checkbox" id="c-001" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#fff" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#333" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 0 0 1</span></label>
<label for="c-000"><input type="checkbox" id="c-000" onclick="startFromCheckbox()" />
<svg viewBox="0 0 15.5 11.5" aria-hidden="true" focusable="false">
<rect style="fill:#fff" y=".25" x=".25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="5.25" height="5" width="5" />
<rect style="fill:#fff" y=".25" x="10.25" height="5" width="5" />
<rect class="ankreuzer" y="5.25" x="4.75" height="6" width="6" />
</svg><span>Status, wenn darüber 0 0 0</span></label>
</div>
<p><!-- ruleset --></p>
<p>Und so füllt der Automat damit das Feld:</p>
<div id="ca-field">
<div class="ca-row"></div>
</div>
<script>
const cellMinSize = 17 // in Pixel
const cellMaxPerRow = 41
const rows = 37
var rule = document.querySelector('#rulenumber').value;
// Zellen pro Zeile (= Spalten) berechnen
var cols = (window.innerWidth < (cellMinSize * cellMaxPerRow)) ? Math.floor(window.innerWidth/cellMinSize) : cellMaxPerRow;
// Größe der Zellen im Feld (max. 98.8% breit) nach ihrer Anzahl
// berechnen, CSS-Variable für die entsprechenden Divs neu setzen
document.querySelector(':root').style.setProperty('--cellSize', 98.8/cols+'%');
// Checkboxes des Rulesets richtig einfärben und anhaken
colorRuleset(decToBinArray(rule, 8))
// Divs für erste Zeile erzeugen
for (let i = 0; i < cols; i++) {
let div = document.createElement('div');
document.querySelector('.ca-row').appendChild(div)
}
// Alle Divs inactive setzen, mittleres Div active
for (let i = 0; i < cols; i++) {
let div = document.querySelector('.ca-row').childNodes[i]
div.classList.add('inactive') }
setState(document.querySelector('.ca-row').childNodes[Math.floor((cols-1)/2)], true)
// Alle weiteren Zeilen erzeugen und gleich berechnen
for (let i = 0; i < rows; i++) {
let allRows = document.querySelectorAll('.ca-row')
let lastRow = allRows[allRows.length - 1]
let clone = lastRow.cloneNode(true)
document.querySelector('#ca-field').appendChild(clone)
processRow(clone, lastRow)
}
// Divs der ersten Zeile mit Klickfunktion ausstatten
let firstRow = document.querySelectorAll('.ca-row')[0]
for (let i = 0; i < cols; i++) {
let div = firstRow.childNodes[i]
div.setAttribute('onclick','startFromCellDiv(this);');
}
// FUNKTIONEN
// Wenn ein Div in erster Zeile angeklickt wird
function startFromCellDiv(cellDiv) {
if (cellDiv.classList.contains('active')) {
cellDiv.classList.remove('active')
cellDiv.classList.add('inactive')
} else {
cellDiv.classList.remove('inactive')
cellDiv.classList.add('active') }
processField()
}
// Wenn das Inputfeld sich ändert
function startFromInput(inputValue) {
if ( (inputValue<0) || (inputValue>255) ) { // Regel zu hoch/niedrig
colorRuleset([1,1,1,1,1,1,1,1]) // Alle Checkboxes einfärben
return
}
rule = inputValue
colorRuleset(decToBinArray(rule, 8))
processField()
}
// Wenn eine Checkbox angeklickt wird
function startFromCheckbox() {
rule = 0
if (document.querySelector('#c-111').checked) { rule += 128 }
if (document.querySelector('#c-110').checked) { rule += 64 }
if (document.querySelector('#c-101').checked) { rule += 32 }
if (document.querySelector('#c-100').checked) { rule += 16 }
if (document.querySelector('#c-011').checked) { rule += 8 }
if (document.querySelector('#c-010').checked) { rule += 4 }
if (document.querySelector('#c-001').checked) { rule += 2 }
if (document.querySelector('#c-000').checked) { rule += 1 }
document.querySelector('#rulenumber').value = rule;
processField()
}
function processField() {
let allRows = document.querySelectorAll('.ca-row')
for (let i = 0; i < rows; i++) {
processRow(allRows[i+1], allRows[i])
}
}
function processRow(selfRow, prevRow) {
ruleValue = decToBinArray(rule, 8)
let rules = new Array(8)
for (let j = 0; j < 8; j++) {
rules[j] = decToBinArray(7-j, 3)
}
for (let i = 0; i < cols; i++) {
let target = selfRow.childNodes[i]
let prevSelf = prevRow.childNodes[i]
let prevLeft = prevSelf.previousElementSibling || prevRow.childNodes[cols - 1]
let prevRight = prevSelf.nextElementSibling || prevRow.childNodes[0]
let toggleClass = setStateByRule.bind(null, target, prevLeft, prevSelf, prevRight)
for (let j = 0; j < 8; j++) {
toggleClass(rules[j], ruleValue[j])
}
}
}
function setState(cellDiv, isActive) {
// Ändert Status eines Divs. Aufruf mit true: Div wird active; bei false: Div wird inactive
if (!!isActive) {
cellDiv.classList.remove('inactive')
cellDiv.classList.add('active')
} else {
cellDiv.classList.remove('active')
cellDiv.classList.add('inactive')
}
}
function setStateByRule(target, prevLeft, prevSelf, prevRight, rules, ruleValue) {
let matchesRule = getState(prevLeft) === rules[0] && getState(prevSelf) === rules[1] && getState(prevRight) === rules[2]
if (matchesRule) { setState(target, ruleValue) }
}
function getState(cellDiv) {
return cellDiv.classList.contains('active') ? 1 : 0
}
function decToBinArray(dec, len) {
let binArray = new Array(len)
for (let k = len - 1; k >= 0; k--) {
let m = dec%2
binArray[k] = m
dec = (dec - m) / 2
}
return binArray
}
function colorRuleset(binArray) {
let truthArray = new Array(8)
for (let i = 0; i < 8; i++) {
truthArray[i] = ( binArray[i]==1 ) ? true : false
}
document.querySelector('#c-111').checked = truthArray[0];
document.querySelector('#c-110').checked = truthArray[1];
document.querySelector('#c-101').checked = truthArray[2];
document.querySelector('#c-100').checked = truthArray[3];
document.querySelector('#c-011').checked = truthArray[4];
document.querySelector('#c-010').checked = truthArray[5];
document.querySelector('#c-001').checked = truthArray[6];
document.querySelector('#c-000').checked = truthArray[7];
}
</script>
<noscript>
<figure><img width="748" height="521" alt="Statisches Feld, wie es mit der Regel 73 gefüllt wird" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuwAAAIJAgMAAACDx4BeAAAACVBMVEXT09MAAAD///+87toJAAAEJ0lEQVR42u3dTW7qMBQG0G6im+g+mGQGgiUx6S7oqGKVrwxehHVtx7SE/J1KlSKB0iOnk4/P17y9Lfjn43q9fv38Xm8X37eLz/uLa/L6Y288n06nY/LGr/wbP8MdW/7iNzs7Ozs7Ozs7Ozv7guxL/nn/WZz9z+/pdnG8XezuL07J681vPCSrdP7/xn3+jrtwx5a/eGRnZ2dnZ2dnZ2dnX5Bd33T/er/ufV7tL2aftdnZ2dnZ2dnZ2dnZx7Lrm+5jamU5LzPO2uzs7Ozs7Ozs7Ozs7Lqy8hv7dS8sZ7/uM/ycgJ2dnZ2dnZ2dnZ19dPvWu7Iu31GmezuT5bzMJmuzs7Ozs7Ozs7Ozs7/GvuW+qV/32PPFs0T6vJoG16myNjs7Ozs7Ozs7Ozv76+wb7Zu6gZm4Sl5Ng+sEWZudnZ2dnZ2dnZ2dnV1XVs7a/bpXZuIKWbtfzn7du9d+TsDOzs7Ozs7Ozs7OPoF9W13ZUEdZyau1jvIlWZudnZ2dnZ2dnZ2dfSr7Zvqmfrm+Kz1fJa8Wer4u3HGErM3Ozs7Ozs7Ozs7OPql9E31TZSYuBtum73kuzMSNkLXZ2dnZ2dnZ2dnZ2Se3r71vSuu5dK6scgZjn1cLZzDGubL+joenZW12dnZ2dnZ2dnZ2dva/2tfclTV3lHEm7vOa/Z7n5o7yz58TsLOzs7Ozs7Ozs7PPx77Sruycn2ArzMR9hOVKVymfVwsd5SE8yQezNjs7Ozs7Ozs7Ozv7zOwr7JsqM3GFs+sfOkukcHZ9YSbuwazNzs7Ozs7Ozs7Ozj5D+7r6pmRbY+ak+bTni3m15SyRdH9kF+6YDte9hxuVsjY7Ozs7Ozs7Ozs7O/vz7evpyh7vKJOs3XQOSnxAzR3lufY5ATs7Ozs7Ozs7Ozv7nO2r6Mrew8kfQx1lUi1mOsp4lkg8lGTf3FHGBMzOzs7Ozs7Ozs7OviD70vumQ2UmrtDzVWbiCjF0aCau0vPlaUd2dnZ2dnZ2dnZ29gXZV5Gb4kxcrefLz8Tt8zF0V+75LuFGmZ4vTzuys7Ozs7Ozs7Ozs7O/xL6ezNfSURaydpKMh87dr2Xtlo4y9z/Dzs7Ozs7Ozs7Ozj5n+2b2GNbyarJKQ+fuD+XVEfpVdnZ2dnZ2dnZ2dvZJ7ZvZY1jIq7twYmLt3P34JOPezhE6SnZ2dnZ2dnZ2dnb2Se2b2aeXyauVnu8cTnW85J9kVx6ee15Hyc7Ozs7Ozs7Ozs7O/kv7JvYYJhE5c+5+skqFrP2Vf5JJaD+O0K+ys7Ozs7Ozs7Ozs09uX/sew8xMXNi7eWrOq/FJdvmZuKf0q+zs7Ozs7Ozs7Ozs87CvfY9h8xmMTXs7W2biDk/rKNnZ2dnZ2dnZ2dnZ52Ff8z69Ql4No2yZ+i7m1abvK4t59bcdJTs7Ozs7+4vt/wAEpG4g1KC6fQAAAABJRU5ErkJggg==" />
<figcaption>Diese Abbildung zeigt nur ein statisches Feld mit dem Muster. Für die interaktive Version unseres Automaten muss dein Brwoser JavaScript unterstützen.</figcaption>
</figure>
</noscript>
<p>Oha, es entsteht ein überraschend kompliziertes Muster! Und das Beste: <strong>Der Automat hier ist interaktiv</strong><noscript> (nur mit aktiviertem Javascript)</noscript>. Die grünen Elemente oben lassen sich ändern. Klicke zum Beispiel die grafische Darstellung der Regel an (die acht T-förmigen Kästchen). Du kannst die Nummer einer Regel auch in das Textfeld eingeben (muss zwischen 0 und 255 liegen). Mir gefallen recht gut die Regeln 30, 161 oder 225.</p>
<p>Außer der Regel selbst kannst du noch die Startbedingungen verändern. Klicke weitere Pixel in der ersten Zeile an und färbe sie um. Um verschiedene Ausgangszeilen zu testen, finde ich die Regel 109 recht interessant.</p>
<h2 id="wer-hats-erfunden-die-natur">Wer hat’s erfunden? Die Natur!</h2>
<p>Noch bevor im Jahr 1940 Stanislaw Ulam und John von Neumann das Konzept zellulärer Automaten vorgestellt und weiterentwickelt haben, hat die Natur die Musterbildung nach Regeln schon längst praktiziert. Zum Beispiel entstehen Zebrastreifen nach einem vergleichbaren Prinzip. Besonders eindrucksvoll finde ich es beim <a href="https://commons.wikimedia.org/wiki/Category:Conus_textile?uselang=de#/media/File:Cylinder_textile_textile_01.jpg">Weberkegel</a>. Das Muster auf dem Gehäuse dieser Muschel sieht der Regel 30 verblüffend ähnlich.</p>
<p>Übrigens bietet die mathematischen Suchmaschine Wolfram Alpha für Elementare Zelluläre Automaten (so wie unserer) eine <a href="https://mathworld.wolfram.com/ElementaryCellularAutomaton.html">Übersicht aller 255 Regeln</a>.</p>
<p>Darüber hinaus gibt es noch andere Typen zellulärer Automaten. Bei eindimensionalen Automaten <em>zweiter</em> Ordnung wird zusätzlich noch die Zeile über der direkt darüberliegenden bei der Musterbildung berücksichtigt. Und Automaten mit 2,5 Dimensionen betrachten nicht die Zeile darüber, sondern die Nachbarzellen ringsherum. Das bekannteste Beispiel dafür ist <a href="https://copy.sh/life/">Conway’s Game of Life</a>, wo sich Pixelgruppen wie lebendige Wesen über die Fläche bewegen. Bei anderen Varianten spielen auch verschiedene Farben eine Rolle – es gibt viel zu entdecken!</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?sujet">#sujet</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/automat">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="anfangen.html">← Einfach mal anfangen!</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="origamihase.html">Elf Faltschritte zum Osterhasen →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>