【週刊p5js】work02

function setup() {
  colorMode(RGB);
  angleMode(DEGREES);

  textFont("Sawarabi Mincho");
  
  createCanvas(windowWidth, windowHeight);
  pixelDensity(2);
  frameRate(1);
}

function mousePressed() {
  resizeCanvas(windowWidth, windowHeight);
  redraw();
}

function grain() {
  noStroke();
  fill(255);
  for (let i = 0; i < 1000; i++) {
    ellipse(random(width), random(height), 1);
  }
}

function draw() {

  var bgColor1 = ConvertColorcode2RBG('#FD6585');
  var bgColor2 = ConvertColorcode2RBG('#0D25B9');
  var graColor3 = ConvertColorcode2RBG('#FFA8A8');
  var graColor4 = ConvertColorcode2RBG('#FCFF00');
  var graColor5 = ConvertColorcode2RBG('#F6D242');
  var graColor6 = ConvertColorcode2RBG('#FF52E5');
  var graColor7 = ConvertColorcode2RBG('#E288F9');
  var graColor8 = ConvertColorcode2RBG('#FFC988');

  setGradientBG(bgColor1, bgColor2);

  noFill();
  stroke(200,200,200,200);
  ellipse(width/2, height/2, width*.7);
  ellipse(width/2, height/2, width*.63);

  let num = 10;

  for (let i = 0; i < num/2; i++) {
    let w = random(100, width - 100);
    let h = random(100, height - 100);
    let l1 = random(30);
    let l2 = random(60,210);
    setGradientBox(graColor3, graColor4, [w, h], l1, l2);
  }

  for (let i = 0; i < num/2; i++) {
    let w = random(100, width - 100);
    let h = random(100, height - 100);
    let l1 = random(20);
    let l2 = random(80,230);
    setGradientBox(graColor5, graColor6, [w, h], l1, l2);
  }

  for (let i = 0; i < num; i++) {
    let w = random(100, width - 100);
    let h = random(100, height - 100);
    let l1 = random(10);
    let l2 = random(100,250);
    setGradientBox(graColor7, graColor8, [w, h], l1, l2);
  }

  let cells = 11;

  let offset = width / 14;
  let margin = offset / 5;
  let w = (width  - offset * 2 - margin * (cells - 1)) / cells;
  let h = (height - offset * 2 - margin * (cells - 1)) / cells;


  stroke(240);
  strokeWeight(2);
  noFill();

  for (let i = 0; i < cells; i++) {
    for (let j = 0; j < cells; j++) {
      if (i == 5 || j == 5) {
        continue;
      }
      let rotate_num = int(random(4)) * 90;
      let shape_num = int(random(5));
      let length = random((w+h)/2*0.25, (w+h)/2);
      let x = i*(w+margin) + offset;
      let y = j*(h+margin) + offset;

      rectMode(CENTER);

      push();
      let cx = x + w/2;
      let cy = y + h/2;
      translate(cx, cy);
      rotate(rotate_num);
      drawShape(shape_num, length, w, h);
      pop();    
    }    
  }

  grain();
  drawText("空\n想\nと\n妄\n想\nの\n区\n別\nは\nな\nん\nだ");
}

function drawText(tt) {
  push();
  translate(width/2, height/2);
  rectMode(CENTER);
  fill(20);
//  rect(0, 10, width - 100, 50); // yoko
  rect(15, 0, 50, width - 100); // tate
  fill(255);
  textSize(46);
  textAlign(CENTER, CENTER);
  text(tt, 0,0);
  pop(); 
}

function drawShape(shape_num, length, tate, yoko) {
  if (shape_num == 0) {
    if(random()<0.3) {
      noStroke();
      fill(240);
    }
    triangle(-length/2, -length/2, length/2, -length/2, -length/2, length/2);
  } else if (shape_num == 1){
    if(random()<0.3) {
      noStroke();
      fill(240);
    }
    rectMode(CENTER);
    rect(0, 0, length, length);
    rotate(45);
    rect(0, 0, length/2, length/2);
  } else if (shape_num == 2) {
    if(random() < 0.3) {
      noStroke();
      fill(240);
      ellipse(0, 0, length/2, length/2);
    } else {
      noFill();
      stroke(240);
      ellipse(0, 0, length, length);
      if (random() < 0.5) {
        noStroke();
        fill(240);
        ellipse(random(-5,5), random(-5,5), length/3, length/3);
      }
    }
  } else if (shape_num == 3) {
    var r = random();
    if(r < 0.333) {
      arc(-length/2, -length/2, length*2, length*2, 0, 90);
    } else if (r < 0.666) {
      fill(240);
      arc(-length/2, -length/2, length*2, length*2, 0, 90, CHORD);
    } else {
      fill(240);
      arc(-length/2, -length/2, length*2, length*2, 0, 90, PIE);
    }
  } else if (shape_num == 4) {
    let coff = random(0.25, .75);
    line(-yoko/2 * coff,-tate/2 * coff,yoko/2 * coff, tate/2 * coff);
    line(-yoko/2 * coff, tate/2 * coff,yoko/2 * coff,-tate/2 * coff);
    if(random() < 0.5) {
      rectMode(CENTER);
      rect(0, 0, tate/4, yoko/4);
    } 
  }
}

function setGradientBG(c1, c2) {
  noFill();
  for(let i = 0; i < height; i++) {
    var amt = map(i, 0, height, 0, 1);
    var col = lerpColor(c1, c2, amt);
    stroke(col);
    line(0, i, width, i);
  }
}

function setGradientBox(c1, c2, pos, w, h) {
  noFill();
  for(let i = 0; i < h; i++) {
    var amt = map(i, 0, h, 1, 0);
    var col = lerpColor(c1, c2, amt);
    stroke(col);
    line(pos[0], pos[1]-i, pos[0]+w, pos[1]-i);
  }  
}

function ConvertColorcode2RBG(colorcode) {
    if(colorcode.split('')[0] === '#') {
        colorcode = colorcode.substring(1);
  }
  if(colorcode.length !== 6) {
    return false;
  }

  var r = parseInt(colorcode.substring(0, 2), 16);
  var g = parseInt(colorcode.substring(2, 4), 16);
  var b = parseInt(colorcode.substring(4, 6), 16);
  var c = color(r, g, b);
    return c;
}

メモ

• グラデーションの配色いい感じのものを決めるにあたっていくつか海外のデザインサイトを見たのだが、どれもColorCode形式でまとめられていたのでRGBに変換するメソッドを書いた。（これが型が合わなくて2日ほど放置していたのはここだけの話。）

• 見る人が見ればわかるけど@takawo先生のTDSW資料を多大に参考にしている。 『グラフィックのための「動かない」クリエイティブコーディング』 ちょうど僕が裏でTouchDesignerのWS講師をやっていたときのやつですね。

• フォントを好きなやつ使いたいなというのがそもそものモチベだった。手元のttf,otfファイルをロードしようとするとCORS requestうんちゃら...みたいなエラーが出て困ったがローカルサーバを立ててそこで動かしたら問題なくローカルのファイルにアクセスできた。（参考issue）

• ちなみに上のソースコードはNEORTに上げるようにGoogle Fontに入っているさわらび明朝フォントを使っています。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

の追加をお忘れなく。

blog.creative-plus.net

ナカジさんの記事出てきた。

一言

var let const の違いまだわかってない。

【週刊p5js】work01

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(2);
  frameRate(1);
  // noLoop(); // mousePressed用
}

let ColorPattern = [
  ['#493548','#FFC145','#FF6B6C','#5B5F97','#4B4E6D'],
  ['#FFC145','#FF6B6C','#5B5F97','#4B4E6D','#493548'],
  ['#FF6B6C','#5B5F97','#4B4E6D','#493548','#FFC145'],
  ['#5B5F97','#4B4E6D','#493548','#FFC145','#FF6B6C'],
  ['#4B4E6D','#493548','#FFC145','#FF6B6C','#5B5F97']
];

let g = 7;

function grid(){
  let   w = width / g;
  let   h = height / g;

  // グリッド線
  for (let i = 1; i <= g - 1; i++) {
    stroke(150);
    strokeWeight(1);
    line(w * i, 0, w * i, height);
    line(0, h * i, width, h * i);
  }

  // ランダムで白塗り
  for (let i = 0; i < g; i++) {
    let col = int(random(g));
    let row = int(random(g));
    fill(200);
    rect(col * w, row * h, w, h);
  }
}

function grain() {
  for (let i = 0; i < 100000; i++) {
    fill(255, 30);
    circle(random(width), random(height), 2);
  }
}
 
function draw() {
  resizeCanvas(windowWidth, windowHeight);

  let l = ColorPattern.length;
  let p = int(random(l));

  colorP = ColorPattern[p];

  let ll = colorP.length;

  bgColor = colorP[0];
  background(bgColor);

  grid();

  for (let i = 0; i < 85; i++) {
    if (i < 15 || i % 2 == 0){
      continue;
    }

    let Cd = colorP[int(random(ll))];
    while (Cd == bgColor) {
      Cd = colorP[int(random(ll))];
    }
    r = i * 2;

    noStroke();
    
    // 外側の円
    fill(Cd);
    x = random(width);
    y = random(height);
    ellipse(x, y, r);

    // 内側の円2
    fill(bgColor);
    x_diff = x + random(-5,5);
    y_diff = y + random(-5,5);
    ellipse(x_diff, y_diff, r*0.6);
  }

  for(let i = 0; i < 20000; i++) {
    ellipse(random(width), random(height), random(0.75));
  }
}

function mousePressed() {
  redraw();
}