lecture:design_with_prototyping:p5.js編:14.繰返しの再構成

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
lecture:design_with_prototyping:p5.js編:14.繰返しの再構成 [2021/03/10 18:05] – babalecture:design_with_prototyping:p5.js編:14.繰返しの再構成 [2021/03/10 18:12] (現在) – [再帰関数で描けるもの] baba
行 1: 行 1:
 {{ :lecture:design_with_prototyping:p5.js編:fractal_tree_simple_teaser_.png?nolink |}} {{ :lecture:design_with_prototyping:p5.js編:fractal_tree_simple_teaser_.png?nolink |}}
 ====== 繰返しの再構成 ====== ====== 繰返しの再構成 ======
-繰返しと言われて皆さんなにを思い浮かべるでしょうか？一般的には同じことを何度もするこを意味しているわけですが、朝昼夜、春夏秋冬、デザイン思考等など、+繰返しと言われて皆さんなにを思い浮かべるでしょうか？一般的には同じことを何度もすることを意味しているわけですが、朝昼夜、春夏秋冬、デザイン思考等など、
 繰返しとは様々なプロセスにおいて一般的に語られるプロトコルであり私達の身の回りにあふれる概念です。このページでは繰返し処理をテーマにいくつかの視覚的な表現に関するコードをスケッチしてみたいと思います。 繰返しとは様々なプロセスにおいて一般的に語られるプロトコルであり私達の身の回りにあふれる概念です。このページでは繰返し処理をテーマにいくつかの視覚的な表現に関するコードをスケッチしてみたいと思います。
  
行 126: 行 126:
 </WRAP> </WRAP>
  
 +以下はこのページのトップにある画像を生成するコードです。上記のサンプルプログラムと見比べてみてもなにか発見があるかもしれません。
 +<file js トップの画像を生成するコード.js>
 +let number = 25;
 +
 +
 +function setup() {
 +  createCanvas(1280, 720);
 +  background(0);
 +  stroke(121, 84, 56, 150);
 +  strokeWeight(1);
 +  drawBar(width / 2, height - 10, 100, PI / 2, number);
 +}
 +
 +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);
 +
 +    if (N < number / 2) {
 +      stroke(49, 226, 22, 150 - 150 * (N / number));
 +      if (random(0.0, 1.0) < 0.8) {
 +        stroke(49, 226, 22, 20);
 +        drawBar(x, y, length * random(0.6, 1.0), theta + random(PI / 8, PI / 7), N - 1);
 +      }
 +      if (random(0.0, 1.0) < 0.8) {
 +        stroke(49, 226, 22, 20);
 +        drawBar(x, y, length * random(0.6, 1.0), theta - random(PI / 8, PI / 7), N - 1);
 +      }
 +    }
 +    else {
 +      //stroke(121, 84, 56, 150 * (N / number));
 +
 +      if (random(0.0, 1.0) < 0.8) {
 +        stroke(121, 84, 56, 150 * (N / number));
 +        drawBar(x, y, length * random(0.6, 1.0), theta + random(PI / 8, PI / 7), N - 1);
 +      }
 +      if (random(0.0, 1.0) < 0.8) {
 +        stroke(121, 84, 56, 150 * (N / number));
 +        drawBar(x, y, length * random(0.6, 1.0), theta - random(PI / 8, PI / 7), N - 1);
 +      }
 +    }
 +
 +
 +  }
 +
 +}
 +
 +function keyPressed() {
 +  if (key == 's') {
 +    save('fractal_tree_simple.png');
 +  }
 +}
 +
 +</file>
  
 ====== Reference ====== ====== Reference ======
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/design_with_prototyping/p5.js編/14.繰返しの再構成.1615367123.txt.gz
  • 最終更新: 2021/03/10 18:05
  • by baba