p5.js
立涌文様をp5.jsを使って描きます。 立涌文様 作例 ソースコード 立涌文様 立涌（たてわく）文様は一定の間隔の曲線のふくらみとへこみが交互に連続する文様です。 雲などがむくむくと「たちわく」さまに見立てて名づけられた文様です。 作例 ソースコード c…
紗綾形文様をp5.jsを使って描きます。 紗綾形文様 作例 ソースコード 紗綾形文様 紗綾形文様は「卍」を斜めに崩して四方に連続文様にしたもので「卍崩し」「卍繋ぎ」とも呼ばれています。 作例 ソースコード const w=720; const N=20; const setcol=[]; setc…
釘抜文様をp5.jsを使って描きます。 釘抜文様 作例 ソースコード 釘抜文様 釘抜文様は釘を抜く時の座金を図案化した文様です。 正方形の中に小さい正方形を配して、斜めにして等間隔に並べた文様です。 作例 ソースコード const w=720; const N=10; const d=…
檜垣文様をp5.jsを使って描きます。 檜垣文様 作例 ソースコード 檜垣文様 檜垣（ひがき）文様は檜の薄板を網代のように斜めに交互に編んだ文様です。 長方形を斜めに交互に並べた文様です。 作例 ソースコード const w=720; const N=20; const d=w/N; const…
亀甲文様をp5.jsを使って描きます。 亀甲文様 作例 ソースコード 亀甲文様 亀甲文様は亀の甲羅を模した文様です。 正六角形を基本として、それを繋ぎ合わせた文様です。 作例 ソースコード const w=720; const N=10; const d=w/N; const setcol=[] setcol[0]…
矢絣文様をp5.jsを使って描きます。 矢絣文様 作例 ソースコード 矢絣文様 矢絣（やがすり）文様は弓矢の矢羽根を模した文様です。 矢羽根を絣織りで表したのが名前の由来だそうです。 作例 ソースコード const w=720; const N=8; const d=w/N; const setcol…
菱文様をp5.jsを使って描きます。 菱文様 作例 ソースコード 菱文様 菱文様は二方向の平行線が交差して出来た菱形を基本とする文様です。 菱の実にその形が似ている事から菱文と呼ばれるようになったそうです。 作例 ソースコード const w=720; const N=10; …
一の字繋ぎをp5.jsを使って描きます。 一の字繋ぎ 作例 ソースコード 一の字繋ぎ 一の字繋ぎは横長の同じ大きさの長方体を交互に積み上げた、レンガ積みのような模様。 作例 ソースコード const w=720; const N=16; const d=w/N; const setcol=[] setcol[0]=…
網目文様をp5.jsを使って描きます。 網目文様 網目文様は蛇行曲線が向いあって相接した文様です。 漁業用の網の目に見える文様です。 作例 ソースコード const w=720; const N=12; const d=w/N; const setcol=[] setcol[0]=["#3c6e71", "#d9d9d9"]; setcol[1…
青海波文様をp5.jsを使って描きます。 青海波文様 作例 ソースコード 青海波文様 青海波文様は半円形を重ねたものを鱗状に並べた文様です。 波を表した文様で、平安時代の雅楽の舞曲「青海波」が名前の由来だそうです。 作例 カラーパレット["#4267D8", "#DD…
鱗文様をp5.jsを使って描きます。 鱗文様 作例 ソースコード 鱗文様 鱗文様は正三角形あるいは二等辺三角形を上下左右に連続して配置した文様です。 三角の連なりが魚や龍、蛇の鱗に似ていることから鱗文と呼ばれるようになったそうです。 作例 ソースコード…
七宝文様をp5.jsを使って描きます。 七宝文様 作例 ソースコード 七宝文様 七宝文様は円の上に同じ大きさの円を四分の一ずつ重ね、それを並べた文様です。 光を表す菱のような形と花びらのような形の組み合わせが見えるという仕掛けになっています。 作例 ソ…
和柄の中でも有名な市松文様。 この市松文様をp5.jsを使って描きます。 市松文様 作例 ソースコード 市松文様 市松は二色の四角形を交互に配した文様です。 今回は二色の正方形を用いて、市松文様を表現します。 作例 ソースコード const w=720; const N=10*…
ランダムウォークの軌跡 透明度を変えたランダムウォーク 多数の図形をランダムウォーク 作例 まとめ ランダムウォークの軌跡 ランダムウォークというのは進む方向をランダムに決めて動いた時の軌跡のことです。 黒い四角形をランダムウォークさせてみます。…
p5.jsで作品を作るときに動画を作成する場合、「CCapture.js」を使用しています。 細かい使用方法は下を参考にしています。 qiita.com CCapture.jsでpng形式で画像データを書き出します。 これを元にffmpegで変換することで動画にしています。 直近でp5.js作…
p5.jsでダンボーを描く よつばと15巻が発売です。 とても嬉しく、喜ばしいことですね。 この喜びを表すためにp5.jsでダンボーを描きました。 画像を貼り付けておきます。 ダンボーの描写 関数function danbo(x, y, size, tex)でダンボーを描いています。 ダ…
p5.jsとシェーダーで手書き風エフェクトを行います。 作例 ノイズエフェクト まとめ ソースコード 参考文献 作例 まず、作例を見ていきます。 この様な形でp5.jsで描いた図形にノイズエフェクトをシェーダー(GLSL)で適用します。 その効果で、線が手で書いた…
p5.jsで作った描画に対して、色や形を変えることができたら、表現の方法が物凄く広がるはずです。 p5.jsで描いたものをテクスチャとしてシェーダー（GLSL）で扱うことで、p5.jsで作ったものにポストエフェクトをすることができます。 作例 シェーダー（GLSL…
課題 以前から、 p5.jsのWEBGLモードでのアルファ値を使った時の挙動に悩んでいました。 gin-graphic.hatenablog.com WEBGLモードでアルファ値を持ったカラーを使って描画すると、ブラウザの背景（白）がみてるんですよね。 p5.jsのbackgroundでセットした色…
p5.jsで3D図形のBoxにシェーダーを適用させてみます。 Boxの法線 Boxの各面を塗り分ける まとめ 参考文献 Boxの法線 Box（立方体）は面を6面持つ3D図形です。 それぞれの面に対して垂直方向を表すのが法線になります。 6面の面はxyzの3方向に向いており、そ…
p5.jsで自作したShapeにシェーダーを適用していきます。 自作Shapeは前回の記事で扱った正多角形を使います。 gin-graphic.hatenablog.com 自作図形にシェーダー適用 textureModeの設定 テクスチャ座標の設定 正多角形（外周）へシェーダー適用 作例 参考文…
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で描…
この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコン…
p5.jsのP2DとWebGLの透過度によって描写が異なっている様な気がします。 ブラウザ上では違いが分からないのですが、画像として保存した時に差異が顕在化しました。 比較のために半透明の四角形を明度、彩度を変えて描写したものを見てみましょう。 保存形式…
露伴先生のイメージをp5.jsで形にしました。 ヘアバンドとピアス。 ジョジョの奇妙な冒険第4部のスピンオフである、岸辺露伴は動かないがドラマ化されるみたいですね。 ドラマは12月28～30日午後10時に3夜連続で放送ということで、年末楽しみです。 ドラマ「…
ここ最近p5.jsで作った作品たち。 ジェネラティブアートというかクリエイティブコーディングという部類に当てはまる。 特に動画を作るのが面白い。 作品の中でカラフルな色使いをするのが好きみたい。 はじめはモノクロのジェネラティブアートとかを作ってみ…
