-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpatterns.html
More file actions
1199 lines (1148 loc) · 71.3 KB
/
Copy pathpatterns.html
File metadata and controls
1199 lines (1148 loc) · 71.3 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
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
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0A0B0F">
<meta name="description" content="A field guide to the eleven emergent behavioral archetypes observed in Emergence — from membranes and chasers to vortices, filaments, and gliders.">
<title>Pattern Field Guide — Emergence</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
:root {
--void: #0A0B0F;
--panel: rgba(13,14,20,0.92);
--ink: #ECE7DD;
--ink-lo: #C0C2C8;
--ink-dim: #969CA8;
--brass: #C9A227;
--brass-bright: #E5BE45;
--brass-soft: rgba(201,162,39,0.10);
--steel: #608AB0;
--edge: rgba(236,231,221,0.14);
--nav-h: 58px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--void);
color: var(--ink);
font-family: "IBM Plex Sans", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* grain */
.grain {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: .022; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* reading progress */
#progress {
position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 101;
height: 2px; background: var(--brass);
transform: scaleX(0); transform-origin: left;
transition: transform .08s linear;
}
/* nav */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--nav-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 clamp(20px, 5vw, 48px);
background: rgba(10,11,15,0.88);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border-bottom: 1px solid var(--edge);
}
.nav-back {
display: flex; align-items: center; gap: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-lo); text-decoration: none;
transition: color .2s ease;
}
.nav-back:hover { color: var(--brass); }
.nav-back svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-center {
font-family: "IBM Plex Mono", monospace;
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-dim);
}
.nav-cta {
font-family: "IBM Plex Sans", sans-serif;
font-size: 12px; font-weight: 600;
color: #15110a; background: var(--brass);
border: none; border-radius: 8px; padding: 7px 16px;
text-decoration: none;
transition: background .18s ease;
white-space: nowrap;
}
.nav-cta:hover { background: var(--brass-bright); }
@media (max-width: 540px) { .nav-center { display: none; } }
/* hero */
.hero {
padding: calc(var(--nav-h) + 56px) clamp(24px,5vw,64px) 72px;
max-width: 1020px; margin: 0 auto;
position: relative; z-index: 1;
}
.hero-kicker {
font-family: "IBM Plex Mono", monospace;
font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
color: var(--brass); margin-bottom: 24px;
}
.hero h1 {
font-family: "Instrument Serif", Georgia, serif;
font-weight: 400; font-size: clamp(38px, 6vw, 76px);
line-height: 1.04; letter-spacing: -.01em; color: var(--ink);
margin-bottom: 22px;
}
.hero h1 em { font-style: italic; color: var(--brass-bright); }
.hero-sub {
font-size: clamp(15px, 1.9vw, 18px); line-height: 1.72;
color: var(--ink-lo); max-width: 60ch;
margin-bottom: 40px;
}
.hero-meta {
font-family: "IBM Plex Mono", monospace;
font-size: 11px; color: var(--ink-dim); letter-spacing: .08em;
}
/* divider */
.rule { border: none; height: 1px; background: var(--edge); margin: 0; }
/* pattern count summary */
.pattern-summary {
position: relative; z-index: 1;
max-width: 1020px; margin: 0 auto;
padding: 48px clamp(24px,5vw,64px);
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 2px;
}
.summary-chip {
padding: 16px 12px; text-align: center;
background: rgba(10,11,15,0.56); border: 1px solid var(--edge);
border-radius: 4px; cursor: pointer;
text-decoration: none;
transition: border-color .2s, background .2s;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.summary-chip:hover { border-color: var(--brass); background: var(--brass-soft); }
.summary-chip .chip-icon { font-size: 22px; line-height: 1; }
.summary-chip .chip-name {
font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-dim); line-height: 1.3;
}
.summary-chip .chip-rarity {
font-family: "IBM Plex Mono", monospace;
font-size: 9px; color: var(--brass); letter-spacing: .06em;
}
/* section layout */
.section-wrap {
position: relative; z-index: 1;
max-width: 1020px; margin: 0 auto;
padding: 0 clamp(24px,5vw,64px);
}
.section-header {
padding: 72px 0 36px;
border-top: 1px solid var(--edge);
}
.section-header-label {
font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
color: var(--brass); margin-bottom: 14px;
}
.section-header h2 {
font-family: "Instrument Serif", Georgia, serif;
font-weight: 400; font-size: clamp(26px, 4vw, 46px);
line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
margin-bottom: 14px;
}
.section-header h2 em { color: var(--brass-bright); font-style: italic; }
.section-header p {
font-size: 14.5px; line-height: 1.72; color: var(--ink-lo);
max-width: 62ch;
}
/* pattern card */
.pattern-card {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; align-items: start;
padding: 36px 0; border-top: 1px solid var(--edge);
}
.pattern-card:first-of-type { border-top: none; }
@media (max-width: 680px) {
.pattern-card { grid-template-columns: 1fr; gap: 24px; }
}
.pattern-card.flip { direction: rtl; }
.pattern-card.flip > * { direction: ltr; }
.pattern-left { }
.pattern-icon-row {
display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.pattern-icon { font-size: 28px; line-height: 1; }
.pattern-id {
font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: var(--ink-dim);
}
.pattern-rarity {
font-family: "IBM Plex Mono", monospace;
font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
padding: 3px 8px; border-radius: 3px; margin-left: auto;
}
.rarity-common { background: rgba(91,231,169,0.12); color: #5BE7A9; }
.rarity-uncommon { background: rgba(77,166,255,0.12); color: #4DA6FF; }
.rarity-rare { background: rgba(201,162,39,0.15); color: var(--brass-bright); }
.rarity-very-rare { background: rgba(199,146,234,0.15); color: #C792EA; }
.pattern-card h3 {
font-family: "Instrument Serif", Georgia, serif;
font-weight: 400; font-size: clamp(24px, 3.5vw, 38px);
line-height: 1.1; color: var(--ink); margin-bottom: 16px;
letter-spacing: -.01em;
}
.pattern-card h3 em { font-style: italic; color: var(--brass-bright); }
.pattern-card p {
font-size: 14.5px; line-height: 1.76; color: var(--ink-lo);
margin-bottom: 16px;
}
.pattern-card p:last-child { margin-bottom: 0; }
.pattern-card strong { color: var(--ink); font-weight: 500; }
/* detection signature box */
.detector-box {
margin-top: 18px; padding: 14px 16px;
border: 1px solid var(--edge); border-radius: 8px;
background: rgba(10,11,15,0.56);
}
.detector-box-label {
font-family: "IBM Plex Mono", monospace;
font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
color: var(--brass); margin-bottom: 10px;
}
.detector-conditions {
list-style: none; display: flex; flex-direction: column; gap: 6px;
}
.detector-conditions li {
font-family: "IBM Plex Mono", monospace;
font-size: 11px; line-height: 1.5; color: var(--ink-dim);
padding-left: 12px; position: relative;
}
.detector-conditions li::before {
content: "·"; position: absolute; left: 0; color: var(--brass);
}
.detector-conditions .val { color: var(--ink-lo); }
/* right side: visual + matrix context */
.pattern-right { }
.pattern-visual {
display: block; width: 100%; aspect-ratio: 4/3;
border: 1px solid var(--edge); border-radius: 10px;
overflow: hidden;
background: radial-gradient(80% 80% at 50% 50%, rgba(236,231,221,0.028), transparent 70%),
rgba(10,11,15,0.44);
margin-bottom: 16px;
}
.pattern-visual .guide { fill: none; stroke: rgba(236,231,221,0.16); stroke-width: 1; }
.pattern-visual .motion { fill: none; stroke: rgba(229,190,69,0.7); stroke-width: 1.8; stroke-linecap: round; }
.pattern-visual .s-motion { fill: none; stroke: rgba(236,231,221,0.22); stroke-width: 1.2; stroke-dasharray: 4 5; stroke-linecap: round; }
.pattern-visual .p { fill: currentColor; stroke: rgba(255,255,255,0.28); stroke-width: 0.5; filter: drop-shadow(0 0 5px currentColor); }
.pattern-visual .red { color: #FF5D73; }
.pattern-visual .gold { color: #FFC857; }
.pattern-visual .cyan { color: #5BE7A9; }
.pattern-visual .blue { color: #4DA6FF; }
.pattern-visual .purple { color: #C792EA; }
.pattern-visual .green { color: #88D498; }
.matrix-hint {
padding: 14px 16px;
border-left: 2px solid var(--brass);
border-radius: 0 8px 8px 0;
background: rgba(10,11,15,0.44);
font-size: 13px; line-height: 1.66; color: var(--ink-dim);
}
.matrix-hint strong { color: var(--ink-lo); font-weight: 500; }
/* new badge */
.new-badge {
display: inline-block;
font-family: "IBM Plex Mono", monospace;
font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
padding: 2px 7px; border-radius: 3px; margin-left: 10px;
background: rgba(201,162,39,0.20); color: var(--brass-bright);
vertical-align: middle;
}
/* contact section */
.contact-section {
position: relative; z-index: 1;
max-width: 1020px; margin: 0 auto;
padding: 80px clamp(24px,5vw,64px) 100px;
border-top: 1px solid var(--edge);
text-align: center;
}
.contact-section .contact-label {
font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
color: var(--brass); margin-bottom: 20px;
}
.contact-section h2 {
font-family: "Instrument Serif", Georgia, serif;
font-weight: 400; font-size: clamp(28px, 4.5vw, 56px);
line-height: 1.08; color: var(--ink); margin-bottom: 20px;
letter-spacing: -.01em;
}
.contact-section h2 em { color: var(--brass-bright); font-style: italic; }
.contact-section p {
font-size: clamp(14.5px, 1.9vw, 17px); line-height: 1.74;
color: var(--ink-lo); max-width: 52ch; margin: 0 auto 36px;
}
.contact-links {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.contact-link {
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-lo); text-decoration: none;
border: 1px solid var(--edge); border-radius: 7px; padding: 10px 18px;
transition: color .2s, border-color .2s, background .2s;
}
.contact-link:hover { color: var(--brass); border-color: var(--brass); background: var(--brass-soft); }
.contact-link.primary {
background: var(--brass); color: #15110a; border-color: var(--brass);
font-weight: 600;
}
.contact-link.primary:hover { background: var(--brass-bright); border-color: var(--brass-bright); }
/* footer */
footer {
border-top: 1px solid var(--edge);
padding: 28px clamp(24px, 5vw, 48px);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
background: var(--panel);
position: relative; z-index: 1;
}
footer .wordmark { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-dim); text-decoration: none;
border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.footer-links a:hover { color: var(--brass); border-color: var(--brass); }
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
</style>
</head>
<body>
<div class="grain" aria-hidden="true"></div>
<div id="progress" aria-hidden="true"></div>
<nav>
<a class="nav-back" href="landing.html">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
<line x1="12" y1="7" x2="2" y2="7"/><polyline points="6,3 2,7 6,11"/>
</svg>
Emergence
</a>
<span class="nav-center">Pattern Field Guide</span>
<a class="nav-cta" href="emergence.html">Open console →</a>
</nav>
<main>
<!-- hero -->
<div class="hero">
<div class="hero-kicker">Emergence · Behavioral Taxonomy</div>
<h1>Pattern <em>Field Guide</em></h1>
<p class="hero-sub">
Sixteen behavioral archetypes observed in particle life. Each arises from specific matrix conditions — none are scripted. This guide describes what to look for, what produces it, and how the real-time detector identifies it.
</p>
<p class="hero-meta">16 patterns · 4 classic · 12 newly identified</p>
</div>
<!-- quick-nav grid -->
<div class="pattern-summary">
<div class="summary-grid">
<a class="summary-chip" href="#membrane">
<span class="chip-icon">🔬</span>
<span class="chip-name">Membrane</span>
<span class="chip-rarity">common</span>
</a>
<a class="summary-chip" href="#ring">
<span class="chip-icon">⭕</span>
<span class="chip-name">Ring</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#proto-cell">
<span class="chip-icon">🧫</span>
<span class="chip-name">Proto-Cell</span>
<span class="chip-rarity">rare</span>
</a>
<a class="summary-chip" href="#breathing">
<span class="chip-icon">🌬️</span>
<span class="chip-name">Breathing</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#chase">
<span class="chip-icon">🎯</span>
<span class="chip-name">Chase</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#orbit">
<span class="chip-icon">🪐</span>
<span class="chip-name">Orbit</span>
<span class="chip-rarity">rare</span>
</a>
<a class="summary-chip" href="#vortex">
<span class="chip-icon">🌀</span>
<span class="chip-name">Vortex</span>
<span class="chip-rarity">rare</span>
</a>
<a class="summary-chip" href="#filament">
<span class="chip-icon">🧵</span>
<span class="chip-name">Filament</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#glider">
<span class="chip-icon">🛸</span>
<span class="chip-name">Glider</span>
<span class="chip-rarity">very rare</span>
</a>
<a class="summary-chip" href="#phase-sep">
<span class="chip-icon">🎨</span>
<span class="chip-name">Phase Sep.</span>
<span class="chip-rarity">common</span>
</a>
<a class="summary-chip" href="#galaxy">
<span class="chip-icon">🌌</span>
<span class="chip-name">Galaxy</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#arc">
<span class="chip-icon">🌙</span>
<span class="chip-name">Arc</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#swarm">
<span class="chip-icon">🐝</span>
<span class="chip-name">Swarm</span>
<span class="chip-rarity">uncommon</span>
</a>
<a class="summary-chip" href="#mobile-cell">
<span class="chip-icon">🚀</span>
<span class="chip-name">Mobile Cell</span>
<span class="chip-rarity">rare</span>
</a>
<a class="summary-chip" href="#mosaic-ring">
<span class="chip-icon">🎡</span>
<span class="chip-name">Mosaic Ring</span>
<span class="chip-rarity">very rare</span>
</a>
<a class="summary-chip" href="#helix">
<span class="chip-icon">〰️</span>
<span class="chip-name">Helix</span>
<span class="chip-rarity">rare</span>
</a>
</div>
</div>
<hr class="rule">
<!-- ======================= CLASSIC PATTERNS ======================= -->
<div class="section-wrap">
<div class="section-header reveal">
<div class="section-header-label">Classic patterns</div>
<h2>The four <em>foundational</em> archetypes</h2>
<p>These were the first behavioral classes identified in particle life systems. They appear consistently across different implementations and have been informally described in the literature since Ventrella's Clusters (1994).</p>
</div>
<!-- MEMBRANE -->
<div class="pattern-card reveal" id="membrane">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🔬</span>
<span class="pattern-id">01</span>
<span class="pattern-rarity rarity-common">Common</span>
</div>
<h3>Membrane</h3>
<p>A dense, near-stationary cluster of one species that holds its shape and resists dispersion. The simplest stable structure — particles find a potential minimum and stay there, vibrating slightly but never escaping. Looks like a living cell under a microscope when a second species forms around it.</p>
<p>The membrane is the most frequent and most foundational pattern. It appears in a wide range of matrices — anywhere a species strongly self-attracts or is attracted to a stationary target species. Most complex patterns (rings, proto-cells, vortices) require a membrane-like core to nucleate around.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Speed <span class="val">< 0.035</span> — cluster is nearly stationary</li>
<li>Cohesion <span class="val">< rMax × 1.5</span> — particles are tightly packed</li>
<li>Hollowness <span class="val">< 0.30</span> — no empty interior</li>
<li>Aspect ratio <span class="val">< 2.5</span> — roughly compact/circular shape</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Dense gold cluster as a stable membrane">
<ellipse class="guide" cx="140" cy="105" rx="72" ry="60"/>
<circle class="p gold" cx="128" cy="96" r="7"/><circle class="p gold" cx="148" cy="88" r="8"/>
<circle class="p gold" cx="163" cy="100" r="7"/><circle class="p gold" cx="155" cy="118" r="7"/>
<circle class="p gold" cx="138" cy="126" r="6"/><circle class="p gold" cx="120" cy="116" r="7"/>
<circle class="p gold" cx="122" cy="108" r="5"/><circle class="p gold" cx="145" cy="108" r="6"/>
<circle class="p red" cx="86" cy="88" r="5"/><circle class="p red" cx="100" cy="66" r="5"/>
<circle class="p red" cx="128" cy="56" r="5"/><circle class="p red" cx="158" cy="58" r="5"/>
<circle class="p red" cx="184" cy="74" r="5"/><circle class="p red" cx="196" cy="98" r="5"/>
<circle class="p red" cx="190" cy="126" r="5"/><circle class="p red" cx="172" cy="146" r="5"/>
<circle class="p red" cx="142" cy="154" r="5"/><circle class="p red" cx="112" cy="148" r="5"/>
<circle class="p red" cx="90" cy="130" r="5"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Species A self-attracts strongly (diagonal value > 0.6). OR species A attracts B, B weakly repels A — creating a shell of A around a stationary B core.
</div>
</div>
</div>
<!-- CHASE -->
<div class="pattern-card flip reveal" id="chase">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🎯</span>
<span class="pattern-id">02</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
</div>
<h3>Chase Sequence</h3>
<p>A compact cluster moves across the field with directed velocity, closing on another cluster. On contact, the target cluster disperses or reforms elsewhere. The chaser reassembles and hunts again. From the outside it looks exactly like predation — but the chaser has no awareness of its prey and no memory of prior hunts.</p>
<p>What the detector identifies is kinematic: the chaser's center-of-mass velocity is aligned with the direction toward the prey cluster. There is no representation of intent anywhere in the code.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Two clusters identified from different species</li>
<li>Dot product of A's velocity and (B.pos − A.pos) <span class="val">> 0.72</span></li>
<li>This alignment must persist across multiple frames</li>
<li>A is moving toward B faster than random drift</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Red chaser cluster pursuing blue prey">
<path class="motion" d="M68 105 C100 80 148 75 194 90"/>
<path class="s-motion" d="M198 92 C218 86 240 78 264 68"/>
<circle class="p red" cx="44" cy="105" r="8"/><circle class="p red" cx="58" cy="95" r="7"/>
<circle class="p red" cx="60" cy="113" r="6"/><circle class="p red" cx="72" cy="104" r="7"/>
<circle class="p red" cx="50" cy="120" r="5"/>
<circle class="p blue" cx="200" cy="88" r="7"/><circle class="p blue" cx="218" cy="80" r="6"/>
<circle class="p blue" cx="222" cy="98" r="7"/><circle class="p blue" cx="234" cy="88" r="5"/>
<circle class="p blue" cx="208" cy="106" r="6"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> A strongly attracts B, B repels A. A self-attracts (keeping tight). This asymmetry is the engine: B's fleeing creates a persistent gradient that A follows.
</div>
</div>
</div>
<!-- OSCILLATION / BREATHING -->
<div class="pattern-card reveal" id="breathing">
<div class="pattern-icon-row">
<span class="pattern-icon">🌬️</span>
<span class="pattern-id">03</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
</div>
<h3>Breathing</h3>
<p>A cluster's radius oscillates — expanding and contracting rhythmically. The period is not set by any clock. It emerges from the force balance: mutual attraction pulls particles inward, inertia carries them past equilibrium, the core's repulsion pushes them back out. A standing wave in configuration space.</p>
<p>The detector measures the mean distance from centroid over a rolling window, flags a breathing event when the amplitude exceeds a threshold, and applies a cooldown to prevent repeated triggers on the same oscillation.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Centroid tracked over rolling buffer (not from origin — centroid)</li>
<li>Mean distance from centroid oscillates with <span class="val">amplitude > threshold</span></li>
<li>Cluster cohesion alternates between <span class="val">tight → loose → tight</span></li>
<li>Periodicity confirmed across at least two full cycles</li>
</ul>
</div>
<div class="matrix-hint" style="margin-top:16px;">
<strong>Matrix conditions:</strong> Near-symmetric mutual attraction between two species (A↔B ≈ equal and positive). High enough damping to prevent escape; low enough to allow the overshoot that creates oscillation.
</div>
</div>
<!-- GALAXY -->
<div class="pattern-card flip reveal" id="galaxy">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🌌</span>
<span class="pattern-id">04</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
</div>
<h3>Galaxy</h3>
<p>A rotating structure with a dense core and trailing spiral arms. The rotation isn't programmed — it's a consequence of angular momentum transferred during the asymmetric collapse of a forming cluster. As new particles fall in from off-axis trajectories, they contribute torque; the whole structure begins spinning and holds its spin through conservation.</p>
<p>Galaxies grow over time, absorbing nearby loose clusters into their arms. Given a large enough field, a single galaxy can eventually incorporate most of the particles of its species.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Large cluster (top percentile by size)</li>
<li>Net angular momentum <span class="val">> 0</span> (persistent spin direction)</li>
<li>Aspect ratio near circular — spiral arms are dynamic, not static elongation</li>
<li>Large reach parameter amplifies the gravity-like collapse</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Gold galaxy core with rotating cyan and blue arms">
<path class="s-motion" d="M138 105 C114 90 108 66 128 56 C162 42 196 64 188 88 C180 106 152 108 132 103 C100 94 88 116 106 134 C128 155 174 148 198 120"/>
<path class="motion" d="M136 104 C158 98 174 84 170 70"/>
<path class="motion" d="M140 106 C114 114 108 130 118 148"/>
<circle class="p gold" cx="134" cy="102" r="9"/><circle class="p gold" cx="150" cy="105" r="8"/><circle class="p gold" cx="143" cy="116" r="7"/><circle class="p gold" cx="128" cy="112" r="6"/>
<circle class="p cyan" cx="172" cy="72" r="5"/><circle class="p blue" cx="186" cy="86" r="5"/><circle class="p cyan" cx="192" cy="104" r="4"/><circle class="p blue" cx="116" cy="138" r="5"/><circle class="p cyan" cx="102" cy="126" r="4"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> One species has strong self-attraction. Large rMax (reach) creates long-range gravitational-like pull. Moderate cross-species attraction supplies angular momentum during formation.
</div>
</div>
</div>
</div><!-- /section-wrap classic -->
<hr class="rule">
<!-- ======================= NEW PATTERNS ======================= -->
<div class="section-wrap">
<div class="section-header reveal">
<div class="section-header-label">Newly identified patterns</div>
<h2>Twelve <em>new</em> archetypes</h2>
<p>These twelve behavioral classes were identified through systematic exploration during the development of Emergence. They have not, to my knowledge, been formally named or computationally detected in prior particle life implementations. Each has a detector with measurable geometric criteria running in real time.</p>
</div>
<!-- RING -->
<div class="pattern-card reveal" id="ring">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">⭕</span>
<span class="pattern-id">05</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
<span class="new-badge">New</span>
</div>
<h3>Ring <em>Structure</em></h3>
<p>A hollow annulus of particles: particles are arranged in a closed loop with an empty center. The ring is structurally stable — it holds its shape against perturbation and drifts as a unit. Unlike the membrane (which is a solid disc), a ring has a measurable void at its center.</p>
<p>Rings are what happens when the repulsive core is strong enough to push particles away from a central nucleus while the interaction band creates just enough cohesion to keep them looping around it. The geometry is not designed — it's the only stable orbit at that force balance.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Hollowness score <span class="val">> 0.48</span> — significant empty interior</li>
<li>Cluster size <span class="val">> 14 particles</span> — enough to form a closed loop</li>
<li>Aspect ratio <span class="val">< 2.2</span> — ring is circular, not an arc</li>
</ul>
</div>
<div class="detector-box" style="margin-top:10px;border-color:rgba(201,162,39,0.25);">
<div class="detector-box-label">Hollowness metric</div>
<ul class="detector-conditions">
<li>Grid centroid located from particle positions</li>
<li>Empty cells in inner 40% of bounding circle counted</li>
<li>Score = empty_inner / total_inner — higher = more hollow</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Purple particles forming a hollow ring structure">
<circle class="guide" cx="140" cy="105" r="62"/>
<circle class="guide" cx="140" cy="105" r="30" style="stroke-dasharray:4 6;opacity:0.5"/>
<circle class="p purple" cx="140" cy="44" r="6"/><circle class="p purple" cx="166" cy="51" r="6"/>
<circle class="p purple" cx="186" cy="68" r="6"/><circle class="p purple" cx="198" cy="92" r="6"/>
<circle class="p purple" cx="197" cy="120" r="6"/><circle class="p purple" cx="180" cy="144" r="6"/>
<circle class="p purple" cx="158" cy="160" r="6"/><circle class="p purple" cx="130" cy="165" r="6"/>
<circle class="p purple" cx="104" cy="158" r="6"/><circle class="p purple" cx="83" cy="142" r="6"/>
<circle class="p purple" cx="71" cy="118" r="6"/><circle class="p purple" cx="72" cy="90" r="6"/>
<circle class="p purple" cx="85" cy="65" r="6"/><circle class="p purple" cx="108" cy="49" r="6"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Strong self-repulsion prevents collapse; weak self-attraction maintains cohesion. OR: species A is attracted to species B at medium distance, while B is positioned at the ring center. A orbits B without reaching it.
</div>
</div>
</div>
<!-- PROTO-CELL -->
<div class="pattern-card flip reveal" id="proto-cell">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🧫</span>
<span class="pattern-id">06</span>
<span class="pattern-rarity rarity-rare">Rare</span>
<span class="new-badge">New</span>
</div>
<h3>Proto-<em>Cell</em></h3>
<p>A ring membrane of one species enclosing a different species in its interior. This two-layer structure — an inner core of species A, surrounded by a hollow ring of species B — is the closest analog to a biological cell yet observed in particle life.</p>
<p>Unlike a plain membrane (which may just be a shell of one species), the proto-cell requires that the interior contains a measurable cluster of a <em>different</em> species within the ring's radius. Both components must be stable simultaneously. This is genuinely difficult to achieve and represents a higher-order emergent structure.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>A ring structure is detected (hollowness > 0.48)</li>
<li>A separate cluster of a different species found near ring's centroid</li>
<li>Interior cluster's centroid is within <span class="val">ring.cohesion × 0.6</span> of ring center</li>
<li>Both structures stable simultaneously for ≥ 2 detection frames</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Cyan ring enclosing a gold interior cluster">
<circle class="guide" cx="140" cy="105" r="65"/>
<circle class="p gold" cx="132" cy="98" r="8"/><circle class="p gold" cx="150" cy="95" r="7"/>
<circle class="p gold" cx="156" cy="110" r="8"/><circle class="p gold" cx="143" cy="122" r="7"/>
<circle class="p gold" cx="126" cy="116" r="6"/><circle class="p gold" cx="140" cy="106" r="5"/>
<circle class="p cyan" cx="140" cy="41" r="6"/><circle class="p cyan" cx="167" cy="49" r="6"/>
<circle class="p cyan" cx="188" cy="68" r="6"/><circle class="p cyan" cx="200" cy="94" r="6"/>
<circle class="p cyan" cx="198" cy="122" r="6"/><circle class="p cyan" cx="181" cy="146" r="6"/>
<circle class="p cyan" cx="157" cy="162" r="6"/><circle class="p cyan" cx="128" cy="166" r="6"/>
<circle class="p cyan" cx="100" cy="159" r="6"/><circle class="p cyan" cx="80" cy="142" r="6"/>
<circle class="p cyan" cx="69" cy="117" r="6"/><circle class="p cyan" cx="71" cy="88" r="6"/>
<circle class="p cyan" cx="84" cy="64" r="6"/><circle class="p cyan" cx="108" cy="48" r="6"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> A (interior) and B (ring) must have asymmetric interaction: B strongly attracts A at medium range, A mildly repels B (keeping the ring from collapsing inward). B must also have enough self-cohesion to maintain its ring shape.
</div>
</div>
</div>
<!-- VORTEX -->
<div class="pattern-card reveal" id="vortex">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🌀</span>
<span class="pattern-id">07</span>
<span class="pattern-rarity rarity-rare">Rare</span>
<span class="new-badge">New</span>
</div>
<h3>Vortex</h3>
<p>A cluster with significant net angular momentum — particles are not just circling loosely but collectively rotating in a consistent direction, producing a visual spiral or swirl. The rotation direction (clockwise or counterclockwise) is arbitrary and determined by the initial particle positions; it persists for as long as the matrix supports the vortex.</p>
<p>Vortices sit at a fascinating point: they have net angular momentum but no mechanism enforcing conservation — nothing is preventing angular momentum from dissipating through damping. That they persist means the force geometry actively reinforces the rotation rather than merely tolerating it.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>|Angular momentum| <span class="val">> rMax × 0.025</span></li>
<li>Hollowness <span class="val">> 0.30</span> — some interior space (not a solid clump)</li>
<li>Cluster size <span class="val">> 12 particles</span></li>
<li>Angular momentum = Σ (r × v) per particle, summed and divided by N</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Purple and blue particles forming a clockwise vortex">
<path class="motion" d="M140 60 C172 62 196 80 196 105 C196 132 172 152 140 150 C108 150 84 132 84 105 C84 80 102 64 128 60"/>
<circle class="p purple" cx="140" cy="52" r="6"/><circle class="p purple" cx="164" cy="60" r="5"/>
<circle class="p blue" cx="184" cy="80" r="6"/><circle class="p blue" cx="196" cy="104" r="5"/>
<circle class="p purple" cx="192" cy="130" r="6"/><circle class="p purple" cx="172" cy="150" r="5"/>
<circle class="p blue" cx="144" cy="158" r="6"/><circle class="p blue" cx="116" cy="154" r="5"/>
<circle class="p purple" cx="92" cy="136" r="6"/><circle class="p purple" cx="82" cy="110" r="5"/>
<circle class="p blue" cx="88" cy="82" r="6"/><circle class="p blue" cx="108" cy="62" r="5"/>
<circle class="p purple" cx="140" cy="100" r="4" style="opacity:0.4"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Cyclic dominance or asymmetric multi-species interaction creates a persistent force asymmetry that drives rotation. The Spiral preset (A→B→C→A cyclic attraction) reliably produces vortices.
</div>
</div>
</div>
<!-- FILAMENT -->
<div class="pattern-card flip reveal" id="filament">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🧵</span>
<span class="pattern-id">08</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
<span class="new-badge">New</span>
</div>
<h3>Filament</h3>
<p>An elongated thread or chain of particles — particles strung in a line, like a polymer or a muscle fiber. Where membranes form compact discs and rings form circles, filaments form extended linear structures with high aspect ratio.</p>
<p>The emergence of filaments hints at the physics of polymer formation: particles find a stable one-dimensional configuration when the force curve penalizes broad clustering but rewards tight pairwise bonding. Chain-forming conditions are sensitive — most matrices that produce chains also produce membranes or vortices, and the transition between regimes is sharp.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Aspect ratio <span class="val">> 3.2</span> — significantly elongated</li>
<li>Cluster size <span class="val">> 10 particles</span></li>
<li>Aspect ratio = max principal component / min principal component (PCA of particle positions)</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Green particles forming an elongated filament chain">
<path class="s-motion" d="M36 108 C60 108 80 108 100 108"/>
<circle class="p green" cx="42" cy="106" r="5"/><circle class="p green" cx="58" cy="108" r="5"/>
<circle class="p green" cx="74" cy="105" r="5"/><circle class="p green" cx="90" cy="108" r="6"/>
<circle class="p green" cx="106" cy="106" r="5"/><circle class="p green" cx="122" cy="109" r="5"/>
<circle class="p green" cx="138" cy="106" r="6"/><circle class="p green" cx="154" cy="108" r="5"/>
<circle class="p green" cx="170" cy="105" r="5"/><circle class="p green" cx="186" cy="108" r="6"/>
<circle class="p green" cx="202" cy="106" r="5"/><circle class="p green" cx="218" cy="108" r="5"/>
<circle class="p green" cx="234" cy="105" r="5"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> A attracts A at precisely medium range (interaction band peak only), combined with a narrow repulsive core. This creates bead-string geometry: particles can't collapse together but can't spread apart either. Low rMax (reach) also encourages linear over planar packing.
</div>
</div>
</div>
<!-- GLIDER -->
<div class="pattern-card reveal" id="glider">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🛸</span>
<span class="pattern-id">09</span>
<span class="pattern-rarity rarity-very-rare">Very Rare</span>
<span class="new-badge">New</span>
</div>
<h3>Glider</h3>
<p>A small, compact, coherent structure that self-propels across the field. Unlike a chaser (which follows another cluster) or a swarm (which is a moving loose group), a glider moves without an external target — it maintains its shape and velocity as a self-sustaining kinematic object.</p>
<p>Gliders are the rarest pattern in the simulation — comparable to the glider in Conway's Game of Life in rarity and significance. They represent a genuinely surprising property: a configuration of interacting particles that acts as a stable moving object, propagating itself through space by its own force dynamics. Finding one manually can take hours of exploration.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Speed <span class="val">> 0.04</span> — moving consistently</li>
<li>Cohesion <span class="val">< rMax × 1.1</span> — very tight cluster</li>
<li>Hollowness <span class="val">< 0.30</span> — solid, not a ring</li>
<li>Aspect ratio <span class="val">< 2.5</span> — compact shape</li>
<li>Small size (few particles) — gliders are small by nature</li>
<li>No target cluster within range (not a chaser)</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Small compact red glider moving through space">
<path class="motion" d="M56 110 C100 105 148 100 196 100"/>
<path class="s-motion" d="M196 100 C224 100 248 100 272 100"/>
<circle class="p red" cx="48" cy="104" r="6"/><circle class="p red" cx="62" cy="96" r="6"/>
<circle class="p red" cx="66" cy="112" r="5"/><circle class="p red" cx="78" cy="104" r="6"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Extremely sensitive to parameters. Cross-species forces must create an asymmetric propulsive geometry: one species acts as a "fuel" that the glider consumes (reconfigures) as it passes through. Most common near cyclic or near-antisymmetric matrices. Use the Evolve button to search for them — random exploration is very unlikely to find a glider within a few presses of R.
</div>
</div>
</div>
<!-- ORBIT -->
<div class="pattern-card flip reveal" id="orbit">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🪐</span>
<span class="pattern-id">10</span>
<span class="pattern-rarity rarity-rare">Rare</span>
<span class="new-badge">New</span>
</div>
<h3>Binary Orbit</h3>
<p>Two clusters in mutual orbit — circling each other like a binary star system. The relative velocity of the two clusters is predominantly perpendicular to their separation vector, meaning they are continuously "missing" each other as they rotate around a shared center of mass.</p>
<p>Binary orbits are rare because they require a specific balance: strong enough mutual attraction to maintain the bond but weak enough to not cause the clusters to merge. They also require low enough damping that kinetic energy isn't bled off before the orbit stabilizes.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Two clusters identified</li>
<li>Cross-product |v<sub>rel</sub> × r̂| <span class="val">> 0.015</span> (significant perpendicular motion)</li>
<li>Cross-product <span class="val">> along-product × 1.4</span> (orbit, not approach)</li>
<li>Angular rate = cross / (dist + ε) — orbit frequency computed</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Two clusters in mutual orbit around a shared center">
<ellipse class="guide" cx="140" cy="105" rx="76" ry="58"/>
<path class="motion" d="M140 48 C178 54 214 78 214 105 C214 133 178 156 140 162"/>
<path class="motion" d="M140 162 C102 156 66 133 66 105 C66 78 102 54 140 48"/>
<circle class="p gold" cx="214" cy="105" r="8"/><circle class="p gold" cx="226" cy="96" r="7"/><circle class="p gold" cx="222" cy="114" r="6"/>
<circle class="p blue" cx="66" cy="105" r="8"/><circle class="p blue" cx="52" cy="96" r="7"/><circle class="p blue" cx="56" cy="114" r="6"/>
<circle class="guide" cx="140" cy="105" r="4" style="fill:rgba(236,231,221,0.1)"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> A and B mutually attract at medium-to-strong strength (M[A][B] and M[B][A] both positive and similar). Low damping. Medium rMax. Initial positions must give some angular momentum; identical symmetric attraction would just cause them to merge.
</div>
</div>
</div>
<!-- PHASE SEPARATION -->
<div class="pattern-card reveal" id="phase-sep">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🎨</span>
<span class="pattern-id">11</span>
<span class="pattern-rarity rarity-common">Common</span>
<span class="new-badge">New</span>
</div>
<h3>Phase <em>Separation</em></h3>
<p>Species spontaneously segregate into macroscale territories — each color claiming its own region of the field with sharp boundaries between them. Starting from uniform mixing, the simulation self-organizes into a spatial map. The boundaries are dynamic (they move and shift as clusters grow or shrink) but the separation itself is self-sustaining.</p>
<p>This is the particle life analogue of oil-and-water phase separation in thermodynamics — a collective phenomenon that requires no individual particle to "know" about the global structure. Each particle just follows local forces, and the global pattern is an inevitable consequence.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Field divided into a grid; species distribution per cell measured</li>
<li>Entropy of species distribution per cell is <span class="val">low</span> (each cell dominated by one species)</li>
<li>Global entropy averaged across grid; separation fires when well below expected for uniform mixing</li>
<li>Requires <span class="val">numTypes ≥ 3</span> — not meaningful with 1–2 species</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Three species occupying distinct territories with irregular boundaries">
<path d="M0 0 C60 10 90 60 80 105 C70 150 30 180 0 210 Z" fill="rgba(255,93,115,0.12)"/>
<path d="M80 105 C90 60 170 40 210 0 L280 0 L280 90 C240 90 190 80 160 100 C130 120 110 150 80 105 Z" fill="rgba(93,231,169,0.10)"/>
<path d="M80 105 C110 150 130 180 160 210 L280 210 L280 90 C240 90 190 80 160 100 C130 120 110 80 80 105 Z" fill="rgba(77,166,255,0.09)"/>
<circle class="p red" cx="28" cy="70" r="5"/><circle class="p red" cx="42" cy="90" r="5"/><circle class="p red" cx="22" cy="110" r="5"/><circle class="p red" cx="50" cy="128" r="5"/><circle class="p red" cx="34" cy="148" r="4"/>
<circle class="p cyan" cx="160" cy="46" r="5"/><circle class="p cyan" cx="196" cy="38" r="5"/><circle class="p cyan" cx="228" cy="50" r="5"/><circle class="p cyan" cx="248" cy="36" r="4"/><circle class="p cyan" cx="210" cy="64" r="5"/>
<circle class="p blue" cx="180" cy="150" r="5"/><circle class="p blue" cx="214" cy="162" r="5"/><circle class="p blue" cx="196" cy="178" r="5"/><circle class="p blue" cx="240" cy="152" r="4"/><circle class="p blue" cx="162" cy="168" r="5"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Each species self-attracts more strongly than it cross-attracts (diagonal values dominate). Mutual repulsion between species accelerates separation but isn't required — even neutral cross-interactions produce separation given strong enough self-attraction.
</div>
</div>
</div>
<!-- ARC / CRESCENT -->
<div class="pattern-card flip reveal" id="arc">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🌙</span>
<span class="pattern-id">12</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
<span class="new-badge">New</span>
</div>
<h3>Arc <em>Crescent</em></h3>
<p>A curved open structure — a partial ring that does not close. Where a ring is a closed loop with a hollow center, an arc is a crescent or parenthesis shape: curved, but open at both ends. The arc occupies an intermediate zone between a compact membrane and a full ring, caught at the moment where curvature exceeds width but closure has not yet occurred.</p>
<p>Arcs are remarkably common in energetic or high-reach fields where ring formation is interrupted by collisions or shear. A ring that loses particles from one side becomes an arc; a membrane elongating under anisotropic forces curves into one. The open ends do not collapse — they are held apart by the same internal stresses that produced the curvature.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Aspect ratio <span class="val">1.8 – 3.2</span> — more elongated than a disc, less than a filament</li>
<li>Hollowness <span class="val">0.22 – 0.48</span> — concave interior, but not a closed ring</li>
<li>Cluster size <span class="val">> 10 particles</span></li>
<li>Catches the crescent zone between membrane (compact) and ring (fully hollow)</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Red particles forming a crescent arc structure">
<path class="guide" d="M76 148 C60 110 70 68 100 46 C130 24 175 28 204 58 C224 80 226 114 208 140" style="stroke-dasharray:4 7;opacity:0.4"/>
<circle class="p red" cx="80" cy="144" r="5"/><circle class="p red" cx="72" cy="124" r="6"/>
<circle class="p red" cx="68" cy="102" r="6"/><circle class="p red" cx="72" cy="80" r="6"/>
<circle class="p red" cx="84" cy="60" r="6"/><circle class="p red" cx="102" cy="46" r="6"/>
<circle class="p red" cx="124" cy="36" r="6"/><circle class="p red" cx="150" cy="32" r="6"/>
<circle class="p red" cx="174" cy="38" r="6"/><circle class="p red" cx="194" cy="52" r="6"/>
<circle class="p red" cx="208" cy="70" r="6"/><circle class="p red" cx="214" cy="94" r="6"/>
<circle class="p red" cx="212" cy="118" r="5"/><circle class="p red" cx="202" cy="138" r="5"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> Intermediate between ring and membrane — a species self-attracting with moderate force and a repulsive core strong enough to prevent collapse but not quite sufficient to sustain a closed ring. A partially asymmetric matrix or cross-species shear tends to curve membranes into arcs.
</div>
</div>
</div>
<!-- SWARM -->
<div class="pattern-card reveal" id="swarm">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🐝</span>
<span class="pattern-id">13</span>
<span class="pattern-rarity rarity-uncommon">Uncommon</span>
<span class="new-badge">New</span>
</div>
<h3>Swarm</h3>
<p>A compact, coherent group of particles that moves as a unit at high velocity. Unlike a membrane (nearly stationary) or a glider (very small and self-propelling), a swarm is large — a significant fraction of all particles of its species — and moves because the local force geometry gives the entire group a net drift direction that each individual particle sustains.</p>
<p>The swarm's coherence is purely emergent: no particle knows about the group. Each responds only to its immediate neighbors. But because velocity fields of tightly packed particles in the interaction zone are correlated, the group acquires a shared drift. The visual effect is reminiscent of murmuration — coordinated mass motion from purely local rules.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>Speed <span class="val">> 0.08</span> — fast group motion</li>
<li>Cohesion <span class="val">< rMax × 1.3</span> — particles remain close</li>
<li>Hollowness <span class="val">< 0.35</span> — solid group, not a ring</li>
<li>Size <span class="val">> max(8, N × 0.04)</span> — large enough to be a true group</li>
</ul>
</div>
</div>
<div class="pattern-right">
<svg class="pattern-visual" viewBox="0 0 280 210" role="img" aria-label="Dense blue particle swarm moving with directional velocity">
<path class="motion" d="M114 108 C140 104 166 100 200 100"/>
<path class="s-motion" d="M200 100 C224 100 248 100 272 102"/>
<circle class="p blue" cx="56" cy="88" r="6"/><circle class="p blue" cx="70" cy="76" r="6"/>
<circle class="p blue" cx="86" cy="70" r="5"/><circle class="p blue" cx="74" cy="96" r="7"/>
<circle class="p blue" cx="90" cy="86" r="6"/><circle class="p blue" cx="60" cy="102" r="6"/>
<circle class="p blue" cx="76" cy="112" r="6"/><circle class="p blue" cx="92" cy="104" r="5"/>
<circle class="p blue" cx="64" cy="118" r="5"/><circle class="p blue" cx="84" cy="122" r="5"/>
<circle class="p blue" cx="100" cy="94" r="6"/><circle class="p blue" cx="108" cy="110" r="5"/>
<circle class="p blue" cx="98" cy="78" r="5"/><circle class="p blue" cx="78" cy="128" r="4"/>
</svg>
<div class="matrix-hint">
<strong>Matrix conditions:</strong> The species self-attracts moderately, keeping the group together, while also attracted to a second species that is itself moving. The cross-species attraction provides a drag force in the direction of the target species; the self-cohesion prevents the swarm from dispersing in its own wake.
</div>
</div>
</div>
<!-- MOBILE CELL -->
<div class="pattern-card flip reveal" id="mobile-cell">
<div class="pattern-left">
<div class="pattern-icon-row">
<span class="pattern-icon">🚀</span>
<span class="pattern-id">14</span>
<span class="pattern-rarity rarity-rare">Rare</span>
<span class="new-badge">New</span>
</div>
<h3>Mobile <em>Cell</em></h3>
<p>A proto-cell — a ring membrane enclosing an interior cluster of a different species — that has acquired net translational velocity. The entire two-layer structure moves together through the field without losing structural integrity. The motion is not driven by an external attractor; the cell is self-propelling due to a slight internal force asymmetry that was frozen in during formation.</p>
<p>The mobile cell is the most complex stable object regularly produced in particle life. It encodes information (the species combination and ratio) in a structure that persists through both space and time. Its existence is what prompted calling the static version a "proto-cell" — a cell, by biological definition, moves.</p>
<div class="detector-box">
<div class="detector-box-label">Detection signature</div>
<ul class="detector-conditions">
<li>A proto-cell is detected — ring cluster enclosing a different-species interior cluster</li>
<li>Ring's center-of-mass speed <span class="val">> 0.03</span> — the whole structure is in motion</li>
<li>Interior cluster moves with the ring (not left behind)</li>
<li>Structure must hold together across at least 2 detection frames</li>
</ul>
</div>