p5.jsで正多角形を描画する関数を作成していきます。 自分でShapeを作るにはbeginShape()とvertex()とendShape()を使えば自作図形を描くことができます。 正多角形 正多角形（外周） 描画例 参考文献 正多角形 正多角形は一つの円周上に等しい角度間隔で点を…

前回までフラグメントシェーダーを中心に、p5.js で書いた図形の描画を変化させてきました。 gin-graphic.hatenablog.com 今回は頂点シェーダー（バーテックスシェーダー）を利用して、図形の位置や形を変えてみます。 GLSLで図形の変形 図形の移動 図形の拡…

p5.jsでネオンモーションを作りました。 かなり良い出来。 ずっと見てられる。 www.youtube.com

前回までは静止した描画を行ってきました。 gin-graphic.hatenablog.com 今回はp5.jsから変数を渡すことで、動的にGLSLでの描画を変化させ、動画を作りたいと思います。 シェーダー描画を動かす まとめ 参考文献 p5.jsでのシェーダー（GLSL）入門 シェーダー…

前回はp5.jsからシェーダーを呼び出して、画面全体にGLSLで描画を行いました。 gin-graphic.hatenablog.com 今回はシェーダーの適応範囲を変え、p5.jsで描画した図形を対象にしていきます。 シェーダーを図形に適用 図形を一色で塗りつぶす 図形内にGLSLで描…

「数学から創るジェネラティブアート - Processingで学ぶかたちのデザイン」という参考書を購入しました。 数学から創るジェネラティブアート ―Processingで学ぶかたちのデザイン作者:巴山 竜来発売日: 2019/04/17メディア: Kindle版 数学と芸術のつながりに…

この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコン…