Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

int gridWidth
Code Block
languagejs
const gridXcount = 20;
const intgridYcount gridHeight = 20;

float shapeWidth = 30; 
float shapeHeight = 30; 
floatvar xSpacing; // x distance between each shape
var ySpacing; // y distance between each shape
var reactorScaler = 0.06; int// xOffset;this intfactor yOffset;controls PVectorthe reactorPosition;intensity of voidthe setup()reactors {influence
 
reactorPosition = new PVector(0, 0);function setup() {
  sizecreateCanvas(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();
};
 
voidfunction draw() {
  background(255);
  fill(0);
  noStroke();
  pushMatrix(); 
  translate(xOffset, yOffset);//translate matrixpopulated tocanvas centerwith ellipses
  for (intvar i = 0; i<gridWidthi<gridXcount; i++ ) {
    for (intvar j = 0; j<gridHeightj<gridYcount; j++ ) {
      PVectorvar myPos = new PVectorcreateVector(i*shapeWidthxSpacing, j*shapeHeightySpacing);
      floatvar reactorDistance = dist(reactorPosition.xmouseX, reactorPosition.ymouseY, myPos.x, myPos.y);
      floatvar scaler = reactorDistance*reactorScaler;
      ellipse(myPos.x, myPos.y, 1*scaler, 1*scaler);
    };
  };
  popMatrix();
};

int mouse_X() {
  return (mouseX - xOffset); //correct positions after matrix translations
}

int mouse_Y() {
  return (mouseY - xOffset); //correct positions after matrix translations
}
void mouseMoved() {
  reactorPosition.x = mouse_X();
  reactorPosition.y = mouse_Y();
};


 

 

 

...


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.