​

// const pgs = new Array(num).fill(new Array(num).fill(0));

// → pythonでいうlist1 = [[0]* 3]* 3を再現しようとしたら失敗した例

// 参照渡しっぽい挙動になってる

​

let pgs;

const n = 5;

let noises1;

let noises2;

​

function setup() {

  createCanvas(800, 800);

  pgs = gridInit(n);

  noises1 = noiseInit(n);

  noises2 = noiseInit(n);

  frameRate(24);

  //console.log(noises1);

}

​

function draw() {

  background(220);

  const x = noise(frameCount * 0.05) * width;

  //translate(0,height/2);

  grid(n,pgs,noises1,noises2);

}

​

keyPressed = () => {

  if (key === 's') {

    //saveCanvas(canvas, 'canvas', 'png');

    saveGif('canvas', 4);

  }

};

​

// wobbly関数

const test = (pg,noise1,noise2) => {

  const r = pg.width/10;

  const k = frameCount/10;

  pg.translate(0,pg.height/2);

  for(let i = 0;i<pg.width;i++){

    const x = i;

    const y = r*(sin(noise1*i+k)+sin(noise2*i+k*1.2));

    pg.circle(x,y,4);

  }

}

​

/** num個で分割したグリッドを画面いっぱいに生成する

 * @method grid

 * @param  {Number}        num           画面の分割数

 * @param  {p5.Graphics}   pg            別レイヤー

 */

const grid = (num, pgs, noise1, noise2) => {

  const n1 = num + 1;

​

  const margin_left = width / n1 / n1;

  const margin_bottom = height / n1 / n1;

​

  const nw = width / n1;

  const nh = height / n1;

​

  for (let i = 0; i < num; i++) {

    for (let j = 0; j < num; j++) {

      const x = nw * i + margin_left * (i + 1);

      const y = nh * j + margin_bottom * (j + 1);

      pgs[i][j].background(110);

      pgs[i][j].push();

      test(pgs[i][j], noise1[i][j], noise2[i][j]);

      pgs[i][j].pop();

      image(pgs[i][j],x,y);

    }

  }

};

​

// pg初期化用

const gridInit = (num) => {

  const colors = ['#A94438', '#D24545', '#E6BAA3', '#E4DEBE', '#F8F4EC', '#FF9BD2', '#D63484', '#402B3A'];

  const n1 = num + 1;

​

  const margin_left = width / n1 / n1;

  const margin_bottom = height / n1 / n1;

​

  const nw = width / n1;

  const nh = height / n1;

  const pgs = new Array(num).fill(new Array(num).fill(0));// 二次元配列(失敗)

​

　const l = new Array(10).fill(0);

  for (let i = 0; i < num; i++) {

    for (let j = 0; j < num; j++) {

      const x = nw * i + margin_left * (i + 1);

      const y = nh * j + margin_bottom * (j + 1);

      const pg = createGraphics(nw, nh);

      pg.background(110);

      pg.fill(random(colors));

      pg.noStroke();

      pgs[i][j] = pg;

    }

  }

  return pgs;

};

​

// noise配列初期化

const noiseInit = (num) =>{

  const noises = new Array(num).fill(new Array(num).fill(0));

  for (let i = 0; i < num; i++) {

    for (let j = 0; j < num; j++) {

      noises[i][j] = random(0.01,0.05);

    }

  }

  return noises;

}

​