ワタタクmouseX/widthというコードが気になったので、使い方と理解を深めていきます。
中間色を知りたいときの役に立ちますね。
参考Youtube動画。
動画内3:40秒あたりではmouseX/w
この記事を書いた人


クリエイティブコーダー / アーティスト
- 楽しんでもらえたり、ありがとうと言ってもらえるような「人の役に立つ、機能するアート」を探究しています
- 36歳(文系)から独学で挑戦し、1年8ヶ月目までに公募6つに挑戦し、3つで選ばれる
- 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の間で表現できるようになる



それでは今日もレッツワクワクコーディング。

