let p, c, f;

setup=_=>{

  createCanvas(W=800,W);

  p = gI(n);

  c = cI(n,ci,cn);

  f = fI(n);

}

draw=_=>{

  background(220);

  g(n,p,c,f);

}

let g = (m, p, c, f) => {

  const n1 = m + 1, ml = W / n1 / n1, mb = W / n1 / n1, nw = W / n1, nh = W / n1;

  for (let i = 0; i < m; i++) for (let j = 0; j < m; j++) {

    const x = nw * i + ml * (i + 1), y = nh * j + mb * (j + 1);

    p[i][j].background(220);

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

    dg(c[i][j].length, c[i][j], f[i][j]+frameCount/100, p[i][j]);

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

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

  }

};

let cI = (num, ci, cn) =>{

  const c = Array.from(new Array(num), () => Array.from(new Array(num), () => new Array(cn).fill("")));

  for (let i = 0; i < num; i++) for (let j = 0; j < num; j++) for(let n = 0; n< cn; n++) c[i][j][n] = random(ci);

  return c;

}

let gI = (m) => {

 let n1 = m + 1, ml = W / n1 / n1, mb = W / n1 / n1, nw = W / n1, nh = W / n1, p = [...Array(m)].map(_ => Array(m).fill(0));

  for (let i = 0; i < m; i++) for (let j = 0; j < m; j++) {

    let x = nw * i + ml * (i + 1), y = nh * j + mb * (j + 1);

    p[i][j] = createGraphics(nw, nh).background(110).noStroke();

  }

  return p;

};

let fI = (m) => {

  let f = [...Array(m)].map(_ => Array(m).fill(0));

  for (let i = 0; i < m; i++) for (let j = 0; j < m; j++) f[i][j] = random(0,360);

  return f;

};

let dg = (n,c,t,pg) =>{

  const y = pg.height*2/n;

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

    const u = color(c[i]), alpha = map(abs(sin(t)),0,1,0,255);

    u.setAlpha(alpha);

    pg.fill(u);

    ds(pg.width/2,y*i,pg.width/1.5,pg);

  }

}

let ds = (x,y,r,pg) =>{

  pg.beginShape();

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

    const xx = r*cos(PI/2*i), yy = r*sin(PI/2*i);

    pg.vertex(x+xx,y+yy);

  }

  pg.endShape(CLOSE);

}