Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work05

var cnt = 4;
var colorPalletes = [
        ["#4F3A65","#574F7D","#95ADBE","#DFF0EA","#F48256"],
        ["#305F72","#F18C8E","#F0B7A4","#F1D1B5","#FFEBCF"],
        ["#303242","#394359","#F2BE8D","#BA6C65","#D88A83"],
        ["#FE5F55","#EEF5DB","#4F6367","#7A9E9F","#B8D8D8"]
    ];

function setup() {
  let c = min(800, 800);
  createCanvas(c, c);
  colorMode(RGB);
  smooth();
  angleMode(DEGREES);  
  ellipseMode(CORNER);
  strokeCap(SQUARE);
  frameRate(1);
}

function mousePressed() {
  redraw();
}

function draw() {
  background(220);

  let pallete = shuffle(colorPalletes[int(random(1,4))]);

  let margin = width/18;
  let size = width-2*margin;

  noStroke();
  fill(pallete[cnt]);
  rect(margin, margin, width-2*margin, height-2*margin);

  drawRecusion(margin, margin, size, cnt, pallete);

}

function drawRecusion(x, y, size, n, pallete) {
  
  let g = map(n, 0, cnt-1, 10, 90);
  fill(pallete[n]);

  push();
  translate(x, y);
  let q = random();
  if (q < 0.2) {
    ellipse(0, 0, size);
  }
  else if (q < 0.4) {
    beginShape();
      vertex(0,     0);
      vertex(size/2,0);
      vertex(size/2,size);
      vertex(0,     size);
      beginContour();
      vertex(size/2 * 1/5         ,size/2 * 1/5);
      vertex(size/2 * 1/5         ,size - size/2* 1/5);
      vertex(size/2 - size/2* 1/5 ,size - size/2* 1/5);
      vertex(size/2 - size/2* 1/5 ,size/2 * 1/5);
      endContour();
    endShape(CLOSE);
  }
  else if (q < 0.6) {
    beginShape();
      vertex(0,   0);
      vertex(size,0);
      vertex(size,size/2);
      vertex(0,   size/2);
      beginContour();
      vertex(size/2 * 1/5       ,size/2 * 1/5);
      vertex(size/2 * 1/5       ,size/2 - size/2* 1/5);
      vertex(size - size/2* 1/5 ,size/2 - size/2* 1/5);
      vertex(size - size/2* 1/5 ,size/2 * 1/5);
      endContour();
    endShape(CLOSE);
  }
  else if (q < 0.8) {
    beginShape();
      vertex(size/2,     0);
      vertex(0,          size);
      vertex(size,       size);
      beginContour();
        vertex(size/2,   size/5);
        vertex(size*5/6, size*7/8);
        vertex(size/5,   size*7/8);
      endContour();
    endShape(CLOSE);
  }
  else {
    beginShape();
    vertex(size/2,       size);
    vertex(0,            0);
    vertex(size,         0);
    beginContour();
      vertex(size/2,     size*4/5);
      vertex(size*5/6,   size/8);
      vertex(size/5,     size/8);
    endContour();
    endShape(CLOSE);
  }
  pop();

  if (n > 0) {
    let hs = size/2;
    let p = map(n, 0, cnt-1, 0.75, 0);
    if(random() > p) {
      drawRecusion(x,     y,    hs, n-1, pallete);
    }
    if(random() > 0.5) {
      drawRecusion(x+hs,  y,    hs, n-1, pallete);
    }
    if (random() < 0.5) {
      drawRecusion(x,     y+hs, hs, n-1, pallete);
    }
    if(random() > p) {
      drawRecusion(x+hs,  y+hs, hs, n-1, pallete);  
    }
  }
}

f:id:taiga006:20200226162459j:plain

今週の作品メモ

  • 今週は再帰を使った。
  • 正直「これやっとけばそれっぽく見えるだろ」技なのであまり多様はしたくない。
  • 当初fileter(BLUR)とかを使ってみようと思ったのだが、重いしあまり幾何学な図形を多用する作品では映えなかったので却下。あと重い。
  • その代わり、以前からどうにかしてやる方法はないのかなーと思っていた「切り抜き」をやる方法をたまたま知ることができた。
  • それがbeginContourendContourである。
  • ちゃんとコード追うとわかるけど、三角形の中の切り抜きは適当。それっぽく見える値を使っている。

今週の雑談

  • 最近つぶやく前に「あぁ、これラジオにとっておこう」みたいなことが増えてツイートすることが如実に減った。
  • Twitterはずーっと自分以外が主人公の話を聞かされる」って話を聞いて、なるほど、社会人になってしまうとTLから消えてしまったあいつやあの娘のことを頭に浮かべながらちょっと納得した。
  • 今週はラジオの企画でひたすらaikoを聴いている。普段仕事中は音楽はあまり聴かず専らradikoなのだが今週はずーっとaiko,aiko,aiko。不思議と集中力が落ちたりしない。なんなんだろうね、自分で不思議。

【宣伝】suzuriでお店出してます。この間初めて自分以外の購入者の方が!ありがとうございます。 f:id:taiga006:20200229140842p:plain:w450 よろしくおねがいしまーす。 suzuri.jp