let numRows, numCols;

​

let leftDots = [];

let rightDots = [];

​

function setup() {

  createCanvas(604, 400);

  colorMode(HSB, 360, 100, 100, 100);

  noStroke();

  numRows = height / pixelSize;

  numCols = ((width-4)/2) / pixelSize;

  for(let row = 0; row < numRows; row++){

    for(let col = 0; col < numCols; col++){

      let on = false;

      if(random() < 0.5) on = true;

      leftDots.push({

        on: on,

        col: col, 

        row: row

      })

      rightDots.push({

        on: on,

        col: col, 

        row: row,

        copied: false,

        adj: false 

      })      

    }

  }

  console.log(numCols, numRows)

  for(let d of rightDots){

    if (d.col > 50 && d.col < (150-50)){

      if (d.row > 75 && d.row < (200 - 75)){

        let copyi = (d.col + 2) + d.row * numCols;

        d.newOn = rightDots[copyi].on;

        d.adj = true;

        rightDots[copyi].copied = true;

      }

    }

  }

  for(let d of rightDots){

    if (d.adj) d.on = d.newOn;

    if (d.copied && !d.adj) {

      d.on = false;

      if (random() < 0.5) d.on = true;

    }

  }   

}

​

function draw() {

  background(220);

  for(let d of leftDots){

    if (d.on) fill(0,0,0);

    else fill(0,0,100);

    rect(d.col * pixelSize, d.row*pixelSize, pixelSize);

  }

  for(let d of rightDots){

    if (d.on) fill(0,0,0);

    else fill(0,0,100);

    rect(d.col * pixelSize + width/2 + 4, d.row*pixelSize, pixelSize);

  }   

  noLoop();

}