富士山のワイヤーフレームを作りながら、正解が分からなくなった

2つの試作は、どちらも作品として成立した。ただし、最初に描いたものはまだできていない。

黒背景に、細い白線で描かれた富士山。

この画像を見て、画像を貼らず、HTMLとCanvasだけで動く作品を作ろうとした。

途中で2つの試作ができた。どちらにも良いところがある。しかし、最初に作りたかったものができたかと聞かれると、答えは同じではない。

今回の問題は、作品の出来が悪かったことではない。途中から「何を作れたら成功なのか」が分からなくなったことだった。

最初に作りたかったもの

最初の目的は、次のような風景だった。

• 富士山そのものが、無数の白い線で立体的に見える
• 黒い夜空に、静かな星がある
• 中景の尾根、前景のメッシュ地形、針葉樹がある
• 全体が一枚の風景として成立する
• 線はごく微細に動く
• 画像、外部ライブラリを使わず、軽く動く

参考画像をコピーするのではなく、構図、密度、空気感、ワイヤーフレームという考え方をJavaScriptで作り直す。それが出発点だった。

試作1　流線の中に富士山を抜く

画面全体を流れる白線が、富士山の形だけを避けている。山は白線で描かれず、黒い空白として現れる。

この試作の良さは明快だった。

• 富士山の輪郭が一目で分かる
• 線の微細な揺れが静かで、完全同期していない
• 白線と黒い空白だけで、独自の緊張感がある
• 抽象作品として固有性がある

一方で、最初の目的とはずれている。

参考画像で見たかったのは、地形そのものを走る白い線だった。この試作では流線が主役になり、富士山は線のない場所になった。

作品としては失敗ではない。しかし、今回の依頼に対する適合度は低い。つまり、失敗作ではなく、別の作品ができた。

試作2　富士山そのものを白線で描く

こちらは、富士山の水平の等高線と縦方向の線を重ね、山体を白いワイヤーフレームとして描いた。

星空、中景の尾根、前景のメッシュ地形、大小の針葉樹も加わった。流線版より、最初の参考画像に近い方向へ戻っている。

うまくいった点は次のとおり。

• 富士山が空白ではなく、線の集積として見える
• 横線と縦線の交差で山の量感が出た
• 前景と木が入り、一枚の風景になった
• 静止状態でも富士山に見える
• PCとスマホの両方で画面からはみ出さない

まだ足りない点もある。

• 山頂が丸く、火口や雪渓の複雑さが弱い
• 山体の線が整いすぎて、自然地形よりCGモデルに見える
• 中景と前景の密度差が小さく、奥行きが浅い
• 参考画像にあった荒々しい侵食筋や不均一さが足りない

こちらは当初の目的にかなり近い。ただし、完成ではない。

2つを同じ点数で評価しない

途中で迷った理由は、「美しいか」と「最初の目的に合っているか」を同じものとして考えたからだ。

2作品を分けて見ると整理できる。

• 富士山としての明快さ：流線版も地形版も高い
• 作品としての固有性：流線版は高い。地形版は中〜高
• 当初目的への適合：流線版は低い。地形版は高い
• 参考画像の地形感：流線版は低い。地形版は中〜高

流線版は、当初の目的から外れた代わりに、別の作品として強くなった。地形版は、独自性を残しつつ、作りたかった方向へ近づいた。

どちらが作品として上か、という話ではない。今回の目的に対して、どちらを続けるべきかという話だ。

なぜ正解が分からなくなったのか

制作の途中で評価軸が増えた。

• 富士山に見えるか
• 美しいか
• 動きが気持ちよいか
• 技術的に軽いか
• 参考画像に近いか
• オリジナルになっているか

どれも大切だが、同時に追うと完成条件がぼやける。

特に「作品として面白い」という評価は強い。別の方向へ進んでも、その作品なりの良さが見つかる。そのため、元の目的へ戻る判断が遅れた。

必要だったのは、制作中も最初の一文を残すことだった。

富士山そのものが、白いワイヤーフレーム地形として見える風景を作る。

この一文に照らせば、流線版は保存する別作品、地形版は続ける本線だと判断できる。

軽く動かすために残せたこと

技術面では、2作品とも次につながる成果があった。

• Canvas 2Dだけで描画
• 線ごとに振幅、速度、位相を変える
• TypedArrayへパラメータを事前保存
• 毎フレームの配列生成を抑える
• 24〜30fpsに制限
• devicePixelRatioに上限を設定
• 非表示タブでは描画停止
• Spaceまたはタップで停止・再開
• Rキーで再生成
• prefers-reduced-motionへ対応

動きを大きくするとUIエフェクトに見える。今回は「見ていると少し分かる」程度に抑えた。この判断は両方の試作で残したい。

今回の結論

最初に描いたものには、まだ到達していない。

しかし、何もできなかったわけではない。流線版では、黒い空白として富士山を見せる別の表現ができた。地形版では、白線の山、星空、前景、木を一つのCanvas風景にまとめられた。

反省点は、途中で作品の良さを見つけるたびに、それを「今回の正解」と混同したことだ。

次に作るなら、流線版は別作品として残す。地形版を本線にして、山頂の火口、非対称な侵食筋、線密度の差、前景の奥行きを詰める。

正解は、最も美しい試作ではない。最初に決めた目的へ、作品の良さを保ったまま近づけたものだと思う。

※埋め込み作品は、Spaceキーまたはタップで停止・再開、Rキーで再生成できます。