1メートルはいつも1メートル。
スクロールは移動の要求で、ポスター1枚の要求ではありません。端末ごとにイベント数が違い、指を離しても入力が続くことがあります。速度を変える入力として扱い、実際の移動距離を測ります。
距離を積み上げ、印刷間隔を越えるたびにポスターを置きます。余りを次へ持ち越すと、速いほど毎秒の枚数は増え、間隔は一定になります。
毎秒の枚数 ≈ 速度 / 間隔
試してみよう： 遅い移動と速い移動を試します。どちらも3秒ですが、速いほうは3倍進みます。増えた枚数を比べましょう。
ロールを動かす。
印刷を残す。
小さな動きを、手触りに。
動くロール、伸びる帯。
あなたの速さが印刷になる。
野原の記録小さな版 / 開かれた床
0.00 m/s印刷開始 · スクロールで前進 · ドラッグで方向転換
0000印刷枚数
04 / 小さな印刷スタジオを
同じ動きで道を描き、ポスターを置き、ロールを回します。
距離 → 印刷 + 回転考え方 / 動きが素材になる
もっと動く。
もっと残る。
痕跡を残すとジェスチャーの感触が変わります。床の上のロールなら、速く進むほど多く印刷し、曲がると帯が曲がり、止まれば作品を眺められます。
小さな動きのモデルとCanvasの投影形状を使います。紙をほどく物理計算ではなく視覚的な操作モデルです。ロールの厚さを保ち、印刷を続けられます。
フレーム間の隙間を埋める。
1フレームで複数の間隔を越える場合、1枚だけでは隙間ができます。移動区間全体をたどり、越えたすべてのしきい値に置きます。
前と今の位置を補間して通過点を求め、区間の向きをポスターに与えます。小さな回転が連なって曲線を描き、長さも間隔に合わせて少しの余白を残します。
持ち越し + 距離 → すべての間隔の通過点
試してみよう： 「印刷」で曲線と間隔を試します。重なる複製ではなく、連続する小さなポスターの帯を目指しましょう。
目標、ばね、少しの抵抗。
床をドラッグすると地面に目標ができます。ばねで引き、減衰で速度を抑えます。開始時の指とロールの距離を保つため、ずれを記録します。
離すと目標を除き、摩擦で速度を下げます。惰性で進んで印刷し、床のクリックで停止します。細かい計算と最高速度で突然の入力を安定させます。
加速度 = ばね × (目標 − 位置) − 減衰 × 速度
試してみよう： 印刷を開始して床をドラッグし、ばねの強弱を比べます。離して摩擦を変え、惰性の長さを観察し、クリックで止めます。
距離で紙を回す。
2つの半径と幅で、外面、内側の穴、2つの輪状の端面をつくり投影します。見える端には同心円の細い線を描き、紙の層を表します。
移動距離を外半径で割ると回転角がラジアンで得られます。同じ印刷の帯が床に触れるよう、外面のポスターを進めます。
回転角 = 移動距離 / 外半径
試してみよう： 「ロール」でカメラを変え、穴と印刷面を見ます。移動を実行して距離と回転数を比べましょう。
小さな作品を丁寧に繰り返す。
8種類のポスター、余白、限られた色、文字を再利用できる画像アトラスに描きます。同じ画像を床と曲面で使い、印刷とロールをつなぎます。
植物、幾何学、コードの記号を生成して描きます。タイトルとキャプションは全版を編集し、インクの変化は操作と紙を変えず粒だけ加えます。
ポスターのアトラス → 床の印刷 + 紙の曲面
試してみよう： 「文字」で短いタイトルを書き、「見た目」で3系列を比較します。道とカメラを固定して作品を判断しましょう。
静かな床、限られた軌跡。
淡い床と柔らかな接地影で居場所をつくります。古いポスターは薄れて消え、表示数の上限でシーンが増え続けないようにします。総印刷枚数は数え続けます。
開始時は静止。「印刷開始」でスクロールとドラッグを有効にし、Escで通常のページへ戻ります。矢印で前進と操舵、Spaceで停止。比較ボタンも使え、動きを減らす設定では結果を静止表示します。非表示と画面外では更新を止めます。
古い印刷 → 薄れる → 消える → 新しい印刷の余地
試してみよう： 「スタジオ」で寿命を短くして数回移動し、古い帯の消え方を見ます。シーン保存で1600 × 1200のPNGを用意します。
実践 / ふたつの道、ひとつの版
直線を印刷。
そこへ、 曲がりを。
自分でつくる：動くサンプル +
単独HTMLに動き、距離による配置、ポスター画像、ロールの投影、スタイル、操作を内蔵しています。ブラウザーで開いて編集でき、インストールや外部画像は不要です。
distance = length(newPosition - oldPosition);
let crossing = spacing - carry;
while (crossing <= distance) {
placePosterAt(crossing / distance);
crossing += spacing;
}
carry = (carry + distance) % spacing;
rotation = totalTravelled / rollRadius;もっと試してみよう次の発見：小さな印がつくる空間 ↗