スリットアニメーションを作る：4コマの合成と透明原稿の設計

#スリットアニメーションを作る：4コマの合成と透明原稿の設計

SlitCardは、4枚のドット絵から台紙としま模様のシートを作る道具です。絵そのものは止まっていても、シートの位置を変えると違うコマが見えます。

木版の制作台をイメージした紙・墨・朱・緑の配色で、4コマの編集と2枚の原稿を主役にしました。黒いしまを大きく見せるだけの展示ではなく、自分で描いて持ち帰る制作体験を目指しています。

#画像を差し替えず、帯を隠す

4コマを同じ幅の縦帯へ分割し、1・2・3・4の帯を交互に並べます。その上に、帯1つ分の透明なすき間と帯3つ分の黒い領域を繰り返すシートを置きます。

透明なすき間がコマ1の帯の上にあるとき、他の3枚分は隠れます。シートをすき間1つ分ずらすとコマ2の帯が見えます。静止画の合成台紙を変えず、覆う位置だけを変える仕組みです。

構成の根拠は MIT FabObscuraの研究説明を参照しました。研究のコードや画像は使っていません。この技法自体を新しい発明とは呼びません。

#原稿を2枚、同じ縮尺にする

台紙は白い紙、しまシートはプリンター対応の透明フィルムを想定します。開口を白で塗ってしまうと透過しないため、透明シートSVGでは黒帯だけを描きます。

両原稿はA4、絵の大きさ144×96mm、同じ原点と縮尺です。50mmの確認線を入れ、原寸100%で両方を印刷する説明を残しました。シートの端に1周期分のしまを延ばし、右へずらしたときに絵の左端が露出しない構成にしています。

ただし、実際の印刷・実物の視認性は未検証です。インクのにじみ、機器の倍率、透明シートのずれによってコマが混ざります。画面の描画が一致しても、工作に成功したと主張することはできません。

#最初は模様を隠し、手動で確認する

細かい高コントラストのしま模様は、不快に感じる人もいます。プレビューは初期非表示にし、利用者が表示を選ぶ設計にしました。自動再生はなく、手動のスライダーと次のコマ位置ボタンで操作します。

これは医療的な安全保証ではありません。不快なら見続けない案内と、いつでも隠す操作を残します。SNS用の画像も細かいしまではなく、4コマの見本を使っています。

#編集を一操作として戻す

24×16の絵を4枚、タップ・ドラッグ・矢印とスペースで編集します。速いドラッグでも入力点の間を埋め、一筆を1操作として戻せるようにしました。別の指が触れた場合は、その入力を描画中の指と混ぜません。

前のコマをコピーして少し動かすと、空白から4枚を描くより始めやすくなります。見本のボールと翼は数式から作った図形です。市販本や既存サービスの素材は使っていません。

#設定と実画像を検査する

再編集JSONはコマ数・寸法・0/1の画素・帯幅・バージョンを検査してから取り込みます。復元失敗で現在の絵を上書きしません。自動保存はないため、再編集にはJSON保存が必要です。

台紙・しまのSVGはXML、物理寸法、透明な開口を確認します。プレビューは4位置を実際に描画し、選ばれたコマの画素と照合します。「表示が変わった」だけでなく、他のコマが紛れていないかを検査するためです。

画像から変換する Kinegramのような既存ツールもあります。無料や書き出しだけを独自性とせず、今回は描く・改造する・仕組みを確かめる・再編集する短い体験を選びました。需要や独自性を実証したわけではありません。

紙の形を作る用途なら BoxNet、季節の光の入り方を動かすなら WindowLight と目的が異なります。