檜垣文様を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…

最近、Blenderでモーショングラフィックスを作っています。 まだまだわからないこともあるんですが、簡単な図形の動きとかを動画にしてます。 これは丸を動かす練習で作ってみました。 背景には丸とか四角を散りばめてみたり。 色合いは気に入ってるので、こ…

課題 以前から、 p5.jsのWEBGLモードでのアルファ値を使った時の挙動に悩んでいました。 gin-graphic.hatenablog.com WEBGLモードでアルファ値を持ったカラーを使って描画すると、ブラウザの背景（白）がみてるんですよね。 p5.jsのbackgroundでセットした色…

p5.jsで3D図形のBoxにシェーダーを適用させてみます。 Boxの法線 Boxの各面を塗り分ける まとめ 参考文献 Boxの法線 Box（立方体）は面を6面持つ3D図形です。 それぞれの面に対して垂直方向を表すのが法線になります。 6面の面はxyzの3方向に向いており、そ…

以前から気になっていたBlenderに入門してみました。 少し前に触り始めて、最近ようやく慣れてきて形になるものを作れるようになってきました。 特にBlenderでのモーションというか、動画の作成はキーフレームによる制御になるので、その感覚に慣れる時間が…

p5.jsで自作したShapeにシェーダーを適用していきます。 自作Shapeは前回の記事で扱った正多角形を使います。 gin-graphic.hatenablog.com 自作図形にシェーダー適用 textureModeの設定 テクスチャ座標の設定 正多角形（外周）へシェーダー適用 作例 参考文…