![見出し画像](https://assets.st-note.com/production/uploads/images/94944599/rectangle_large_type_2_dd210dd8f584649ed27a49533ca80836.png?width=1200)
📐円の方程式の疑似コード
短いのはわかったが、制約も多いし、わかりづらい
一旦、同じようにグラフィックのかけるp5.jsで、同様の処理をすることを念頭におきましょう。ざっくりは3通りぐらい方法は考えられ
・circleとかellipseなどを使う
・sin/cosにrかけてpointとかで描画
・1ドットごとにエクスタシーな処理
最初のは簡単すぎるので、リファレンスのリンクをはるにとどめます
・sin/cosにrかけてpointとかで描画
こんな感じです
![](https://assets.st-note.com/img/1672829210602-4aQu9OyQMz.png?width=1200)
GLSLと何が違うのか?
物理的なイメージは、p5.jsでやっているのはコンパスとかr長の糸を中心点からぐるぐる回しているイメージであるが、GLSL(というか円の方程式の場合は、その線はあくまで境界線でしかなく、しらみつぶしに、円の領域か否か、調べるイメージ。
疑似的にフラグメントシェー
![](https://assets.st-note.com/img/1672831814814-tEhnnEMOW9.png?width=1200)
簡単なように見えて99x99なので9801回点を打っていることになります。
なんとか減らせないか? なくはないですが、こんな感じですかね
![](https://assets.st-note.com/img/1672832362619-QVoXmNJcHa.png?width=1200)
前回みたいな光輪を作るとしたら
![](https://assets.st-note.com/img/1672834738145-DJow5BqMUX.png?width=1200)
distとmag
distは二つの座業があれば距離が測れるしGLSLにも近いが、やはりここはp5.Vectorを使ってmagとしたい
ベクトルの大きさ(長さ)を計算し、結果をfloatで返します。(これは単純に sqrt(xx + yy + z*z) という式です)。
![](https://assets.st-note.com/img/1672914522007-flSbJyt4yh.png?width=1200)
もうちょっとVectorぽく書くならsubメソッドなどを使う
![](https://assets.st-note.com/img/1672914707959-YyIXIfIde9.png?width=1200)
![](https://assets.st-note.com/img/1672914786238-PmJTB7BZct.png)
お願い致します