let offset, goffset;

let nsquares, sqsize;

​

let cg;

​

let _x, _y, _vx, _vy, _sqsize;

​

let points; // point lookup table

let dirs;

​

function setup() {

  points = [];

  dirs = [

    { x: -1, y: -1 },

    { x: -1, y: 0 },

    { x: -1, y: 1 },

    { x: 1, y: -1 },

    { x: 1, y: 0 },

    { x: 1, y: 1 },

    { x: 0, y: -1 },

    { x: 0, y: 1 },

  ];

​

  offset = 20;

  goffset = 5;

​

  nsquares = 15;

  sqsize = 50;

​

  // nsquares = 67;

  // sqsize = 100;

​

  // chromotome : dt09

  colors = [

    color(239, 235, 218, 255),

    color(5, 46, 87, 255),

    color(222, 141, 128, 255),

  ];

​

  let s = nsquares * sqsize + 2 * offset + (nsquares - 1) * goffset;

  createCanvas(s, s);

  cg = createGraphics(s, s);

  cg.background(colors[0]);

​

  // console.log(s);

​

  let x = offset;

  let y = offset;

​

  for (let r = 0; r < nsquares; r++) {

    for (let c = 0; c < nsquares; c++) {

      cg.noStroke();

      cg.fill(colors[1]);

      cg.square(x, y, sqsize);

​

      points.push({ x: x, y: y });

​

      let x1 = x + random(0.0, 2.0);

      let y1 = y + random(0.0, 2.0);

​

      if (random() > 0.9) {

        x1 = x - random(0.0, 2.0);

        y1 = y - random(0.0, 2.0);

      }

      let _c = colors[2];

      _c._array[3] = random(0.0, 1.0);

      cg.fill(_c);

      cg.square(x1, y1, sqsize);

​

      x += sqsize + goffset;

    }

    x = offset;

    y += sqsize + goffset;

  }

​

  // pass 2

​

  x = offset;

  y = offset;

  for (let r = 0; r < nsquares; r++) {

    for (let c = 0; c < nsquares; c++) {

      if (random() > 0.8) {

        x1 = x + 1;

        y1 = y + 1;

        let ssize = sqsize;

        for (let i = 0; i < random(150); i++) {

          cg.fill(random(colors));

          cg.square(x1, y1, ssize);

          x1++;

          y1++;

          ssize -= 2; //= random(0.0, 3.0);

        }

      }

      x += sqsize + goffset;

    }

    x = offset;

    y += sqsize + goffset;

  }

  image(cg, 0, 0);

​

  let p = random(points);

  let d = random(dirs);

  _x = p.x;

  _y = p.y;

  _vx = d.x;

  _vy = d.y;

  _sqsize = sqsize;

}

​

function draw() {

  if (frameCount % 100 == 0) {

    // reset

    image(cg, 0, 0);

    let p = random(points);

    let d = random(dirs);

​

    _x = p.x;

    _y = p.y;

    _vx = d.x;

    _vy = d.y;

    _sqsize = sqsize;

  }

  // noLoop();

​

  if (frameCount > 100) {

    noStroke();

    fill(random(colors));

    square(_x, _y, _sqsize);

    _x += _vx;

    _y += _vy;

    _sqsize -= 2;

    _sqsize = constrain(_sqsize, 0, sqsize);

  }

}

​