JavaScript

シミュレーションです。バネです。設計を考えるのが楽しくて３, ４回は書き直してました。 https://chrono-kinesis.yyyoichi.com デモもあるよ。 https://chrono-kinesis.yyyoichi.com/guides/example ざっくり仕様 なんでもバネにできる ベクトルは無限に拡張可能 アニメーション不要時のrequestAnimationFrameの停止 依存関係なし Springパラメータの動的調整 DOMでもCanvasでもWebGLでも設計上動作可能 大雑把ですが、軽量物理シミュレーションUIライブラリ、という感じを目指しています。 利用例 これはマウスを追従するスクリプトです。 import {DefaultSimulatorService, DomPhysics, DomSource, DomVisualizer, Kinetics, MousePositionClock} from "@yyyoichi/chrono-kinesis" const simulation = new DefaultSimulatorService({tickRate: 0.5}); const mouse = new MousePositionClock(document.getElementById("mouse-hover-box")!); const pointer = new DomSource(document.getElementById("mouse-hover-pointer")!); simulation.add({ clock: mouse, target: mouse, kinetics: new Kinetics(pointer.position()), physics: new DomPhysics(pointer, new DomVisualizer()) }); simulation.run(); 宣言的で読みやすい気がしています。 内部仕様 Simulatorがオーケストラレーターとして、clock, target, kinetics, physics を動作させます。 clockは入力検知です。 イベントがあればシミュレーションが開始されていきます。 「マウスが乗った」とか「クリックした」とかなんでもコールバックをimplすれば良いことになっています。 最後にいつイベントが発生したかを内部にもっているので、しばらくイベントがなければシミュレーターは停止します。 targetは向かうべきベクトルを指します。 基本的にベクトルはnumber[]で表現される任意の文脈の値です。 座標系の場合、ライブラリとして一貫してドキュメントルートからの座標を扱います。 次元数は問いません。 kineticsは演算装置です。 targetからの値を受け取り決められた速度で目指します。 初期値を受け取り演算の状態を保持します。 十分に減退したかどうかの状態を内部に持ちます。（シミュレーターが聞きに来て停止するかどうかの判断をします。） physicsは演算結果を当てる要素です。 受け取ったベクトルの意味を解釈して、基本DOMにスタイルを当てます。 simulator. [続きを読む]