【週刊p5js】work11

var pal = ['#20222f','#20222f','#20222f','#1a1f56','#2c1e7d','#0134aa','#0060e8','#0297fb','#00befa','#83def3','#d1ecf7','#f2f6f9','#f2f6f9','#f2f6f9','#fce503','#fe6d02','#e7011d','#4b0f31'];
var gray_pal = ['#080808','#181818','#383838','#404040','#505050','#696969','#787878','#989898','#B0B0B0','#C8C8C8','#D3D3D3','#E8E8E8','#F5F5F5','#FFFFFF'];
var x_offset, y_offset, scale;

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  ellipseMode(CENTER);
  textAlign(CENTER);
  noStroke();
  noLoop();

  textFont("Comfortaa");
  textSize(20);

  drawingContext.shadowBlur = 10;
  drawingContext.shadowOffsetY = 2;
  drawingContext.shadowColor = "#000000";


  x_offset = width * 0.12;
  y_offset = height * 0.1;
  scale = 18;
}

function mouseClicked() {
  clear();
  redraw();
}

function draw() {
  background(240, 245, 250);
  let startXArr = [];
  let startYArr = [];

  for (let x = x_offset; x <= width - x_offset; x += scale) {
    append(startXArr, x);
  }
  for (let y = y_offset * 4; y <= height - y_offset * 4; y += scale) {
    append(startYArr, y);
  }

  grain(5000);

  let palette = pal;
  for (let i in startXArr) {
    let startY = y_offset + scale * int(random(-2, 2));
    let num = int(random(scale * 1.5, scale * 1.8));
    let offset = int(i % palette.length);
    let offsetRnd = random();
    if (offsetRnd < 0.7) {
      offset += int(random(-2, 2));
    } else if(offsetRnd < 0.9) {
      offset = 0;
    } 
    drawGradBar(startXArr[i], startY, num, offset, palette);

  }

  palette = gray_pal;
  let HorizontalBar_num = random(4, 8);
  for (let i = 0; i < HorizontalBar_num; i++) {
    let sX = startXArr[int(random(0, startXArr.length * 3 / 5))];
    let sY = startYArr[int(random(0, startYArr.length))];
    drawGrayBar(sX, sY, int(random(8, 12)), palette);
  }

  fill(10);
  text("■ Inspired by Felipe Pantone", width / 2, height * 16 / 17);

}

function drawGradBar(_x, _startY, _num, _offset, _pal) {
  let y = _startY;
  let idx = _offset;
  for (let i = 0; i < _num; i++) {
    y = _startY + i * scale;
    if (idx < _pal.length - 1) {
      idx += 1;
    } else {
      idx = 0;
    }
    let cd = _pal[idx];
    fill(cd);
    if(random() < 0.98) {
      rect(_x, y, scale, scale);
    } else {
      push();
      translate(_x, y);
      rotate(45);
      rect(0, 0, scale, scale);
      pop();
    }
  }
}

function drawGrayBar(_startX, _y, _num, _pal) {
  let x = _startX;
  let idx = 0;
  for (let i = 0; i < _num; i++) {
    x = _startX + i * scale;
    if (idx < _pal.length - 1) {
      idx += 1;
    } else {
      idx = 0;
    }
    let cd = _pal[idx];
    fill(cd);
    rect(x, _y, scale, scale);
  }
}

function grain(_n) {
  for (let i = 0; i < _n; i++) {
    let c = color(random(30, 50), 30);
    let x = random(1) * width;
    let y = random(1) * height;
    let w = random(5, 50);
    let h = random(1);
    noStroke();
    fill(c);
    ellipse(x, y, w, h);
  }
}

今週の作品メモ

• 最近、平日の仕事終わりにネタを探す時間ができた。
• 水曜くらいにこの記事を見てスペイン人アーティストFelipe Pantoneを知る。
• 彼のこの独特なグラデーションは、Avant-garde Graffitiと呼ばれているらしい。
• すごく惹かれるものがあったので作品に取り入れることに。結構実装もシンプル。
• 彼のインスタグラムにたくさん作品が載っているので気になる人は要チェック！
• 今週の一言。

  drawingContextはp5js界隈における「味覇」。

  — ayato (@dn0t_) 2020年4月11日

• ということでdrawingContextしたver置いておきますね。

• （ちょっとどぎついですね。）

今週の雑談

• vvvv gamma が出たと聞いてから「やってみよう、やってみよう」と思いつつ中々手を出せていなかったので初挑戦。
• とりあえず公式が出したチュートリアルは完走。（と言ってもまだ３本。）

  きょうの #vvvv pic.twitter.com/04tHipnc3a

  — ayato (@dn0t_) 2020年4月6日

• 歴史が古いソフトだからチュートリアルおじさんとしては苦労しないなぁ～（フラグ）
• と思っていたら全然そんなことなかった。addonpackやらなんやら入れないとできないことが多かった。
• 「ぷふぇ～」ってなっていたら、どうやらcablesがvvvvリスペクトなツールであることを知る。
• ということで今度はcablesをやってみることにする。（まだ国内だとほんとにユーザ少なそう。）
• ところで全然関係ないけど、今週から始まった映像研のドラマめっちゃよくないですか？え、わたしだけ？そんなことない？齋藤飛鳥のくどい演技すごい好きなんですけど。
• 「波よ聞いてくれ」のアニメは微妙でした。

今週のラジオ

• 今週は通常回ということで、一連のコロナ騒動についてボク個人が思っていることを話しました。
• なんか、最近Twitterで発言するよりもラジオで発言するほうが楽しいし、気が楽だし、ちゃんと聴いてくれている人には伝わってるんじゃないかなーという安心感がある。
• これもわたしだけ？