1/12

Three.js

https://three-training2.vercel.app/src/examples/36-water-gpu/index.html

水面を作った。マウスを素早く動かした場合、波紋が起こる箇所が点の連続になることが気になったので、線にしたい。

前フレームのマウスの位置と現フレームのマウス位置の線分を引き、
ピクセル上の点を線分に垂直に引いた線から、線分上の最も近い点を求め、その点とピクセル上の点をlength()してheightmapから引く。

dot(line, line)

vec2 line = current - prev; // 線分の方向ベクトル
float lineLengthSq = dot(line, line); //線分の長さの2乗

（ピタゴラスの定理）。length()使っても同じ

dot(line, line) = line.x * line.x + line.y * line.y
                = x² + y²

glslのuv

なんかuvの定義を忘れがち、uvは現在のピクセルの位置である。

内積で点から線分への射影を求める

// 点から線分への射影のパラメータ 
float t = clamp(dot(pointToStart, line) / lineLengthSq, 0.0, 1.0);
// 線分のstartだと t = 0; 線分のendだと t = 1;

そして線分上の最も近い点を求めおる

// 線分上の最も近い点
vec2 closestPoint = lineStart + t * line;

https://three-training2.vercel.app/src/examples/39-water-customshader/index.html

デザイン

• ベタ塗りは引き締め効果もあるが、重い印象にもなるかも。
  フッターでベタ塗りしている場合その上のセクションで余白が多く白いセクションだときつい。工夫する。
• 温かみのあるサイトを演出したい場合、手書きやあしらいを入れることがある。

  そのあしらいをなるべく、無難で意味のないものにはしない。テーマを設定したい。

• 背景のデザイン目的のようなデカ文字や画像は文章を読むノイズになってはいけない。
• 画像をレイアウトの位置として見がちだが、例えば「ビジターは施設の内観ではなくそのものも気になるので、外観の画像も追加する」など、ちゃんと画像の中身と読み手の請求を合わせる。
• デザインに強弱をつけて単調なレイアウトを避ける。同じサイズの画像が連続にならぶのを避ける。

野暮ったい - 洗練されていない、垢抜けない

フロントエンド開発のためのセキュリティ入門

と、言う名前の本をやります。
セキュリティを意識することはフロントエンドでは難しいことといえど、フレームワークでできることが増えてきて、意識しなければならないものになりつつあるので入門。

機能案件 / 非機能案件

システムで必ず満たす機能に関する要件（宿予約でいうと何日・何人泊まるかを選択できるようにしたり、決済の方法を選択できたり）を機能案件、
システムを利用するうえで主目的にならない要件（アクセスが集中しても接続できたり、3秒以内に応答させたり）を非機能要件という。

セキュリティは、非機能要件の一つ。

この本、ハンズオンでexpressをつかってリクエストの中身とか見ていくっぽい。
expressとかめちゃくちゃ久しぶりだ。と思っていたらファイルの情報を見る感じ去年の5月まではUDEMYで練習していたっぽい。えらい。ただ何も覚えていない。

感想

ケトル買ったおかげで午前中の質が上がった気がする。YouTube見ながらだから質もクソもないんだけどね。
水曜日に１ヶ月の復習する。

Thanks to buying the kettle, I feel like my mornings have gotten better. Though honestly, since I'm watching YouTube, there's no such thing as "quality" anyway.

• Thoughの役割: 「〜だが」「〜だけれども」という逆接や対比を示す。
• Honestlyの役割: 「正直に」「率直に」と、本音を強調する。