tierra/index.html at main · asari-mtr/tierra · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="title">Gene Soup — Tierra-style Artificial Life Simulator</title>
<meta name="description" content="Browser-based artificial life simulator inspired by Thomas Ray's Tierra (1991). Watch self-replicating programs evolve, mutate, and spawn parasites in a 32-instruction virtual machine.">
<meta property="og:title" content="Tierra — Browser-based Artificial Life">
<meta property="og:description" content="Self-replicating programs evolve in a 32-instruction VM. Parasites, hyper-parasites, and degenerate replicators emerge unprompted.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://asari-mtr.github.io/tierra/">
<meta property="og:image" content="https://asari-mtr.github.io/tierra/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tierra — Browser-based Artificial Life">
<meta name="twitter:description" content="Self-replicating programs evolve in a 32-instruction VM. Parasites, hyper-parasites, and degenerate replicators emerge unprompted.">
<meta name="twitter:image" content="https://asari-mtr.github.io/tierra/og.png">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
  <h1>Gene Soup
    <select id="lang-switch">
      <option value="ja">日本語</option>
      <option value="en">English</option>
    </select>
  </h1>
  <div class="subtitle" data-i18n="header.subtitle">Tierra風 人工生命シミュレーター — 機械語で書かれた自己複製プログラムを進化させる</div>
  <div class="stats">
    <span><span data-i18n="stats.cycle">サイクル</span> <b id="stat-cycle">0</b></span>
    <span><span data-i18n="stats.gen">世代</span> <b id="stat-gen">0</b></span>
    <span><span data-i18n="stats.pop">個体数</span> <b id="stat-pop">0</b></span>
    <span><span data-i18n="stats.births">累計誕生</span> <b id="stat-births">0</b></span>
    <span><span data-i18n="stats.deaths">累計死亡</span> <b id="stat-deaths">0</b></span>
    <span><span data-i18n="stats.mut">突然変異</span> <b id="stat-mut">0</b></span>
    <span><span data-i18n="stats.mem">メモリ使用</span> <b id="stat-mem">0%</b></span>
    <span style="color:#22c55e;"><span data-i18n="stats.self">自立</span> <b id="stat-self">0</b></span>
    <span style="color:#ec4899;"><span data-i18n="stats.parasite">寄生</span> <b id="stat-parasite">0</b></span>
    <span style="color:#6b7280;"><span data-i18n="stats.degen">縮退</span> <b id="stat-degen">0</b></span>
    <span id="stat-stagnation-wrap" style="color:#fbbf24;display:none;"><span data-i18n="stats.stagnation">停滞</span> <b id="stat-stagnation">0</b> / <span id="stat-stag-kills">0</span><span data-i18n="stats.stag_kills">淘汰</span> <span id="stat-stag-resets">0</span><span data-i18n="stats.stag_resets">注入</span></span>
  </div>
</header>

<main>
  <div class="row-top">
    <div class="col-controls">
      <div class="panel">
        <h3 data-i18n="panel.control">制御</h3>
        <div class="button-row">
          <button id="btn-play" class="primary" data-i18n="btn.pause">⏸ 一時停止</button>
          <button id="btn-step" data-i18n="btn.step">⏭ 1ステップ</button>
        </div>
        <div class="button-row" style="margin-top: 6px;">
          <button id="btn-reset" data-i18n="btn.reset">🔄 再起動</button>
          <button id="btn-clear" class="danger" data-i18n="btn.clear">🗑 全リセット</button>
        </div>
        <div class="control-row" style="margin-top:10px;">
          <label data-i18n="label.speed">速度</label>
          <input id="ctrl-speed" type="range" min="1" max="200" value="20" step="1">
          <span class="val" id="val-speed">20 tick/f</span>
        </div>
        <div class="control-row">
          <label data-i18n="label.copy_rate">コピー誤り率</label>
          <input id="ctrl-copy" type="range" min="0" max="200" value="20" step="1">
          <span class="val" id="val-copy">2.0e-4</span>
        </div>
        <div class="control-row">
          <label data-i18n="label.cosmic_rate">放射線率</label>
          <input id="ctrl-cosmic" type="range" min="0" max="200" value="10" step="1">
          <span class="val" id="val-cosmic">1.0e-5</span>
        </div>
      </div>

      <div class="panel">
        <h3><span data-i18n="panel.hall">殿堂入り</span> (<span id="hall-count">0</span>)</h3>
        <div class="hall-list" id="hall-list"></div>
        <div class="button-row" style="margin-top:6px;">
          <button id="btn-hall-export" data-i18n="btn.hall_export" data-i18n-attr="title:tooltip.hall_export" title="JSON でエクスポート">📤 出力</button>
          <button id="btn-hall-import" data-i18n="btn.hall_import" data-i18n-attr="title:tooltip.hall_import" title="JSON をインポート">📥 入力</button>
          <button id="btn-hall-clear" class="danger" data-i18n="btn.hall_clear" data-i18n-attr="title:tooltip.hall_clear" title="全削除">🗑 全消去</button>
        </div>
      </div>

      <div class="panel">
        <h3 data-i18n="panel.inject">カスタムゲノム注入</h3>
        <textarea id="custom-genome" spellcheck="false" data-i18n-attr="placeholder:inject.placeholder" placeholder="例: [1,26,0,13,25,0,1,...] か NOP1,ADR_B,NOP0,..."></textarea>
        <div class="button-row" style="margin-top:6px;">
          <button id="btn-inject" class="primary" data-i18n="btn.inject">▶ 注入</button>
          <button id="btn-inject-fresh" class="danger" data-i18n="btn.inject_fresh">🗑 クリア&単独投入</button>
        </div>
        <div class="button-row" style="margin-top:4px;">
          <button id="btn-sample-ancestor" data-i18n="btn.sample_ancestor">祖先(61)</button>
          <button id="btn-sample-shrunk" data-i18n="btn.sample_shrunk">31バイト</button>
        </div>
        <div class="button-row" style="margin-top:4px;">
          <button id="btn-sample-24" data-i18n="btn.sample_24">24バイト</button>
          <button id="btn-sample-parasite14" data-i18n="btn.sample_parasite14">寄生(14)</button>
        </div>
        <div id="inject-status"></div>
      </div>

      <div class="panel">
        <h3 data-i18n="panel.legend">命令カラー</h3>
        <div class="legend" id="legend"></div>
      </div>

      <div class="panel">
        <details>
          <summary data-i18n="panel.about">このシミュレーションについて</summary>
          <div class="help">
            <p data-i18n-html="help.intro">Thomas Rayが1990年代に作った<b>Tierra</b>を簡略化したものです。</p>
            <p data-i18n-html="help.cpu">32種の命令(機械語)からなる仮想CPUがあり、メモリ上の自己複製プログラムが時分割実行されます。</p>
            <p data-i18n-html="help.ancestor"><b>初代の祖先</b>は61バイトで、自分のコードを探し、メモリを確保し、コピーして分裂します。</p>
            <p data-i18n-html="help.mutation">コピー時のビット反転と放射線(ランダム位置のビット反転)で遺伝子が変化し、自然選択(メモリが満杯になると死神 Reaper が古い・エラー多発個体を殺す)で進化します。</p>
            <p data-i18n-html="help.slicer"><b>Slicer</b>: 各個体の1ティック実行サイクル数はゲノム長に比例配分されます (Ray のオリジナル準拠)。短い個体ほど実行が遅くなり、コードあたりの効率が公平化されます。これにより縮退寄生体 (1〜5バイト) が一方的に勝つことがなくなり、Ray の論文と同じく ~40〜80バイトの<b>寄生体 (parasite)</b>が観察できます。寄生体は自前のコピーループを欠き、テンプレート検索で他個体のコピー機構を借用して増えます。</p>
            <p data-i18n="help.click">個体一覧やメモリ上の点をクリックするとゲノムの中身をテキストで確認できます。系統行をクリックで比較対象に追加/解除。</p>
          </div>
        </details>
      </div>
    </div>

    <div class="col-soup">
      <canvas id="soup" width="720" height="640"></canvas>

      <div id="comparison-panel" class="panel comparison-panel" style="display:none;">
        <div class="comparison-header">
          <h3 style="margin:0;" data-i18n="panel.compare">ゲノム比較 (差分は赤強調)</h3>
          <div>
            <button id="btn-compare-export" style="flex:0 0 auto;" data-i18n="btn.compare_export">📋 比較をコピー</button>
            <button id="btn-clear-compare" style="flex:0 0 auto;" data-i18n="btn.compare_clear">クリア</button>
          </div>
        </div>
        <div id="comparison-content"></div>
        <div class="help" style="margin-top:6px;" data-i18n="help.compare_hint">系統リストの行をクリックして比較対象に追加/解除。列ヘッダをクリックで該当 genome を textarea に展開。</div>
      </div>
    </div>

    <div class="col-creatures">
      <div class="panel">
        <h3 data-i18n="panel.creatures">個体一覧 (genome別 / クリックで検査)</h3>
        <div class="creature-list" id="creature-list"></div>
      </div>

      <div class="panel" id="inspect-panel" style="display:none;">
        <h3 data-i18n="panel.inspect">選択中の個体</h3>
        <div id="inspect-info" class="inspect-info"></div>
        <div class="button-row" style="margin-top:8px;">
          <button id="btn-copy-genome" data-i18n="btn.copy_genome">📋 ゲノムをコピー</button>
          <button id="btn-deselect" data-i18n="btn.deselect">解除</button>
        </div>
        <textarea id="inspect-genome" readonly spellcheck="false"></textarea>
      </div>
    </div>
  </div>
</main>

<footer>
  <span data-i18n="footer.text">Gene Soup · Tierra (Thomas Ray, 1991) にインスパイア · クリックで個体検査</span>
</footer>

<script type="module" src="js/main.js"></script>
</body>
</html>