差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:14.グリッドの再構成 [2021/03/10 14:06] – baba
+++ lecture:design_with_prototyping:p5.js編:14.繰返しの再構成 [2021/03/10 18:05] – baba
@@ 行 1: / 行 1: @@
-====== Composition ======
+{{ :lecture:design_with_prototyping:p5.js編:fractal_tree_simple_teaser_.png?nolink |}}
+====== 繰返しの再構成 ======
+繰返しと言われて皆さんなにを思い浮かべるでしょうか？一般的には同じことを何度もするこを意味しているわけですが、朝昼夜、春夏秋冬、デザイン思考等など、
+繰返しとは様々なプロセスにおいて一般的に語られるプロトコルであり私達の身の回りにあふれる概念です。このページでは繰返し処理をテーマにいくつかの視覚的な表現に関するコードをスケッチしてみたいと思います。
+===== Composition =====
 ピエト・モンドリアンの作品の中で最も有名とも言える，Compositionという作品群があります．
 >ピエト・モンドリアン（ピート・モンドリアン、Piet Mondrian、本名ピーテル・コルネーリス・モンドリアーン Pieter Cornelis Mondriaan 1872年3月7日 - 1944年2月1日）は19世紀末-20世紀のオランダ出身の画家。ワシリー・カンディンスキー、カジミール・マレーヴィチらと並び、本格的な抽象絵画を描いた最初期の画家とされる。 出典: フリー百科事典『ウィキペディア（Wikipedia）』
@@ 行 77: / 行 82: @@
 上記プログラムを参考にして，様々なCompositionを作成してみましょう．
-==== 再帰関数で描けるもの ====
+===== 再帰関数で描けるもの =====
-さて、このような再帰関数的生成手法は近代的な絵画だけではなく、自然界にも多く存在していると言われています。このような考え方はフラクタルやカオスなどと呼ばれ、繰り返し決まった処理を行いつつも、繰り返す中で微妙なパラメータが変化し、結果として興味深い出力結果になるといったものです。その中でも有名なフラクタル図形の木を実際にコーディングしてみましょう。手続きは次のとおりです。
+{{ :lecture:design_with_prototyping:p5.js編:fractal_tree.gif?nolink |}}
-  - 直線を描く
+さて、このような再帰関数的生成手法は近代的な絵画だけではなく、自然界にも多く存在していると言われています。このような考え方はフラクタルやカオスなどと呼ばれ、繰り返し決まった処理を行いつつも、繰り返す中で微妙なパラメータが変化し、結果として興味深い出力結果になるといったものです。その中でも有名なフラクタル図形の木を実際にコーディングしてみましょう。上図に描いているようなプログラムを目指します。手続きは次のとおりです。
+  - 任意の座標から直線を描く
+  - 直線の一端で、２つの方向に角度を決定する。任意の座標はその一端のx,y座標に変更する
+  - 上記を繰り返す
+上記流れを理解した上で、プログラムを記述するために必要な具体的な部分も決めて、実際の流れを以下のようにします。
+  - 座標（width/2, height-10）の一から、真上に向かって直線を100pxだけ描画する
+  - 描いた直線の一端座標（width/2 + 100*cos(PI/2), height-10 - 100*sin(PI/2)）の位置から任意の角度PI/4だけそれぞれ右と左にずらした直線を描く
+  - 上記を繰り返す
+では実際に記述してみます。
+<WRAP group>
+<WRAP half column>
+<file js sketch.jg>
+function setup() {
+  createCanvas(500, 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);
+  }
+}
+</file>
+</WRAP>
+<WRAP half column>
+{{ :lecture:design_with_prototyping:p5.js編:fractal_tree_simple.png?nolink |}}
+</WRAP>
+</WRAP>
+<WRAP center round todo 60%>
+html上のUIを利用して、反復回数や、lengthの減衰値、角度などを動的に変化させて生成される木の種類を観察してみましょう。
+</WRAP>