3/1

2月は28日までしかなかったねそういえば。急に3月になっててドキッとした。

行列

• 一次変換による面積の拡大率は行列式と呼ばれる。
  2次元で考える。
  det([3 0]) = 6
  ([0 2])
  ↑i,jが(3,0)(0,2)のとき、i,jがなす面積は1から6になる。
  行列式は6。
• 一次変換によってiとjが線形になるとき、面積は0
• iとjの変換によっては値は負になる。
• ３次元では、体積になる。

Three.js

Canvas 2D 方式が向いている場面（実際に多い）

• パーティクル系の変位・インタラクション
• ポートフォリオサイトのカーソル追従エフェクト
• 「マウスの通った軌跡」を視覚化したいだけの場合
• 実装コストが低く、パフォーマンスも軽い
• 実務のWebサイトではこちらの方が圧倒的に多い

GPU Fluid 方式が向いている場面

• 流体っぽい有機的な動きが必要な場合
• マウスの速度・方向が視覚的に反映される表現
• 背景全体が「液体のように波打つ」効果
• アート系・インスタレーション系の表現
• 表現力は圧倒的に上だが、実装・理解コストが
• 高い

┌──────────┬────────────────────┬─────────────┐

│ 観点 │ Canvas 2D │ GPU Fluid │

├──────────┼────────────────────┼─────────────┤

│ 採用頻度 │ 多い │ 少ない │

│ 実装難度 │ 低い │ 高い │

│ パフォー │ 軽い │ 重め │

│ 表現力 │ シンプル │ リッチ │

│ モバイル │ 容易 │ 注意が必要 │

simplexnoise vs cnoise

迷ったら基本的にsimplexnoiseを使う。
cnoiseを選ぶ理由は「コードが短い」「既に使っている」程度で、simplexに明確なデメリットはない。

地形で、真ん中だけ窪みを作りたい

大きさ20のPlaneが中央にある場合。
1.0 - smoothstep(0.0, 2.0, abs(position.x));　で真ん中ほど1の値が作れる。たしかに。

abs(positoni.x)で中心からの距離をつくる。何度もやってるはず。

glsl for文

ループを回す時で、ループによってiで割ったりしたい時、

変数に格納して s *= 0.5 とかすると 式にi が入らずきれいに見える。

内省

生きていけるんかな。とりあえず死ぬまで技術磨くしかないよな。

Can I really make it? For now, I guess I just going to keep honing my skills until I die.