Generative Artをやってみる
ぺい / パンケーキガメProcessingを使ったGenerative Artをやってみる。
と言っても、Webにホスティングして見られるようにしたいので、Next.js製のサイトにp5.jsを使って描画して色々試してみたい。
ぺい / パンケーキガメGenerative Artに興味あるがなんもわからんので、↓の書籍で色々勉強してみる。
ただ、生のProcessingで書かれている（？）ので、p5.js用に書き換えつつ写経して色々試してみる。
ぺい / パンケーキガメTypescript + Next.js + p5.js を動かしてみる
reactのp5.jsのラッパーが色々あるっぽい？
色々記事をみると react-p5 がよく出てくるけど、deprecatedっぽい……
もう一つ react-p5-wrapper を見かけたが、これはこれで名前が @p5-wrapper/react に変わってた。ややこしい……
@p5-wrapper/react のページ的にそれなりに活発な感じはするのでこれ使っとくのがいいかな？
詳しい使い方はGithubのREADMEを見た。
READMEによると、Next.jsの場合は @p5-wrapper/next もあるのでそれも入れていく。
試した感じだと、reactの方だけだと同じものを2個レンダリングしてた(strictmodeあたりかな)ので、その辺の処理をうまいことやってくれてそう。
ぺい / パンケーキガメ
Could not find a declaration file for module @p5-wrapper/react
@p5-wrapper はTypescript製なのに型をうまいこと認識してくれなかった（なんで）
↓の引数である P5CanvasInstance は p5 本体を交差型として持っていたので、 p5 の型定義である @types/p5 を入れることでこの辺はごまかせた（根本解決じゃないと思う……）。
const sketch = (p5: P5CanvasInstance) => {
// 中略
}
ただ、 @p5-wrapper/react 自身は型エラーが出続けていた。
一旦試すという意味では動いてはいる＆コード本体部分に型はついてるから、現状仮で @ts-ignore してしまおう……。
tsconfigとかをちゃんと指定すればいいのかもだけど。
誰かこのあたりの根本解決を知ってたら教えてください。
ぺい / パンケーキガメprocessing → p5.js
書籍のサンプルをp5.jsで動かすために変更したことや、ハマったところをメモ。
ここは随時追記する。
記法とか環境の違い
| processing | p5.js | 備考 |
|---|---|---|
| size | p5.createCanvas | 第3引数に入れる P3D などは WEBGL とかでいいみたいだが、同じ描画にならなかった。2Dならp5.jsでは省略で良さそう。 |