2021年にクリエイティブコーディングの活動での作成物を振り返ります。

Processing Advent Calendar 2021の17日目の記事になります。 adventar.org 今回はp5.jsでグリッチエフェクトを行っていきます。

クリエイティブコーディングの道標となる記事などを紹介していきます。（自分のためのメモ的な意味合いが強いです。） ここで紹介していくのは技術的な話題ではなく、 クリエイティブコーディングとの向き合い方に関する記事です。 takawo.hatenablog.com no…

function draw()というNFTコレクションにてNFTアートを販売しています。

メタバース上のグローバル文化都市「メタトーキョー」にて、 ジェネラティブアートにフォーカスした展示が開催されています！ prtimes.jp メタトーキョー、ディセントラランドで「SPACE by MetaTokyo」をオープン 日本最大級のNFTアートプロジェクト「Genera…

p5.jsでジェネラティブアートを作る時は、 random(), noise()を使うことが多いと思います。 ジェネラティブアートなのでブラウザを更新するごとに. random(), noise()の値が変わり様々な表現をしてくれます。 ただ、気に入った表現に出会ったとしても、 それ…

日本発のNFTアートであるGenerativemasksは、 先日発売した美術手帖（2021年12月号）の表紙にもなり話題となりました。 https://www.amazon.co.jp/dp/B09HNJ8QG9/ref=cm_sw_em_r_mt_dp_S6TFKDK6R6KRBENZ0110www.amazon.co.jp そんな、Generativemasksの二次…

p5.jsのWEBGLモードではGLSLを利用したshader記述することができます。 p5.jsでsetUniform()を用いることで、GLSLへp5.jsで宣言した値、変数を渡すことができます。

ローレンツ方程式 ローレンツ方程式はカオス的ふるまいを示す非線型常微分方程式の一つ ローレンツ方程式はx, y, zの3つの変数についての方程式で、3つの定数p, r, bにより振る舞いが変わる。 dx/dt = -p*(x+y) dy/dt = (r-z)*x-y dz/dt = xy-bz ローレンツ…

2021年7月にp5.jsで作った作品を選別して載せておきます。 やはり、色々なアイディアを形にしたり、思いつきで作品を派生させたりするのが楽しいです。 統一性のない作品たちですが、見返すとどれも愛着が湧いてきます。

Blenderで作成したモデルをp5.jsで読み込む方法です。

先日、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=…