demo_canvas API

Luna-Flow/geometry3d/demo_canvas は js ターゲット向けのブラウザ用実行ファイルです。MoonBit の項目は公開せず、インターフェースは前提とする HTML ページと、Canvas バックエンドで描くシーンです。

ビルドと配信

just canvas-build   # moon build src/demo_canvas --target js, then copy files
just canvas-serve   # build, then serve target/canvas-demo on http://localhost:8080

canvas-build は src/demo_canvas/index.html とコンパイルされた demo_canvas.js（demo.js として）を target/canvas-demo/ にコピーします。

ページの取り決め

geometry3d-canvas

ページには <canvas id="geometry3d-canvas"> が必要です。プログラムはその width と height 属性を 640 × 480 にし、2D コンテキストに描画します。要素かコンテキストがなければ起動時に中断します。

demo-select

ページには <select id="demo-select"> が必要です。値が dolly ならドリーズームのシーン、それ以外の値ならトーラスを選びます。プログラムは起動時と change イベントのたびに値を読みます。

シーン

トーラス

トーラスのシーンは半径 1.7 と 0.58（32 × 18 分割）のトーラスを、アニメーションのタイムスタンプ 1 ミリ秒あたり $0.0006$ rad で、$x$、$y$、$z$ まわりに $0.7 : 1 : 0.25$ の比で回転させます。カメラは 6.2 単位離れ、フルサイズセンサーに 35 mm レンズを使います。

ドリーズーム

ドリーのシーンはターミナルデモの --dolly モードと同じシーンで、フレーム番号はアニメーションのタイムスタンプから 30 fps で求めます。