miku

Steam, Kindle, ディズニープラス, アマプラ, TypeScript, JavaScript, Python, Go, Blender, グラフィックス全般。

[miku @BaroqueEngine]

クリエイティブコーディングの教科書｜miku https://t.co/j4pKusGhCt #zenn

[miku @BaroqueEngine]

書きました。

意図的に雑な図形をコードで描く｜miku https://t.co/jIk9npBV7f #zenn #p5js #typescript

[miku @BaroqueEngine]

2次ベジェ曲線のバウンディングボックスを求める｜miku https://t.co/6Bxb8jIspS #zenn #p5js #typescript

[miku @BaroqueEngine]

#p5js #typescript
2次ベジェ曲線は(1-t)^2⋅p0+2⋅(1-t)⋅t⋅p1+t^2⋅p2という2次関数で表現できるから、これを微分してt=の形に持っていけば、頂点に対応するtの値が分かり、バウンディングボックスの範囲が計算できることを勉強したので、さっそくコードに落としてみた。

[miku @BaroqueEngine]

PixiJSでリサイズと回転が可能な描画オブジェクトを作る｜miku https://t.co/N4jSfxCx5A #zenn #pixijs #typescript

[miku @BaroqueEngine]

#pixijs #typescript
PixiJSの練習も兼ねて、リサイズと回転ができるオブジェクトを作ってみたけど、右下を動かしているのに左側が動いたり、回転した状態だとリサイズが変になったりと想像以上に難しくて色々と勉強になった。

[miku @BaroqueEngine]

#threejs #webgl
周期的に膨張と収縮を繰り返すパーティクル群。

[miku @BaroqueEngine]

#p5js #typescript
Gitのブランチを見て思い浮かんだアニメーションをコードで書いた。

[miku @BaroqueEngine]

#p5js #typescript
グリッド+グラデーションのシンプル系。

[miku @BaroqueEngine]

#p5js #typescript
再帰的に矩形分割を行うことで領域を幾つか作り、それぞれの領域内からはみでることがないように棒状のパーティクルを移動させる。

[miku @BaroqueEngine]

@reona396 ありがとうございます😀

アルゴリズムは二次元配列のマップを用意して道を掘り進める、のような迷路生成のアルゴリズムに近い形になります。

[miku @BaroqueEngine]

#p5js #typescript
線同士がぶつからないように線を伸ばしていき、分岐点と行き止まりに円を描画する。

[miku @BaroqueEngine]

#p5js #typescript
跳ねるボールをコードで表現する。

[miku @BaroqueEngine]

https://t.co/r3xzsjLgGB
読了。土日ずっとこの本読みながら写経してた。

[miku @BaroqueEngine]

そろそろNext.jsやるかあと思って、素のReactでできてる自サイトをNext.jsにざっと置き換えたら、[id].tsxページの直リンク（リロード）が404になってしばらく困っていたけど、getStaticPathsでid指定すると自動で個別にindex.html配置してくれるって仕組みなのね…。直ってやっとすっきりした。

[miku @BaroqueEngine]

#p5js #typescript #webgl #glsl
ピクセルに絵の具のような粘度を持たせて、それを箸で引っ張ったり渦を巻いたりすることができる。

[miku @BaroqueEngine]

#p5js #typescript #webgl #glsl
前にツイートした、円を描画する際、元々そこにあるピクセルが外側に押し出されるコードを改良したのでジャギーがかなり軽減された。あと、WebGLの勉強も兼ねてコードの大部分をGLSLで書き直したらめっちゃ高速化した。

[miku @BaroqueEngine]

#p5js #typescript
円を描画する際、もともとその領域にあったピクセルの色が自然と円の外に押し出されるようにする。

[miku @BaroqueEngine]

@kaku_suke_33 そうですね、再帰処理で最大10回まで分割しますが、各四角形の大きさをバラバラにしたいので、ランダムな確率で再帰の途中で再帰を打ち切る処理も入れています。

[miku @BaroqueEngine]

#p5js #typescript
矩形分割をする際に、パーリンノイズで分断位置を決めるとどうなるかの実験。

[miku @BaroqueEngine]

@kaku_suke_33 今縦に切って新しくできた2つの四角形から更に再帰的に横・縦・横・縦・・・と分割していきます。

上記の処理と、各四角形が持つ2つのノイズの値を増やし続ける処理を毎フレーム行うと、該当動画のような動きになります。

色は3色の値をランダムに適用しているだけです。

[miku @BaroqueEngine]

@kaku_suke_33 1つの四角形に2つのノイズ値（パーリンノイズ関数に指定する引数の値）を割り当てており、たとえば四角形を縦に切る場合、その四角形の上辺と下辺のどこから切るかを2つのノイズ値から得られるパーリンノイズの値(0～1)で決めて縦に分断します。（続く）