Processing Advent Calendar 2023 の20日目の記事になります。 今回はカオスゲームという方法を用いてフラクタルな図形を描いていきます。 カオスゲームとは 三角形を使ったカオスゲーム 原理 多角形のカオスゲーム カオスゲームに追加制約 カオスゲームにノ…

Processing Advent Calendar 2022の20日目の記事になります。 adventar.org

目次 はじめに de Jong アトラクター de Jong アトラクターの自動生成プログラム 使い方 探索失敗閾値 画像自動保存 ループ 描画 ID おわりに

2022年2月にAltEdu2022に参加しました。 AltEdu2022はPCD Tokyo主催で実施されたコーディングチャレンジです。

個人的に点でジュネラティブアートを作る手法が好きで良く使っています。 その方法を簡単に説明していきたいと思います。 点描ジュネラティブアートでかっこいい作品を作っていきましょう。

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

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

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

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]…