集合写真ビルダー

集合写真ビルダーは、太陽、惑星、冥王星、ほかの準惑星、衛星のどれでも、好きなだけ一枚の絵に並べます。天体はすべて同じ WebGL の場面に描くので、天体がいくつあってもページの WebGL は一つだけです。

選ぶ・並べる

天体タブで天体を選びます (一つにつきボタンが一つで、もう一度押すと外れます)。家族写真、巨大ガス惑星、木星とガリレオ衛星、地球と月の大きさ比べ、という見本から始めることもできます。選んだ天体は絵の下に専用の操作が出ます。順番 (前か後ろか)、大きさ、傾き、極の上から見る角度、自分で回るかどうかです。

並べ方タブには二つの配置があります。

• 自動で並べるは、天体の場所と大きさを絵が決めて、いつも全部を収めます。横一列、弧 (なだらかな曲線で、集合写真のようになります)、格子、本当の軌道の距離 (衛星は惑星から、惑星は太陽から、本当の距離だけ離して置き、軌道の輪を描きます。日時を選ぶと、その日時の位置になり、真上から見た形になります) から選べます。大きさは、実際の比 (互いに本当の比なので、小さい天体は点になります) か、見やすく (一番小さい天体も見えるように近づけます) です。衛星を惑星のまわりにすると、惑星の衛星が近い順に横に並び、それぞれの軌道の輪も出ます。天体をドラッグすると順番が変わります。
• 自分で置くは、置いた場所と決めた大きさのままです。天体をドラッグすると動き、ほかの天体の中心や端にぴたっと合って、案内線が出ます (Alt を押すと合わせません)。何もない所をドラッグすると画面が動きます。「中央へ」と「全部入れる」で天体が戻ります。ホイールを回すと画面が動き、Shift を押しながらホイールを回すと横に動きます。Ctrl、Command、Alt のどれかを押しながらホイールを回すと、ポインターを中心に拡大・縮小します (ほかの家族のパッケージと同じです)。[ と ] のキーで、選んだ天体の大きさが変わります。タッチ画面では、天体を二本の指でつまむと大きさが変わります。

「自分で置く」にすると、今の並びのままになります。「自動で並べる」に戻すと、自動の配置に戻ります。

天体を回す

回すの道具を選ぶ (またはドラッグ中に Shift を押す) と、指の下の表面がついてくるように回ります。右へドラッグすれば表面が右へ、上へドラッグすれば上へ動きます。矢印キーも同じ向きです。天体が自分で回るようにもできます (止める、ゆっくり、はやく)。回る向きは本物と同じで、地球と同じように、惑星の表面は左から右へ動きます。

光・空・見た目

見た目タブでは、描き方 (線画、リアル、表面の地図)、背景 (黒、星空、グラデーション、透明)、太陽の向きを選びます。太陽の向きは、絵全体で一つで、方位の角度と手前への傾きです。影を入れると、日食のように、ある天体が別の天体への太陽の光をさえぎります。太陽を低く、横から当てると見やすくなります。名前と軌道の輪は消せます。日時の空を選ぶと、各天体をその日時に地球から見える向き (本当の極の向き) に回します。

キー

矢印キーで選んだ天体を動かします (「回す」の道具なら回します)。[ と ] で大きさ、Page Up と Page Down で順番、Home と End で一番後ろと一番前、Delete で取り除き、Ctrl+Z (Command+Z) で元に戻し、Ctrl+Shift+Z でやり直します。自動で並べているときは、左右の矢印で順番が変わります。

絵を残す・共有する

絵はアドレスの ?scene=... に残るので、リンクがそのまま絵になります。共有タブはファミリー共通の埋め込みパネルです (自分のページに入れる)。ページの作り方ごとにコードを書きます (HTML、ES モジュール、React、Vue、Angular、Svelte、iframe)。「コードをコピー」、埋め込みページを開く、ドキュメントを読む、クレジットの行があり、となりに PNG の保存、SVG の保存、リンクのコピーが並びます。線画の SVG は全部ベクターです。陰影つきの見た目では、天体は SVG の中の画像になり、背景、軌道の輪、名前はベクターのままです。

<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/portrait/+esm"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/all/+esm"></script>

<wakusei-portrait scene="look:painted~jupiter_0_0_0.3_0~io_0_0_0.1_0"></wakusei-portrait>

encodeScene と decodeScene で、場面をそのテキストにしたり戻したりできます。addBody と layoutPortrait は、コードで場面を作って配置します。portraitCode は、ビルダーが見せるページ用のコードを書きます。

性能

天体がいくつあっても、WebGL は場面全体で一つです。止まっている間は何も描きません。動いている間も、描くのは1秒に30回までで、画面の外、隠れたタブ、動きを減らす設定のときは動きません。天体の画像は必要な大きさの分だけ取り寄せ、天体が小さくなったり消えたりしたら手放します。凍結テストは、一つの場面に12個の天体を入れて動かし、止まっているときの描画、WebGL が二つ以上になること、増え続けるグラフィックスメモリ、大きすぎるキャンバスがあれば失敗します。