Noise Tile

let width = 400;

let height = 400;

​

let count = 0;

​

// 背景のノイズのパラメータ

var noiseVal = 30;     // ノイズ

var zseed = [0, 7000]; // ノイズのシード値を固定

​

function setup() {

  createCanvas(width, height);

  background("#2f4f4f");

}

​

function draw() {

  count++;

  if(count % 10 > 0) return;

  for (var y = -10; y < height; y += 20) {

    for (var x = -10; x < width; x += 20){

      if (random(0, 10) < 5){

        continue;

      }

      // noiseValで割ってノイズの分布を引き延ばしている

      let nx = x / noiseVal;

      let ny = (y + count * 2) / noiseVal;

      let g = noise(nx, ny, zseed[0]) * 150;

      let b = noise(nx, -ny, zseed[1]) * 150;

      if (random(0, 100) < 94){

        fill(color(100, 140 + g, 140 + b));

        rect(x, y, 30, 30);

      }else{

        fill(color(160 + g, 180, 160 + b));

        rect(x, y, 35, 35);

      }

    }

  }

  if (count > 6000) {

    count = 0;

  }

​

}