1225

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work03

var loopCount = 40;
var colorArray = ["#BDA8AD", "#DEB3AD", "#F4EFEB", "#ECE3DA", "#ECC5C0", "#A19BA9"];
var decorationColor = 200;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(RGB);
  smooth();
  angleMode(DEGREES);  
  strokeCap(SQUARE);
  frameRate(1);
}

function grain() {
  noStroke();
  fill(decorationColor);
  for (let i = 0; i < 2000; i++) {
    ellipse(random(width), random(height), 2);
  }
}

function draw() {
  var colorPalette = shuffle(colorArray);

  let bgColor = colorPalette.pop();
  background(bgColor);

  let cx = width/2;
  let cy = height/2;

// ---------------------------------------------- //

    grain()

// ---------------------------------------------- //
  let rectColor = colorPalette.pop();
  noStroke();
  fill(rectColor);
  rect(100,         random(200,400), 20, random(100,400));
  rect(300,         random(200,400), 20, random(100,400));
  rect(500,         random(200,400), 20, random(100,400));
  rect(width - 100, random(200,400), 20, random(100,400));
  rect(width - 300, random(200,400), 20, random(100,400));
  rect(width - 500, random(200,400), 20, random(100,400));

// ---------------------------------------------- //

  noFill();

  for(let i = 1; i < loopCount/2; i++) {
    push();
    translate(cx, cy);
    drawingContext.setLineDash([]);
    stroke(decorationColor,190);
    noFill();
    strokeWeight(1);

    let startY = random(-cy*2, cy*2);
    let endY = random(-cy*2, cy*2);
    bezier(
      -width, startY, 
      -width/2, 1000*sin(2*i),
      width/2,  -500*cos(2*i),
      width, endY
    );
    bezier(
      -width + 3, startY + 3, 
      -width/2 + 3, 1000*sin(2*i) + 3,
      width/2 + 3,  -500*cos(2*i) + 3,
      width + 3, endY + 3
    );

    let startX = random(-cx*2, cx*2);
    let endX = random(-cx*2, cx*2);
    bezier(
      startX, -height, 
      1000*sin(2*i), -height/2,
      -500*cos(2*i), height/2,
      endX, height, 
    );
    bezier(
      startX + 3, -height + 3, 
      1000*sin(2*i) + 3, -height/2 + 3,
      -500*cos(2*i) + 3, height/2 + 3,
      endX + 3, height + 3, 
    );

    pop();
  }

// ---------------------------------------------- //

  let c1 = colorPalette.pop();
  let c2 = colorPalette.pop();
  for(let i = 1; i < loopCount; i++) {
    if(random() < 0.3) {
      continue;
    }

    strokeWeight(int(random(10,60)));
    let l1 = random(1,10);
    let l2 = random(1,10);
    let margin1 = random(5,20);
    let margin2 = random(5,20);

    if(random() < 0.1) {
      drawingContext.setLineDash([]);
    } else {
      drawingContext.setLineDash([l1, margin1, l2, margin2]);
    }

    let r = i * i;
    let start = random(0, 360);
    let end = random(start, start + 360);

    let rotateNum = random(0,180);

    push();
    translate(cx, cy);
    rotate(rotateNum);
    stroke(c1);
    arc(0, 0, r*0.95, r*0.95, start, end);
    stroke(c2);
    arc(0, 0, r, r, start, end);
    pop();

  }

}

f:id:taiga006:20200216145655j:plain

メモ

  • 今回のモチベは「破線書きたいな、どう書くんだろ。」
  • ググったところp5jsのレポジトリでこんなissueを発見。
  • 「p5js、というかprocessing自体には専用のメソッドはないがネイティブのsetLineDash()を使えばできるよ!」
  • できた、わーい。
  • そこから次は「vertexを使って背景を作りたいな。」
  • けれどいまいち使いこなせず、断念。
  • ここ1週間くらいTwitterのProcessing界隈ではeraseのブームが来ているが、それもなにか使おうと思ったもののネタが思いつかず、断念。
  • 結局bezier関数でお茶を濁すことにしたのだけれど、これが結構ハマった。
  • 今回は配色に頭を使いたくなかったのでココで拝借。

ということで非常に満足のいく作品が作れた。 本当はアニメーションとかさせることでもっとかっこよくできることは目に見えてるんだけど、あくまでこの取組では静止画を作っていきたいのでやりませんでした。興味ある人はコピってやってみてください。