headタグを共通化するため
https://github.com/nfl/react-helmet

目的

• 何が期待できるページなのかわかるようにする
  • アートは簡易に最適なパラメータで閲覧できるように
  • 研究は内容がわかるように

課題

• アート作品と研究が一緒になっているため見るものなのか触るものなのかわからず適した表現ができていない

方針

• アート/研究 x index/detail の四象限を置き、それぞれに適した表現をする

ページ構造
外向きに宣伝するのはgalleryなので優先する

• top
  • Gallery (アートindex)
    • detail
  • 研究index
    • サブカテゴリー
      • detail

アート

研究

• ソースコードへのリンク
• noteへのリンク

index

detail

詳細

KPI

• Google Analyticsからページ訪問数、セッション期間を調べる

TODO

• アートindexページ
  • 表示する作品をリストアップ
• ALifeGameJam
  • indexページをこちらのindexへリダイレクトさせる
  • breadcrumbsを追加する

Reference

• issues
  • ページごとに適した表現方法を実装する #79
  • mitsuyoshi-yamazaki/ALifeGameJam2019#99
  • mitsuyoshi-yamazaki/ALifeGame#1
    • ギャラリー構想
• 実装
  • MaterialUIのTheme
• 参考
  • https://madebysasha.com
  • https://carlosd.org/guilloche-gallery/
  • http://akirawakita.com/#works/dismantle

前提として、恒常性をもつパターンを優遇するにはエントロピーの増加を実装しなければいけない

案

GA

棄却案

1

進行方向に進む際の種になる状態をAとしたとき、Aを伸ばす際に後ろ向きにもうひとつA'を出しておく
しかし後ろには自分の身体があるので実際にはA'は発現しない
ただし、前方に障害物がある場合は待っていれば身体が消滅するのでA'が伸びて新たに逆向きの身体をつくりだす

x 身体が消滅間際のときにはすでに"生きている"枝がないのでA'を伸ばせない

• PullRequestに対してGitHub Actionsでテストを実行 ($ yarn test) し、こけたらマージできないよう条件をつける

• Generative^0 Art
  • 人間がつくるアート作品
• Generative Art
  • 人間がルールをつくり、ルールがアートを生成する
• Generative^2 Art
  • ルールの生成、選択等のメタルールが設定される
• ...
• Generative^n Art

• nが大きくなるほど恣意性が薄れる
• Generative^->∞ Artでは人間は「美的基準」のみを設定することになり、究極の純粋美術になる

nについて

nはなにか

• a. 選択対象
• b. メタルール
• c. Processシリーズから考える

a. 選択対象

ルールによって変化させるパラメータで区別する

• 0: なし
• 1: 1次のパラメータ（時間、位置など
• 2: 2次のパラメータ（1次のパラメータの根幹を作るパラメータ（物理法則の力の大きさなど
• 3:

b. メタルール

• パラメータが自動生成される
• ルールが自動生成される
• ルールやパラメータの組み合わせが自動で選択される

c. Processシリーズについて

• nはその作品の時間の軸として表せる
  • G(1) -> 時間
  • G(2) -> パラメータの変更(時間)
  • G(3) -> ルールの変更(パラメータの変更(時間))
• 人間の美的感覚にもとづいて選択するのはまた別の話か

作品か、手段か

• n >= 1 以上では、変化するさまを作品とするか、パラメータ空間の中の特定の領域を探索する手法とみなすかを考えなければならない
• 案）全探索してある程度絞り込み、その絞り込みを成り立たせる制約をつくる

パラメータ

• パラメータをバイナリ表現可能にすればGenetic Algorythmにかけることもできる

https://note.com/hogera/n/n3bdff52bfd55

BlindPainterによる

• 遺伝子が無個性なので変化がないように見えてしまう
  • 局所性をもたせてパターンが出るようにする

線と角度

• ルールとルールを解釈する部分がセットになっている
  • →それぞれをGPにする？何か違う気がするが

• 恒常性のあるパターンを検出する
  • 生存しているdrawerの数の多い順に計量してルールを出力する
• 発現していないconditionがある場合は種を植え直す

#36
#41

A:-173,C,-146,G,-30,E;C:.;G:140,E,-161,A;E:133,M,72,G;M:-121,E

A:-173,C,-146,G,-30,E;C:.;G:140,E,-161,A;E:133,M,72,G;M:-121,E
loops: EM,GE,AG,AEG

• 課題
  • 複数のループが組み合わさったループ、ある状態が複数回登場するループはカウントされない

現状ではconsole.logに出力している

考察

複数の状態遷移をもつこと

• 互いに遷移しない複数の状態遷移をひとつのルールに埋め込むことができる
  • A:A;B:Bなど
• 利用することで面白いふるまいを作り出せるかもしれない

別パターンとの共生

• 厳密に同じ角度で衝突することはまずないため共生は難しいのではないか

左右対称

• L-Systemは細胞分裂を抽象化したもので、生物の対称形はそれとは独立した仕組みで成り立っているため、無理にまとめようとせず併用する方法を探す
• https://note.com/_mitsuyoshi/n/ncdc2870f7d9f

MEMO

William Morris

局所的にはパターンをもち、大局的なパターンはないが紙面を埋めるようになっている
https://www.pinterest.com/pin/763852786779632329/

• 万華鏡のパターンをベース（= 制約）としてgenetic programmingを入れる

• https://mitsuyoshi.kibe.la/@mitsuyoshi/2081
• https://tonejs.github.io
• https://github.com/Tonejs/TypeScript
• やってみた記事
  • https://note.com/hirachan2/n/n0320abe6312b
  • https://note.com/hirachan2/n/nfcd9f5630625
• Generative Music
  • https://medium.com/@alexbainter/introduction-to-generative-music-91e00e4dba11

概要

静的な画像の閲覧ページをつくる

• Gallery からリンクする
• Drawer Gallery でルールを変更できるようにする

関連

• 詳細ページのレイアウト変更
• ホスティングページの整理

• "両親の形質の中間"はどんなものになるのか？？
  • 減数分裂は一旦おいておき、両親の情報を両方受け継いだ"2倍体"がどのようになるか観察してみる
    • ルールは A→親1,親2 と生成する

2倍体

結果

• 両親の形質が絡み合っているだけの状態（中間的な形状ではない
• 「本来生殖できない情報を混ぜている」と認識すべきなのでは
  • 生殖できるかどうかを判別するためのルールの中間層を作れば良いのではないか
    • 例）状態遷移が同じで角度が異なる
    • パターンの中核をなす状態遷移とそうでない枝葉の部分（眼球を作る情報と虹彩の色を決める情報の対比のような）がルール上区別されていれば実現できるのではないか

favorite + 銀杏

親1: A:-88,A,-152,A (favorite)
親2: A:-12,A,25,A (銀杏)
子: A:B,C;B:-88,B,-152,B;C:-12,C,25,C

favorite + 角

A:4,A,154,B,-60,A;B:33,B (角

子: A:B,C;B:-88,B,-152,B;Z:4,Z,154,Y,-60,Z;Y:33,Y

http://localhost:8080/pages/drawer.html?system.run=0&system.auto_download=0&s.f=1&s.r=A:B,180,Z;B:-88,B,-152,B;Z:4,Z,154,Y,-60,Z;Y:33,Y

• フレームが飛んだような見た目になっているため穏やかに移動するよう変更する
• 接触し続ける問題を解決する必要がある
  • 案)collisionを入れる
• 現行の実装では、サイズが大きくなるほど移動先で衝突する可能性が増え時間あたりの移動量が大きくなるという仕組みが入っている

目的

• 公開URLが変化しないこと

手段

• GitHub Pagesのカスタムドメインを用いる
  • https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site

ゲームの目的

• いいかんじの絵を育てる

仕様

• canvasにL-Systemの"種"を植え、"水"をやって育てる
• 絵はダウンロードできる

詳細

• "種"はL-Systemのルール
  • 寿命として新規に生やせる枝の本数をもつ
• "水"は寿命を伸ばす

補足

• 状態は保存できるのでurl encodeすればシェアできる

• target, module, libを適した設定に入れ替える
  • 想定：
    • target: ES6
    • module: ES2020?
    • lib: ES2020?, DOM
• https://www.typescriptlang.org/ja/tsconfig

ECMAScript自体が仕様ごとにリリースされるため、ES何々はある時点でのスナップショットにすぎない。
そのため「ES何々をサポートするブラウザのバージョン」という概念はない
https://stackoverflow.com/a/61836170

→ targetをES6に設定し、それ以上のESverをトランスパイルさせる & 記述するESverをどこか（moduleかlib）で指定する

QRコード付き

万華鏡のようなアートをつくる

仕様

a) 現実とおなじ

• 図形で囲われた領域を再帰的に描画する
  • →描画してから絵を取得する場合は任意のアートに組み込める

b) 透過図形

• 背景透過の図形を配置する
• #82 で実装

MEMO

• 現実では不可能だが、再帰的に描画するうちの一部のみ条件に従わないつくりにすることができる

Reference

• https://note.com/_mitsuyoshi/n/ne7ab3adf0931

案① 遺伝子（と実行系）の設計

• 遺伝子（と実行系）の設計
• 最終的な圧は人間がかけるとしても、前段階に制約は必要

遺伝子（パラメータ）設計案

• 自己境界の設定
  • 世界に対して境界を指定する（何らかの力関係で揺らぐ
    • 自己に対しての方が良いのでは
• 自己の操作

制約の案

• 物体は複数同じ空間に存在できない

案② ピュアGP

実装してみたら楽しそう

• 実行系
  • 命令セットがあり、再起的に実行される
    • L-Systemを汎用化したもの
      • →で円を描くには？

案③ フラクタル

• hidden layerでひとつ動かし、その物体の座標を原点とした相対座標上で表層レイヤを動かす
  • 魚の群れが複数あるイメージ

memo

• L-Systemを導出できる物理系
• 「かかる力が速度に応じて変化する」などの愉快POWERを導入する

Casey Reas

• 制約の制約
  • 大きな加速度がかからない
  • 平衡しない
  • 大極的な動きができる

広がってきたら独立issueにしてください

• 迷路を進ませる
• 代謝をおこない、生活痕をのこす

• 停止オプションをつける

• サーバーからYouTubeにLiveで配信し続ける
• パラメータ変更などのコマンドを受け付ける
• パラメータが変わったらコメントを入れる
  • MVPは画面にパラメータが映っている状態

ルールの仕様は変わらないものの、人間の可読性と突然変異時の粒度を上げることができる

記述

A:X;B:X
X=A,B

↓

A:A,B;B:A,B

🤔 これではAとBはひとつの状態にまとめられるので意味ない

• 現在の状態をエディアカラ生物群に相当させると、カンブリア紀に至るには以下のハードルを超える必要がある
  • 左右対称
  • 前後の区別
  • 分化した器官

左右対称

• 単純に考えれば向きを反転したふたつの種を植えればよい
• ルールの方向も回転させる必要がある

分化した器官

• 別の状態遷移に切り替わる
  • 状態遷移のループごとに集計し、ループのスイッチング数が少ないことで分化を計測できるのではないか

TODO

• 単純化するために枝の長さを固定にする
  • 螺旋が描けなくなる
  • 図形が単純な形になる→なぜ？
  • 枝の長さをルールに埋め込む
    • 前の枝からの相対長さにする
      • 現在のようにある値に収束させるのが難しい

length = prev.length * 0.99

URLParameterParserのインスタンスをexportすればlayout.tsxで利用できそう

• ソースのディレクトリ階層が露出していてダサいため改善のためroutingを入れたい
• GitHub Pages uses the following dependencies and versions
• https://qiita.com/ma2shita/items/d197d4dc6680547f04ba
• https://knooto.info/php-simple-routing/

• 四分木のノードが増えないため検出できるのではないか
  • ノード数は増えているが、細かいノードが増えている
    • ノード数の増分を見ることでパターンの局所性を判定できるのではないか

• セルが生まれる際に隣接するセルの色をもつ
  • 複数ある場合の選択はランダムで良い
• 簡単な実装の割にきれい
  • 扉絵にする

四分木nodeからオブジェクトを取り除くコードを書く必要がある
https://github.com/mitsuyoshi-yamazaki/ALifeLab/blob/main/src/simulations/drawer/model.ts#L73

諸々の情報が集積する場所にしたい

• https://www.amazon.co.jp/dp/4873118476
• https://github.com/alifelab/alife_book_src
• https://github.com/Chakazul/Lenia

課題

• フルスクリーンは対象のhtml elementをフルスクリーン化するのに対し内容を拡大しないため、現状ではelementをあらかじめスクリーンと同じサイズに設定している
• elementのサイズを動的に決定すれば良いが、canvasはp5経由でサイズを指定しているため不整合が起きないか

• jsファイルの容量が削減できれば良い
• https://www.npmjs.com/package/uglify-js

Machines & TapesはRNAワールドを抽象化したものとして見ることができる
現在は世界に存在する物体はMachineだけだが、Machineを構成する要素とMachineの分解を導入すればよりプリミティブな系になるのではないか

• 要素に対してMachineが作用するなら、Machineに対してMachineが作用したらどうなるか
• 要素はビット長1のMachineである
• mitsuyoshi-yamazaki/ALifeGameJam2019#90

• いつ複製が終了するのか？
  • 内部状態
• Machine|Tape
  • 「開始コドン」をnビット長にすればそれ以下のものは自動的にテープ/材料になる
• 自分のテーブルとマッチしない素材（つまり2bit以上）が来たらそこで終了
  • 自然な突然変異
• 読み出し回数に応じてランダムで結合が切れる
• ヘッダ/ヘッダ長
• 生き残ることに圧をかける
  • →現在はbit長が1だと行動できないようになっている

参考: faassen/alife2020-tree@85525d8

• 系全体の**エネルギー量が減少していく傾向がある？
  • 平衡させるのは面倒なので昼夜をつくってパラメータを変えるとか

ファイルのリンクを載せる
https://github.com/mitsuyoshi-yamazaki/ALifeLab/blob/main/src/simulations/drawer/constants.ts

案

• 四分木を使ってLineが自身の収まる最小の矩形とその近辺のLineとの衝突判定のみを行うようにする
  • https://ja.wikipedia.org/wiki/四分木
  • #47
• ふたつのオブジェクトの衝突判定を行う際に、階層の深い QuadtreeNode から .collisionCheckObjects() を参照した方がオブジェクト数が減る
  • 理屈は正しいが今回は1対多で衝突判定を行うため意味がない
• root nodeの外へ向かう枝がroot node参照になってしまうので、適切なoffspring nodeに割り振るようにすれば計算量が減る
  • root nodeの領域外へ向かう枝は死ぬので無条件で排除（collision=true）して良い

特筆すべき性質

• collisionが実装してあるので無限に広がることがない
  • →制約を入れて人工生命の方にも向かえるようにしている（この辺膨らみそう
• 形状という現実世界と共通のインターフェースが使えるため恣意的な変換なしで現実の仕組みに組み込むことができる

枝の長さが変わらないとのっぺりした見た目になる

• 長さが同じだと一周してきたときに同じ点に戻ってきてしまい、そこで途切れる
  • 長さがだんだん短くなっていくと同じ点に戻らず、複数の線で多角形の輪郭が描かれることで輪郭が強調される

Next Work（案

• 生物の絵を描くルールと処理系を作る
  • そこから要素を抜き出す
  • 例
    • 放散虫
    • 貝殻
    • 蜘蛛の巣
• 単純な図形、例えば円形に広がるルールはどのようなものか
• ルールから空間的な広がりを予想する
  • →ある空間を埋める際に適切なルールを選択することができる
  • 一定以上広がらないことがこの系による制約になりうる → 広がれるものを選択する
• 適当に障害物を撒いておいたら楽しいのでは
  • 絵の真ん中に図形を置く（描画しなくてもいいかも
  • ふたつのルールを、異なるスケールで同じ座標に描画したら
  • 片方は線分ではなく矩形を単位とするとか
  • 何か基準を設けて遺伝的アルゴリズム
    • 単純に環境（= 淘汰圧）（この系では障害物の配置）が変化するだけでも収束を防ぐことができないか
    • 障害物を避けるだけだと内に籠る戦略が最強になる
      • 他者との関係を入れる: より多くの面積を取る必要がある、播種のために移動しなければならない、など

概要

line長はパターンの雰囲気を決める重要なパラメータであるにもかかわらず固定値となっているため、パラメータに組み込む

TODO

• 仕様を決める
  • どのようにパラメータ化するか
  • 全体で固定値をとらせるか、局所的にリセットできるようにするか、枝ごと/状態ごとに定めるか
    • 局所的にリセットは幹細胞から分化すると縮まる一方となる仕様と解釈できないか
      • 現在の仕様では祖先の枝が残るようになっているため、細胞分裂のメタファーとは異なる
        • →細胞分裂と同等の仕様を作ってみたらどのような模様ができるか

#69

TODO

• 画像と説明、予想される描画アルゴリズムを挙げる

生物のつくる模様

放散虫

https://ja.wikipedia.org/wiki/放散虫 に画像が複数

葉脈

https://bsapubs.onlinelibrary.wiley.com/doi/full/10.3732/ajb.1000154

• TSLintから切り替え
• ついでに no-shadowed-variable を severity: error に設定（TSLintでは設定が有効化しなかった
  • https://palantir.github.io/tslint/usage/configuration/

シュールレアリスムについて

• Generative Surrealism は存在しうるか
• 芸術をいくつかのパラメータで空間にマッピングした際に、シュールレアリスムを他の芸術と別の領域にマッピングできるのではないか、また空いた領域を見つけられるのではないか

自動化

要件

• 計算機を遊ばせない
• 自動で公開する

実装仕様

• 計算機を遊ばせない
  • 評価関数を入れる
  • 人間の手間を減らす
• 自動で公開する
  • Zapier + Instagramで可能

Discussion

• OSの考えが役に立つ

• 作業を行っていない日でも制作物がある状態にする
• 自動探索の出力結果を保存しておく
• YouTube Live
• 探索済空間 or パターンをリストアップしておき、未探索の部分のみを探索する