モーション・スケッチ 01–12
動きの実験室
雨、水紋、鳥、活字、星座、磁場、猫。CSS・SVG・Canvasで、画面の中の動きを小さく試しています。眺めるだけでなく、押す、選ぶ、動かすことで変化します。
12の展示が動いています。
01 · SVG + CSS
水鏡の八芒星
ペルシャの幾何学模様を、反対方向へ回る二層のロゼットとして描きます。模様を押すと静かにひらきます。
02 · CSS + Pointer
森を渡る風
枝、葉、光を別々の速さで揺らします。風量を変えたり、舞台をなぞって風向きを変えたりできます。
03 · SVG Path
鳥の航路
三本の軌道から一つを選ぶと、鳥が枝を離れて飛びます。曲線上の位置と向きを計算して動かしています。
04 · Canvas
ラポールの蛍
「人」と「ロボット」の光を近づけると、その間に関係の線が増えます。二つの中心をドラッグできます。
二つの光をドラッグ
05 · DOM + Physics
猫と糸玉
糸玉を動かすと、猫が気配を追います。離すと少しだけ勢いを残して転がります。
糸玉をドラッグ
06 · DOM + CSS
雨音の窓
森の霞を眺める尖頭アーチの窓に、細い雨筋が流れます。雨の密度を変え、ワイパーで一瞬だけ景色を澄ませられます。
ワイパーを押す
07 · Canvas + Pointer
池の水紋
静かなラピス色の池に触れると、指先から同心円がひろがります。重なった波がほどけていく様子を眺めます。
水面をタップ
08 · Type + CSS
活字の呼吸
短いことばを一文字ずつ、上下、間隔、濃淡の小さな波で揺らします。好きな句を入力して呼吸の深さを変えられます。
ことばは、息をする。
09 · Interactive SVG
夜空の星座
夜空に散らした星を青磁色の線で結びます。星に触れるとつながりが浮かび、配置を変えるたびに新しい星座が現れます。
星を順にタップ
10 · Canvas Field
磁場の砂鉄
細かな砂鉄が、見えない磁力線に沿って向きを変えます。舞台をなぞり、極性を反転して場の変化を確かめます。
磁石をドラッグ
11 · CSS Oscillation
振り子の同期
少しずつ異なる周期で揺れる五つの振り子が、やがて一つのリズムへ近づきます。揃えたり、もう一度ずらしたりできます。
12 · DOM + Seasons
四季の窓
同じ森の窓を、芽吹き、深い緑、金色の葉、雪へと移します。時間を自動で進めず、自分の手で季節を選ぶ展示です。