const gridWidthgridXcount = 20;
const gridHeightgridYcount = 20;
var xSpacing; const shapeWidth = 30;
const shapeHeight = 30;// x distance between each shape
var ySpacing; // y distance between each shape
var reactorScaler = 0.06;
var xOffset;
var yOffset;
var reactorPosition; // this factor controls the intensity of the reactors influence
 
function setup() {
  reactorPosition = createVector(0, 0);
  createCanvas(700, 700);
  // offset used to center the graphics on the screen
  xOffset = floor(width/2-(shapeWidth*gridWidth/2));
  yOffset = floor(height/2-(gridHeight*shapeHeight/2));
 
  background(255xSpacing = width/(gridXcount-1) 
  ySpacing = height/(gridYcount-1)
  fill(0);
  smoothnoStroke();
}
 
function draw() {
  background(255);
  fill(0);
  noStroke();
  push();
  translate(xOffset, yOffset);//translate matrix to center// populated canvas with ellipses
  for (var i = 0; i<gridWidthi<gridXcount; i++ ) {
    for (var j = 0; j<gridHeightj<gridYcount; j++ ) {
      var myPos = createVector(i*shapeWidthxSpacing, j*shapeHeightySpacing);
      var reactorDistance = dist(reactorPosition.xmouseX, reactorPosition.ymouseY, myPos.x, myPos.y)
      var scaler = reactorDistance*reactorScaler;
      ellipse(myPos.x, myPos.y, 1*scaler, 1*scaler);
    }
  }
 
pop();
}


function mouseMoved() {
  let vecX = mouseX - xOffset;
  let vecY = mouseY - yOffset;
  reactorPosition.set(vecX, vecY);
}