フラクタルツリーの3D版。長かったけど、2Dのアルゴリズムが作れるとあとは次元を1つ増やして3Dにするだけとも言えるのでそれほど難度を感じなかった。ツリーっぽい形にしたかったのでLeafの生成のところの初期値を山形になるように変更した。 今頃台風来て…

昨日は飲んでからプログラムを書いたので、樹形を描画する部分の処理の一部が抜けた分、描画が進まない状態だった。改めて確認して修正したものをアップする。OpenProcessingでは動かなかったので、GIFで。 Tree tree; float min_dist = 5; float max_dist =…

コード Tree tree; float min_dist = 15; float max_dist = 5; void setup() { size(960, 540); colorMode(HSB, 360, 100, 100, 100); tree = new Tree(); } void draw() { background(0, 0, 33); tree.draw(); tree.grow(); } class Tree { ArrayList<Branch> branc</branch>…

最近のYoutube、字幕の自動生成が精度が高くて英語が聞き取りやすい。動画の中で言っている L-System is a recursive way of generating sentences over and over again using string replacement. が今回の肝っぽい。特定の文字列を置き換えることを再帰的…

前回の続き。p5.jsで書かれているものを見ながらProcessingで、クラスベースで書くという感じ。葉っぱも最後に落ちるようになっていたものもクラスに定義して書いてみたくらい。クリックすると枝が増えて、所定回数以上になると葉っぱが落ちるようなもの。Op…

再帰（リカーシブ）関数による樹木の描画。再帰は最初の頃、イメージつかめなかったけど、作った関数Aが関数A自体を所定の条件の中で呼び出すというもの。これだとbranchという関数が実行されて、基準となる原点座標を移動させながら枝分かれするように2つの…

www.openprocessing.org 反応拡散系のアルゴリズム。グレイ・スコット方程式を使う。使う、とか言ってるけど分かってるわけではない。数式化されてるアルゴリズムをプログラムに組み込む訓練だと思ってやってる。以前やった迷路ジェネレータもそう。 動画見…

数式を使って描画する方向では、ローレンツ・アトラクターは結構有名。 ローレンツ方程式 - Wikipedia The Lorenz Attractor, a thing of beauty 上のPaul Bourkeさんが書いてるエントリに載っているCでの実装をProcessingでポーティングしたような感じ。例…

やったやつ上げ忘れていたのであげておく。OpenProcessing用にp5.jsに移植しようと思ったけどWEBGLのレンダラだとTRIANGLE_STRIPが使えなかったのでおあずけ。GIFで。 コード int w, h, rows, cols; int scale = 20; float[][] terrain; // setup関数 : 初回…

勢いでパート3と4を見て一気に書いてしまった。改変したところは、上下左右の壁面境界の判定、迷路が完成したところでsaveFrameすること、マウスクリックで初期化すること、色を毎回変えていることあたり。 こんな感じの迷路が生成される。 コード float col…

昨日の続きで、迷路ジェネレータをProcessingで書く。途中なのでそんなに面白くはないけど、書いてる側は結構面白い。 アルゴリズムは再帰的バックトラック法ってやつを使うらしい。アクティブなセルを紫にしていて、セルごとに通過したかどうかを真偽値でチ…

p5.jsで書かれていたものをProcessingで書いてみた。なんとなく。先取りして迷路作るところまで行けた。グリッドに切り分けたセルごとに、上下左右の４つの壁を設定して、Booleanで壁があるかないかをプロパティで持たせてる。変数名とかは自分がわかりやす…

昨日の3Dの続き、テクスチャを球体にマッピングする方法。PShape使うのは知らなかった。応用効きそう。どっちかというとマッピングするテクスチャ画像の用意のほうが大変か。 複数のファイルの名前を意識しないで読み込むやりかたは、以前hysyskがやっていた…

3D版はPeasyCamという3Dの視点移動のライブラリが使われてたりして改変しづらい。OpenProcessingだと動作しないし。仕方ないのでGIF貼る。 via GIPHY import peasy.*; import peasy.org.apache.commons.math.*; import peasy.org.apache.commons.math.geomet…

そんなに書き換えなかった。今回2Dで次回が3Dなのでそっちを頑張る感じ。 Planet sun; // setup関数 : 初回1度だけ実行される void setup() { size(960, 540); // ウィンドウサイズを960px,540pxに colorMode(HSB, 360, 100, 100, 100); // HSBでの色指定に…

Mitosisは有糸分裂、細胞分裂のことっぽい。マウスでクリックするとセル（細胞）が分裂するというもの。p5.jsで書いているのを観てProcessingで書くのをリアルタイムでやってみるけど、意外とフムフムと考えながらやれるのは良い。それがprocessing.jsで動く…

スペースインベーダーのチュートリアル。マウスをクリックしてスタート。左右の矢印キーで母艦を動かしてスペースキーで射撃する。 ビデオではp5.jsでやってたけど気まぐれでProcessingでやった。クラスのプロパティも多少書き換えたりしてみた。ビデオの中…

パラメータにY方向の重力以外にも、X方向の風を追加した。あと矢印にしたら逆に雨ではなくなった。マウスで重力と風を制御出来る。 int num = 500; Drop[] drops = new Drop[num]; void setup() { size(960, 540); colorMode(HSB, 360, 100, 100, 100); for …

スネークゲーム。チュートリアルではを矢印キーで動かすものだったが、操作するの面倒だったので、が自動で餌を追従するようにプログラムを書き換えた。気分を変えようとp5.jsで書いてみた。 var snake; var scl = 10; var food; function setup() { createC…

コードを写しながら解説を聴く感じ。x,y,zで-1から1の範囲で繰り返して、それを元に座標計算をする流れは新鮮だった。内容としては完成したものを自分なりの書き方に書き換えた他、座標ごとに個別で回転や世代のループ、視点移動させるなどしている。 ArrayL…

Daniel Shiffmanはクリエイティブコーディングのバイブル「Nature of Code」の著者として知られている。それ以外にも、Processing/p5.jsのチュートリアル動画をYoutubeに多数公開している。その量たるや膨大で、どれも観ていてわかりやすく面白い。学生にと…