📐円の方程式の疑似コード

短いのはわかったが、制約も多いし、わかりづらい

一旦、同じようにグラフィックのかけるp5.jsで、同様の処理をすることを念頭におきましょう。ざっくりは３通りぐらい方法は考えられ

・circleとかellipseなどを使う
・sin/cosにrかけてpointとかで描画
・１ドットごとにエクスタシーな処理

最初のは簡単すぎるので、リファレンスのリンクをはるにとどめます

・sin/cosにrかけてpointとかで描画

こんな感じです

https://editor.p5js.org/setapolo/sketches/-V02QRwCs　適当に+45としましたがこのあたりmouseXとかいれてもらって

GLSLと何が違うのか？

物理的なイメージは、p5.jsでやっているのはコンパスとかr長の糸を中心点からぐるぐる回しているイメージであるが、GLSL（というか円の方程式の場合は、その線はあくまで境界線でしかなく、しらみつぶしに、円の領域か否か、調べるイメージ。

疑似的にフラグメントシェー

こんな感じっす

p5.js Web Editor

簡単なように見えて99x99なので9801回点を打っていることになります。
なんとか減らせないか？　なくはないですが、こんな感じですかね

99x99のマトリクスの中に3x3ドットの円を描画しています。こうすると計算量としては９分の１になる想定です。適度にまびきながらやりますが、あくまでGPU想定の疑似コードなので、実用性がでてくるのは五年後くらいでしょう。

p5.js Web Editor

前回みたいな光輪を作るとしたら

こうなるかな

p5.js Web Editor

distとmag

distは二つの座業があれば距離が測れるしGLSLにも近いが、やはりここはp5.Vectorを使ってmagとしたい

ベクトルの大きさ(長さ)を計算し、結果をfloatで返します。(これは単純に sqrt(xx + yy + z*z) という式です)。

https://p5js.org/reference/#/p5.Vector/mag

円の大きさなどは自分で調整してみよう　https://editor.p5js.org/setapolo/sketches/z5koSBK53

もうちょっとVectorぽく書くならsubメソッドなどを使う

このあたりGLSLとなら演算式ですむので、式からメソッドチェーンにするのがめんどいというのが事の発端になっている。

https://amzn.to/3Zh42Xx