ワタタクmouseX/widthというコードが気になったので、使い方と理解を深めていきます。
中間色を知りたいときの役に立ちますね。
参考Youtube動画。
動画内3：40秒あたりではmouseX/w
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。
- ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- KITTE大阪の18メートルあるAxCROSS大型スクリーン
- 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
- UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 【上達の秘密】
- 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
- 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
- ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化
目次
mouseX/widthについて
- マウスの水平方向の座標（X軸）を取得するために使用
- この記事の冒頭で紹介している参考動画では、
let set_color = lerpColor(color1, color2, mouseX/w)という風に使用 - 主に中間色を表現したいときに使う
mouseX/widthはマウスカーソルが座標の左端にあると0、真ん中にあると0.5、右端にあると1になる理由
mouseX/widthは座標を0～1の間で表現できるようになる
widthは800として計算
- mouseX/widthでマウスカーソルが左端にあると0になる理由
- 左端のXの数値は0、widthも0なので
- 0/0で0になる
- 左端のXの数値は0、widthも0なので
- mouseX/widthでマウスカーソルが真ん中にあると0.5になる理由
- 真ん中のXの数値は400、widthは800
- 400/800 = 1/2
- 1/2 = 0.5
- 400/800 = 1/2
- 真ん中のXの数値は400、widthは800
- mouseX/widthマウスカーソルが右端にあると1になる理由
- 右端のXの数値は800、widthも800なので
- 800/800で1になる
- 右端のXの数値は800、widthも800なので
よってmouseX/widthは座標を0～1の間で表現できるようになる
ワタタクそれでは今日もレッツワクワクコーディング。
