const gridXcount = 20;
const gridYcount = 20;
var xSpacing; // x distance between each shape
var ySpacing; // y distance between each shape
var reactorScaler = 0.06; // this factor controls the intensity of the reactors influence
 
function setup() {
  createCanvas(700, 700);
  xSpacing = width/(gridXcount-1) 
  ySpacing = height/(gridYcount-1)
  fill(0);
  noStroke();
}
 
function draw() {
  background(255);
  // populated canvas with ellipses
  for (var i = 0; i<gridXcount; i++ ) {
    for (var j = 0; j<gridYcount; j++ ) {
      var myPos = createVector(i*xSpacing, j*ySpacing);
      var reactorDistance = dist(mouseX, mouseY, myPos.x, myPos.y)
      var scaler = reactorDistance*reactorScaler;
      ellipse(myPos.x, myPos.y, 1*scaler, 1*scaler);
    }
  }
}

Exercise

The example above uses the mouse point to scale the ellipses. Experiment with other shapes, and other transformations such as rotation, colour change, or more complex morphing.

Programming

p5.js Simple Reactor

Analytics

Exercise