Interaction Design WikiProgramming

p5.js Simple Reactor

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.