万華鏡ペイントのような何か

万華鏡ペイント。

コード

kareido

// 万華鏡ペイント

function setup() {
  createCanvas(400, 400);
  noFill();
  stroke(255);
  strokeWeight(2);

  background(0);
  translate(200,200);

  for(let i=0; i<10; i++){
    drawFigure();
    if(i%2 == 0){
      applyMatrix(1, 0, 0, -1, 0, 0);
    }else{
      rotate(-PI/5);
      applyMatrix(1, 0, 0, -1, 0, 0);
      rotate(PI/5);
    }
  }
}

function drawFigure(){
  beginShape();
  vertex(0,0);
  quadraticVertex(100,0,100,50);
  quadraticVertex(100,200,75,100);
  quadraticVertex(50,0,0,0);
  endShape();
}

実行するとこんな絵ができる：

単独のdrawFigureはこれしか描いていない：

説明

applyMatrix(1, 0, 0, -1, 0, 0)がポイント。これはx軸に関する折り返し操作である。これをrotateした状態で実行すると斜めに傾いた原点を通る直線での折り返しになる。原点を通る2本の直線で交互に折り返していくことで複製される。5と10を2以上の自然数nに対するnと2nで置き換えることで数を増やすことができる。
おわり。

補足：webglでもrotateZを使えば同じことができる。なおapplyMatrixは引数が6つの場合はx軸とy軸に関する操作がオーバーロードされているのでそのまま用いることができる。
D_5 3D