Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work08

var PI = 3.141592;
var Cx, Cy;
var iters = 400;
var Esc = 100000;

function Thorn(x0, y0) {
  let x = x0;
  let y = y0;
  let i;
  for (i = 0; i < iters; i++) {
    var xx = x;
    var yy = y;
    x = xx / cos(yy * PI) + Cx;
    y = yy / (sin(xx) * sin(xx)) + Cy;

    if (x * x + y * y > Esc) {
      break;
    }
  }
  return i;
}

function setup() {
  CalcCoff();
  createCanvas(800, 800);
  background(255);
  textSize(36);
  noLoop();
  textAlign(CENTER, CENTER);
}

function CalcCoff() {
  Cx = random(-20.0, 0.5);
  Cy = random(0.0, 5.0);
}

var density;

function draw() {
  let r, g, b;

  g = 20;
  b = 60;

  let cc = 2;

  for (w = 0; w < width; w++) {
    for (h = 0; h < height; h++) {

      density = 0;

      for (ww = 0; ww < cc; ww++) {
        for (hh = 0; hh < cc; hh++) {
          x = map(w + ww / cc, 0, width,  -PI/3, PI/3);
          y = map(h + hh / cc, height, 0, 0, PI/4);

          density += 10 * Thorn(x, y);
        }
      }

      r = density;

      stroke(r, g, b);
      point(width - h, w);
    }
  }

  push();
  fill(230);
  text("Cx = " + Cx.toFixed(4), width / 2, height / 2 - 30);
  text("Cy = " + Cy.toFixed(4), width / 2, height / 2 + 30);
  pop();
}

f:id:taiga006:20200320195837j:plain

今週の作品メモ

  • 今週も、先週のPopcorn Imageに続き、ネットに転がっている有名なアルゴリズムを使って作品を作ってみよう!という感じ。
  • まず最初にやろうと思ったのが、Clifford Attractor。そう、みんな大好きCliff Pickover大先生だね。
  • が、これがなかなかうまく行かず。ってのも、ネットにゴロゴロコードが転がっているので、動かして見るところまではなんら問題ないのだがイマイチいい絵にならないというか…。あとそれなりに凝ったものをやろうとすると計算量がエグいので時間がかかるんですよね。
  • ということでCliffordは一旦お預け。
  • 次に着目したのが、Thorn Fractal。これは全然知らなかった!超かっこいい!もう今後は「好きなもの:フラクタル」って自己紹介しようかな、ってくらいこれ系統大好き。 f:id:taiga006:20200320224757p:plain (リンクにあるサイトにあったやつだよーん。)
  • 実装はこれC++ -> Processingにしました、って感じ。
  • 一応肝になっているのは、この部分。
    x = xx / cos(yy * PI) + Cx;
    y = yy / (sin(xx) * sin(xx)) + Cy;
  • もともとの論文?だとこんな式が使われていました。今回のように既存の漸化式を自分でアレンジしてみると面白いかもしれません。
X(n+1) = X(n)/cos(Yn) + Cx
Y(n+1) = Y(n)/sin(Xn) + Cy
  • (ということで、お気付きの通り、絵に引き締まりがなかったので、ごまかしとして真ん中にCx,Cyの値を載せています。)
  • これ、いざ真面目に元のC++のコードを読んで僕のp5jsのコード読むと「?」ってなる場所が1箇所あって、それはww,hhの導入してるところなんだけど、これはなくしてから一旦実行するとわかるんだけど、アンチエイリアスの役割を担っている。
  • 「え!そんなのひらめくの!天才!」ってなったかもしれないけど、ちょうどRedditにコード載せてる人を後で見つけて真似した感じ。てへぺろ
  • でも、ちゃんともとのコード読んでたからこれがすんなり理解できて嬉しかった。
  • イマイチ納得言ってないところは、色の変化。結構ネットに転がっているやつを見ると色彩豊かなんだけど、少なくともこの実装方法だとそんなアブストラクトな極彩色っぽい感じにはできなかった。誰か~。

今週の雑談

  • わーい、ノミネートされてたー! medium.com
  • ということでしれっと参加していた「NEORTリリース 1周年記念キャンペーン」で先週ちょうどこの週刊p5jsであげた作品がノミネートされました!やったね!
  • 今週むちゃくちゃささった文章。自分がAdobeソフト使いこなせない言い訳にしよ(おい)。 baku89.com
  • ちなみにagnosticのことばの意味についてはここがわかりやすい?かも。(あくまでエンジニア向けだけど。)
  • 太陽の塔」読み終わった。結構不思議な話だった。しれっとネタバレだけど、冒頭の一文と最後の一文がリンクする、「男の子ってこういうのが好きなんでしょ」100万点のフォーマットだった。
  • 「熱帯」があまりにも良すぎて、ちょっと物足りなさこそあったけれど、いい本だった。伊坂幸太郎の砂漠が東北の大学生を描いた作品なら、これはまさに京都の大学生を描いた作品だなぁ。
  • CDコンポが欲しい。次引っ越したら絶対買うぞ。

リンク