const gridWidth = 20;
const gridHeight = 20;
const shapeWidth = 30;
const shapeHeight = 30;
var reactorScaler = 0.06;
var xOffset;
var yOffset;
var reactorPosition;
 
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(255);
  smooth();
}
 
function draw() {
  background(255);
  fill(0);
  noStroke();
  push();
  translate(xOffset, yOffset);//translate matrix to center
  for (var i = 0; i<gridWidth; i++ ) {
    for (var j = 0; j<gridHeight; j++ ) {
       myPos = createVector(i*shapeWidth, j*shapeHeight);
      var reactorDistance = dist(reactorPosition.x, reactorPosition.y, 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);
}