角をつかんで、引いてみる。
少しの制約で、
小さな物が生きてくる。
どこでもつかんで引き、離します。重力と減衰が戻します。
つかみ位置 + 慣性 + 減衰 → 個性考え方 / 動きに結果がある物
バッジが動き、ストラップが曲がり、クリップがつながり、影が追うと物らしく感じます。離したあとも手の動きを少し覚えています。
表面を磨く前にこの関係をつくります。平面の粒子モデルとCanvasを使う実験です。準備なしで操作でき、編集にはJavaScriptの基礎が役立ちます。
現在と前の位置の差が速度になります。重力で下げ、距離制約でつながる点を決めた間隔へ戻します。上の支点は可動性ゼロで固定します。
短いつなぎは曲がり、3辺の固定距離がバッジの形を保ちます。
可動性に応じて補正を分けます。一組の補正が別の組をずらすため何度も解き直します。各ステップ22回の近似計算で、伸びを小さく保ちます。
試してみよう： 「骨組み」で遅く、速くドラッグします。動く点と保たれる関係を見て、長さで鎖の基準距離を変えましょう。
2本の鎖がひとつの取り付け点で合流します。各点を通る滑らかな曲線を黒いリボンにし、中央の光と細かな質感を加えます。描画が物理に従います。
紙のバッジは3点で拘束します。三角形の辺が固定されるため、長方形を描く向きが得られます。クリップはロープの合流点とホルダーの上端の間に置きます。
試してみよう： 「ストラップ」で骨組みを表示して粒子とリボンを比べます。バッジの違う場所をつかんで向きを観察しましょう。
常に中央をポインターへ合わせると飛び跳ねます。最初につかんだ点を局所座標へ変え、3点の重み付きの組み合わせで表します。その点をポインターへ動かし、距離制約を解き直します。
重みが手と物の接点を保ち、角を引けば自然に回ります。ポインターキャプチャで範囲外でもつながり、バッジの外ではタッチでページをスクロールできます。
試してみよう： 中央と上の角を引いて比べます。動かしながら離す場合と止めてから離す場合の違いを見ましょう。
2つの位置の差を速度とし、大部分を残して重力を加え、制約を解きます。離すと直前の動きを続け、毎ステップ少しずつ速度を減らして静止します。
描画頻度に関係なく毎秒120の固定ステップで進み、余った時間を次へ持ち越します。長い時間差を制限し、非表示や画面外では更新を止めて計算を安定させます。
試してみよう： 減衰を増やして軽く押し、減らして繰り返します。重力ゼロで浮かせ、戻して重さが中心を与える様子を見ましょう。
紙に名前を置き、透明ケースには二重の縁、淡い塗り、小さな穴、柔らかな反射を加えます。クリップには金属のグラデーションを使い、黒いストラップと区別します。
輪郭が読めるよう素材を控えめにします。影をずらしてぼかし、背景からの距離を感じさせます。2D描画に粒子モデルが動きと回転を与えます。
試してみよう： 「バッジ」と「カード」で名前2行と文字色を変え、光沢0%と100%を比べます。「シーン」で影を加えます。
停止中もドラッグで配置し、矢印で引けます。Spaceで軽く押し、Homeでリセット。動きを減らす設定では停止から始まります。
画面保存は現在の段階、名前、素材、姿勢、骨組み表示を1600 × 1200の画像にします。背景を含むシーン全体の静止画です。
試してみよう： 停止して構図を整え、保存します。再開して同じ形が操作へ変わる様子を見ましょう。
実践 / ひとつの物、ふたつの個性
長いストラップと低い減衰で角を引き、動かしながら離して大きく揺らします。次に短くし、減衰を増やして小さく引きます。
カードは同じまま、個性のどれだけが動きから来るか考えます。それぞれ保存し、見た目と操作を比べましょう。
バッジに戻る ↑小さな粒子の計算とCanvas 2Dを使います。同じ姿勢でアクセシブルなボタンも配置し、ポインターとキーボードの操作を見た目に合わせます。
// A fixed step, with previous position carrying velocity.
const retention = (1 - damping) ** (60 * dt);
const velocity = (position - previous) * retention;
previous = position;
position += velocity + gravity * dt * dt;
// Move connected points back to their rest distances.
solveDistanceConstraints();
// Draw ribbons, then the rigid badge at its solved pose.単独HTMLを開き、内蔵のモデルと描画コードを編集します。スタイル、画像、JavaScriptを含み、サーバーやインストールは不要です。