ギンの備忘録

デジタルアートやプログラミングやテクノロジー関連のこと。

和柄

【p5.jsで和柄】まとめ

市松 七宝 鱗 青海波 網目 一の字繋ぎ 菱 矢絣 亀甲 檜垣 釘抜 紗綾形 立涌 角繋ぎ 籠目 ねじ梅 分銅繋ぎ 千鳥卍 蚊絣 麻の葉

麻の葉を描く【p5.jsで和柄】

麻の葉をp5.jsを使って描きます。 麻の葉 作例 ソースコード 麻の葉 麻の葉は正六角形を並べた文様です。 麻の葉に似ていることが名前の由来です。 作例 ソースコード const w=720; const N=8; const d=w/N; const setcol=[] setcol[0]=["#ef233c", "#fcd5ce…

蚊絣を描く【p5.jsで和柄】

蚊絣をp5.jsを使って描きます。 蚊絣 作例 ソースコード 蚊絣 蚊絣は細かい十字を並べた文様です。 蚊が鈍でいるように見えるのが名前の由来だそうです。 作例 ソースコード const w=720; const N=6; let d=w/N; let l=d/32; const setcol=[]; setcol[0] = […

千鳥卍を描く【p5.jsで和柄】

千鳥卍をp5.jsを使って描きます。 千鳥卍 作例 ソースコード 千鳥卍 千鳥卍は千鳥を図案化して、卍の字に似せた文様です。 波形の曲線を交差させた文様。 作例 ソースコード const w=720; const N=8; let d=w/N; const setcol=[]; setcol[0] = ["#00509d", "…

分銅繋ぎを描く【p5.jsで和柄】

分銅繋ぎをp5.jsを使って描きます。 分銅繋ぎ 作例 ソースコード 分銅繋ぎ 分銅繋ぎは波形の曲線を斜めに交差させた文様。 線に囲まれた桝目を、秤で使う重りの分銅に見立てている。 作例 ソースコード const w=720; const N=12; let d=w/N; const setcol=[]…

ねじ梅を描く【p5.jsで和柄】

ねじ梅をp5.jsを使って描きます。 ねじ梅 作例 ソースコード ねじ梅 ねじり梅・ひねり梅とも呼ばれ、梅の花弁を文様化したもの。 梅の花びらを捻じったような文様です。 作例 ソースコード const w=720; const N=8; const d=w/N; const l=d/32; const setcol…

籠目文様を描く【p5.jsで和柄】

籠目文様をp5.jsを使って描きます。 籠目文様 作例 ソースコード 籠目文様 籠目文様は編んだ竹の籠の網目から生じた文様です。 正三角形を上下に重ねた星型の形を連ねた文様です。 作例 ソースコード const w=720; const N=6; const d=w/N; const setcol=[] …

角繋ぎ文様を描く【p5.jsで和柄】

角繋ぎ文様をp5.jsを使って描きます。 角繋ぎ文様 作例 ソースコード 角繋ぎ文様 角繋ぎ文様は組紐にルーツを持つ文様です。 正方形を交互に連続してつなげた文様です。 作例 ソースコード const w=720; const N=12; const d=w/N; const setcol=[] setcol[0]…

立涌文様を描く【p5.jsで和柄】

立涌文様をp5.jsを使って描きます。 立涌文様 作例 ソースコード 立涌文様 立涌(たてわく)文様は一定の間隔の曲線のふくらみとへこみが交互に連続する文様です。 雲などがむくむくと「たちわく」さまに見立てて名づけられた文様です。 作例 ソースコード c…

紗綾形文様を描く【p5.jsで和柄】

紗綾形文様をp5.jsを使って描きます。 紗綾形文様 作例 ソースコード 紗綾形文様 紗綾形文様は「卍」を斜めに崩して四方に連続文様にしたもので「卍崩し」「卍繋ぎ」とも呼ばれています。 作例 ソースコード const w=720; const N=20; const setcol=[]; setc…

釘抜文様を描く【p5.jsで和柄】

釘抜文様をp5.jsを使って描きます。 釘抜文様 作例 ソースコード 釘抜文様 釘抜文様は釘を抜く時の座金を図案化した文様です。 正方形の中に小さい正方形を配して、斜めにして等間隔に並べた文様です。 作例 ソースコード const w=720; const N=10; const d=…

檜垣文様を描く【p5.jsで和柄】

檜垣文様をp5.jsを使って描きます。 檜垣文様 作例 ソースコード 檜垣文様 檜垣(ひがき)文様は檜の薄板を網代のように斜めに交互に編んだ文様です。 長方形を斜めに交互に並べた文様です。 作例 ソースコード const w=720; const N=20; const d=w/N; const…

亀甲文様を描く【p5.jsで和柄】

亀甲文様をp5.jsを使って描きます。 亀甲文様 作例 ソースコード 亀甲文様 亀甲文様は亀の甲羅を模した文様です。 正六角形を基本として、それを繋ぎ合わせた文様です。 作例 ソースコード const w=720; const N=10; const d=w/N; const setcol=[] setcol[0]…

矢絣文様を描く【p5.jsで和柄】

矢絣文様をp5.jsを使って描きます。 矢絣文様 作例 ソースコード 矢絣文様 矢絣(やがすり)文様は弓矢の矢羽根を模した文様です。 矢羽根を絣織りで表したのが名前の由来だそうです。 作例 ソースコード const w=720; const N=8; const d=w/N; const setcol…

菱文様を描く【p5.jsで和柄】

菱文様をp5.jsを使って描きます。 菱文様 作例 ソースコード 菱文様 菱文様は二方向の平行線が交差して出来た菱形を基本とする文様です。 菱の実にその形が似ている事から菱文と呼ばれるようになったそうです。 作例 ソースコード const w=720; const N=10; …

一の字繋ぎを描く【p5.jsで和柄】

一の字繋ぎをp5.jsを使って描きます。 一の字繋ぎ 作例 ソースコード 一の字繋ぎ 一の字繋ぎは横長の同じ大きさの長方体を交互に積み上げた、レンガ積みのような模様。 作例 ソースコード const w=720; const N=16; const d=w/N; const setcol=[] setcol[0]=…

網目文様を描く【p5.jsで和柄】

網目文様をp5.jsを使って描きます。 網目文様 網目文様は蛇行曲線が向いあって相接した文様です。 漁業用の網の目に見える文様です。 作例 ソースコード const w=720; const N=12; const d=w/N; const setcol=[] setcol[0]=["#3c6e71", "#d9d9d9"]; setcol[1…

青海波文様を描く【p5.jsで和柄】

青海波文様をp5.jsを使って描きます。 青海波文様 作例 ソースコード 青海波文様 青海波文様は半円形を重ねたものを鱗状に並べた文様です。 波を表した文様で、平安時代の雅楽の舞曲「青海波」が名前の由来だそうです。 作例 カラーパレット["#4267D8", "#DD…

鱗文様を描く【p5.jsで和柄】

鱗文様をp5.jsを使って描きます。 鱗文様 作例 ソースコード 鱗文様 鱗文様は正三角形あるいは二等辺三角形を上下左右に連続して配置した文様です。 三角の連なりが魚や龍、蛇の鱗に似ていることから鱗文と呼ばれるようになったそうです。 作例 ソースコード…

七宝文様を描く【p5.jsで和柄】

七宝文様をp5.jsを使って描きます。 七宝文様 作例 ソースコード 七宝文様 七宝文様は円の上に同じ大きさの円を四分の一ずつ重ね、それを並べた文様です。 光を表す菱のような形と花びらのような形の組み合わせが見えるという仕掛けになっています。 作例 ソ…

市松文様を描く【p5.jsで和柄】

和柄の中でも有名な市松文様。 この市松文様をp5.jsを使って描きます。 市松文様 作例 ソースコード 市松文様 市松は二色の四角形を交互に配した文様です。 今回は二色の正方形を用いて、市松文様を表現します。 作例 ソースコード const w=720; const N=10*…