1225

Twitter:@dn0t_ GitHub:@ogrew

【週刊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;
}

f:id:taiga006:20200208140237j:plain

メモ

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

  • 見る人が見ればわかるけど@takawo先生のTDSW資料を多大に参考にしている。 『グラフィックのための「動かない」クリエイティブコーディング』 f:id:taiga006:20200208140541j:plain ちょうど僕が裏で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 の違いまだわかってない。