複素力学系のページを作る

[TOMOQ1024]

C3 Advent Calendar 2023 で使用したような複素関数の反復写像を表現するページを作成する．現在のブラウザの対応状況から，今回はWebGLを用いる．

[TOMOQ1024]

このページは数学が得意な人はもちろん，苦手な人の興味を助けることを目的とする．必要な機能は次の通り．

• 指定された関数と反復回数に応じて結果となる画像を表示することができる
• 文字列の数式からGLSLのコードに変換できる
• プリセットとして記事で用いた画像に対応する入力を呼び出せる
• 反復回数を編集できる
• 複素関数を表す数式を編集できる

[TOMOQ1024]

描画しているはずなのに，何も表示されない！

[TOMOQ1024]

描画も上手くいって，タイトルの問題も解決した！

[TOMOQ1024]

• [x] シェーダーの動的な更新
• [x] パーサーを使用した文字列の変換
• [x] 数式編集UIの実装
• [x] プリセットボタンの実装
• [x] グラフの初期位置の修正
• [x] 操作メニュー枠の強調
• [x] 数式の編集機能
• [x] その他設定項目の案出し

[TOMOQ1024]

• [x] クリップボードから数式入力欄への貼り付け時，テキストのみを受け取るようにする
• [x] 数式入力欄での改行を，禁止または複数行を前提とした設計を行う
• [x] 数式編集時のFキー入力で全画面切り替えを行わないようにする
• [x] 実装している関数全てに対応する複素関数を定義する

[TOMOQ1024]

優先度低めのTODO

• [x] プリセット選択時の関数更新を線形に補間したらどうなる？ → 後回し

何となくLighthouseやってみた結果(PWAはちょっとわからなかった←？)：

• [x] 操作メニューのボタンのidを機能に即したものにする
• [x] プリセット画像にaltテキストを設定する - [ ] 数式入力テキストエリアのidを機能に即したものにする
• [x] meta descriptionを設定する

[TOMOQ1024]

設定項目案(適宜更新)：

• [x] 反復回数(これはFuncEditorに置いても良さそう)
• [x] 解像度倍率
• [x] 配色(HSV ↔︎ グレースケール)

[TOMOQ1024]

改めて現在挙げられる追加/修正すべき事項：

• [x] タッチ操作の対応
• [x] スマートフォンへの対応(結構重要かも)
• [x] 他ブラウザでの挙動確認
• [x] プリセットの情報に初期値も含める
• [x] 数式編集毎に処理が重くなる

[TOMOQ1024]

他ブラウザでの挙動確認

Chromeで実装，Safariでの期待した動作を確認．文字やinput要素の見た目に顕著な違いが見られた．

[TOMOQ1024]

初期値を定数として関数を画素によって変化させるようなレンダリング方法を追加し，画面を分割させてこれと反復写像とをリアルタイムに対応させたい．

これによって，マンデルブロ集合 ↔︎ ジュリア集合の対応を見るなど，観察できる図形の幅が広がる．

[TOMOQ1024]

初期値の設定箇所を，画素に対応する複素数cが使用可能である数式入力要素にしたことで，マンデルブロ集合もジュリア集合も表せるようにした．当初の想像とは違うものとなったが，マンデルブロ集合 ↔︎ ジュリア集合の対応については別の機会？

[TOMOQ1024]

• [x] MUIへの移行
• [x] 低解像度の設定
• [x] 右クリックで壊れる
• [x] 最大化時のサイズ修正

構文解析に関するもの：

• [x] 数式のセッターで構文解析を行う
• [x] floor, round関数
• [x] 不正な閉じ括弧)でエラーが出ない

[TOMOQ1024]

• [ ] worksページでのコンテキスト増やしすぎ問題
• [x] Sampler2Dの指定方法がなんか変
• [ ] テクスチャ選択
  • RenderingModeの削除
  • プリセットと同様に選択ボタンを設ける
  • テクスチャの設定項目を設ける(addressMode, scaleMode)
• [ ] スライダーのスタイル設定
• [ ] クエリパラメータによる共有(DB接続)
• [ ] 関数更新の線形補間(しなくていい)

構文解析に関するもの：

• [ ] 数式の解析に失敗した場合はエラーを表示する
• [ ] 微分(これはニュートンフラクタルのページ作るならその時でも良し)
• [ ] 割三角関数