【p5js/プログラミング】数字。

Art

2020.04.13

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

１３日目のテーマは「数字」。

数字は普段よく使いますが、そのものに実態があるわけではないなーと思い、消え隠れする、たちまち入れ替わる数字たちを表現しました。

色の明度をmouseXで調整できるようにしています。😄

では、ごらんあれ〜。

const div = 50;
const num = 9;
var number = [];


function setup(){
  createCanvas(500,500);
  frameRate(10);
  textSize(div/6);
  textAlign(CENTER, CENTER);
  for (var i = 0; i < num+1; i++) {
    number[i] = i;
  }
  // noLoop();
}

function  draw(){
  background(255);
  noStroke();
  var w_div = width / div;
  var h_div = height / div;
  for (var i = w_div; i < width; i+= w_div) {
    line(i,0,i,height);
    for (var j = h_div; j < height; j+= h_div) {
      line(0,j,width,j);
    }
  }
  var w = w_div/2;
  var h = h_div/2;
  var bright = mouseX;
  for (var b = 0; b < div; b++) {
    for (var a = 0; a < div; a ++) {
      var n = int(random(0,9));
      fill(random(40,180), random(60,130), random(70,210),bright);
      text(number[n].toString() , w ,h);
      w += w_div;
    }
    w = w_div/2;
    h += h_div;
  }
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。