ワタタクmouseX/widthというコードが気になったので、使い方と理解を深めていきます。
中間色を知りたいときの役に立ちますね。
参考Youtube動画。
動画内3：40秒あたりではmouseX/w
この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
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の間で表現できるようになる
ワタタクそれでは今日もレッツワクワクコーディング。