差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:14.グリッドの再構成 [2021/03/10 13:44] – baba | lecture:design_with_prototyping:p5.js編:14.繰返しの再構成 [2021/03/10 18:05] – baba | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== | + | {{ : |
+ | ====== | ||
+ | 繰返しと言われて皆さんなにを思い浮かべるでしょうか?一般的には同じことを何度もするこを意味しているわけですが、朝昼夜、春夏秋冬、デザイン思考等など、 | ||
+ | 繰返しとは様々なプロセスにおいて一般的に語られるプロトコルであり私達の身の回りにあふれる概念です。このページでは繰返し処理をテーマにいくつかの視覚的な表現に関するコードをスケッチしてみたいと思います。 | ||
+ | |||
+ | ===== Composition | ||
ピエト・モンドリアンの作品の中で最も有名とも言える,Compositionという作品群があります. | ピエト・モンドリアンの作品の中で最も有名とも言える,Compositionという作品群があります. | ||
> | > | ||
行 24: | 行 29: | ||
===== プログラム ===== | ===== プログラム ===== | ||
{{ : | {{ : | ||
- | <file .pde mondorian.pde> | + | < |
/* | /* | ||
Reference: https:// | Reference: https:// | ||
*/ | */ | ||
- | + | ||
- | int N = 2; // Number of recursive steps | + | let number |
+ | |||
+ | //Draw the first image | ||
+ | function setup() { | ||
+ | createCanvas(500, | ||
+ | piet(1, 1, 500, 500, number); | ||
+ | } | ||
// Draw a Mondarian-inspired image using recursion | // Draw a Mondarian-inspired image using recursion | ||
- | void piet(int x0, int y0, int x1, int y1, int N) { | + | function |
if (N == 0) { | if (N == 0) { | ||
// Base case -- draw a colorful rectangle with a thick black border | // Base case -- draw a colorful rectangle with a thick black border | ||
- | | + | |
- | | + | |
fill(c[int(random(c.length))]); | fill(c[int(random(c.length))]); | ||
stroke(0); | stroke(0); | ||
strokeWeight(sw); | strokeWeight(sw); | ||
rect (x0, y0, x1-x0, y1-y0); | rect (x0, y0, x1-x0, y1-y0); | ||
+ | return; | ||
} else { | } else { | ||
//Recursive step -- recursively break the current rectangle into 4 new random rectangles | //Recursive step -- recursively break the current rectangle into 4 new random rectangles | ||
- | | + | |
- | | + | |
piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle | piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle | ||
piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle | piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle | ||
piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle | piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle | ||
piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle | piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle | ||
+ | return; | ||
} | } | ||
- | save(" | + | |
} | } | ||
+ | |||
// keep draw() here to continue looping while waiting for keys | // keep draw() here to continue looping while waiting for keys | ||
- | void draw() { | + | function |
} | } | ||
+ | |||
//Draw a new image each time a key is pressed | //Draw a new image each time a key is pressed | ||
- | void keyPressed() { | + | function |
background(0); | background(0); | ||
- | piet(1, 1, 500, 500, N); | + | piet(1, 1, 500, 500, number); |
} | } | ||
+ | |||
+ | |||
- | //Draw the first image | ||
- | void setup() { | ||
- | size(500, 500); | ||
- | piet(1, 1, 500, 500, N); | ||
- | } | ||
</ | </ | ||
==== 練習 ==== | ==== 練習 ==== | ||
上記プログラムを参考にして,様々なCompositionを作成してみましょう. | 上記プログラムを参考にして,様々なCompositionを作成してみましょう. | ||
+ | |||
+ | ===== 再帰関数で描けるもの ===== | ||
+ | {{ : | ||
+ | さて、このような再帰関数的生成手法は近代的な絵画だけではなく、自然界にも多く存在していると言われています。このような考え方はフラクタルやカオスなどと呼ばれ、繰り返し決まった処理を行いつつも、繰り返す中で微妙なパラメータが変化し、結果として興味深い出力結果になるといったものです。その中でも有名なフラクタル図形の木を実際にコーディングしてみましょう。上図に描いているようなプログラムを目指します。手続きは次のとおりです。 | ||
+ | - 任意の座標から直線を描く | ||
+ | - 直線の一端で、2つの方向に角度を決定する。任意の座標はその一端のx, | ||
+ | - 上記を繰り返す | ||
+ | |||
+ | 上記流れを理解した上で、プログラムを記述するために必要な具体的な部分も決めて、実際の流れを以下のようにします。 | ||
+ | - 座標(width/ | ||
+ | - 描いた直線の一端座標(width/ | ||
+ | - 上記を繰り返す | ||
+ | |||
+ | では実際に記述してみます。 | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file js sketch.jg> | ||
+ | function setup() { | ||
+ | createCanvas(500, | ||
+ | background(250); | ||
+ | drawBar(width / 2, height - 10, 100, PI / 2, 8); | ||
+ | } | ||
+ | |||
+ | function drawBar(x0, y0, length, theta, N) { | ||
+ | if (N > 0) { | ||
+ | let x = x0 + length * cos(theta); | ||
+ | let y = y0 - length * sin(theta); | ||
+ | line(x0, y0, x, y); | ||
+ | drawBar(x, y, length * 0.8, theta + PI / 8, N - 1); | ||
+ | drawBar(x, y, length * 0.8, theta - PI / 8, N - 1); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | {{ : | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP center round todo 60%> | ||
+ | html上のUIを利用して、反復回数や、lengthの減衰値、角度などを動的に変化させて生成される木の種類を観察してみましょう。 | ||
+ | </ | ||
行 76: | 行 130: | ||
* Codebox: Explore Recursion with Processing | * Codebox: Explore Recursion with Processing | ||
* https:// | * https:// | ||
+ | * [Processign] 木のフラクタル図形を作成してみよう! | ||
+ | * https:// | ||