ワタタクmouseX/widthというコードが気になったので、使い方と理解を深めていきます。
中間色を知りたいときの役に立ちますね。
参考Youtube動画。
動画内3：40秒あたりではmouseX/w
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「論理（システム）」で、人の心を動かす機能するアートを探究中
【文系・36歳・未経験】から独学でクリエイティブコーディングに挑戦し、独自の思考法で以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 開始1年9ヶ月目に、虎ノ門ヒルズ ステーションタワー49階 スカイガーデン＆プールのために制作した作品が展示される
目次
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の間で表現できるようになる
ワタタクそれでは今日もレッツワクワクコーディング。
