先日、twitterのタグで #2021年自分が選ぶ今年上半期の4枚 といいうものがあり、 自分でもやってみました。 今年の6月までの間にp5.jsで作った作品の中から4つを選び出してみました。 #2021年自分が選ぶ今年上半期の4枚 良い機会なので、自分のために振り返…
ポケモンのモンスタボールをp5.jsで描きました。 シンプルに円と線で描けます。 最近は和柄を描いていたので、その影響でモンスターボールを並べて柄っぽくしています。 色合いは赤と緑をそれぞれ作ってみたした。 結構良い出来です。満足。
色々なアイテムを作れるsuzuriを初めてみました。 suzuri.jp 自分がp5.jsで作った作品を何か形にしたいと思いました。 まずは自分で購入したいものを作って、買ってみます。 長袖Tシャツは単純に欲しいんだけど、suzuriのやつは袖口が締まるってるタイプみた…
p5.jsで和柄を描き始めて20個になりました。 gin-graphic.hatenablog.com 始めたきっかけは和柄への興味から、和柄の種類を調べている内に、 和柄の幾何学的な部分とクリエイティブ・コーディングと相性が良さそうだと思ったからです。 深く考えず、興味ある…
市松 七宝 鱗 青海波 網目 一の字繋ぎ 菱 矢絣 亀甲 檜垣 釘抜 紗綾形 立涌 角繋ぎ 籠目 ねじ梅 分銅繋ぎ 千鳥卍 蚊絣 麻の葉
麻の葉をp5.jsを使って描きます。 麻の葉 作例 ソースコード 麻の葉 麻の葉は正六角形を並べた文様です。 麻の葉に似ていることが名前の由来です。 作例 ソースコード const w=720; const N=8; const d=w/N; const setcol=[] setcol[0]=["#ef233c", "#fcd5ce…
蚊絣をp5.jsを使って描きます。 蚊絣 作例 ソースコード 蚊絣 蚊絣は細かい十字を並べた文様です。 蚊が鈍でいるように見えるのが名前の由来だそうです。 作例 ソースコード const w=720; const N=6; let d=w/N; let l=d/32; const setcol=[]; setcol[0] = […
千鳥卍をp5.jsを使って描きます。 千鳥卍 作例 ソースコード 千鳥卍 千鳥卍は千鳥を図案化して、卍の字に似せた文様です。 波形の曲線を交差させた文様。 作例 ソースコード const w=720; const N=8; let d=w/N; const setcol=[]; setcol[0] = ["#00509d", "…
分銅繋ぎをp5.jsを使って描きます。 分銅繋ぎ 作例 ソースコード 分銅繋ぎ 分銅繋ぎは波形の曲線を斜めに交差させた文様。 線に囲まれた桝目を、秤で使う重りの分銅に見立てている。 作例 ソースコード const w=720; const N=12; let d=w/N; const setcol=[]…
ねじ梅をp5.jsを使って描きます。 ねじ梅 作例 ソースコード ねじ梅 ねじり梅・ひねり梅とも呼ばれ、梅の花弁を文様化したもの。 梅の花びらを捻じったような文様です。 作例 ソースコード const w=720; const N=8; const d=w/N; const l=d/32; const setcol…
籠目文様をp5.jsを使って描きます。 籠目文様 作例 ソースコード 籠目文様 籠目文様は編んだ竹の籠の網目から生じた文様です。 正三角形を上下に重ねた星型の形を連ねた文様です。 作例 ソースコード const w=720; const N=6; const d=w/N; const setcol=[] …
角繋ぎ文様をp5.jsを使って描きます。 角繋ぎ文様 作例 ソースコード 角繋ぎ文様 角繋ぎ文様は組紐にルーツを持つ文様です。 正方形を交互に連続してつなげた文様です。 作例 ソースコード const w=720; const N=12; const d=w/N; const setcol=[] setcol[0]…
立涌文様を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…
