// w/ dynamically adjusting offsets and grid gaps

//

// move mouse in X and Y over sketch to adjust 

// number and sizes of grid squares

//

// by Ben Grosser

// -- for ARTS 444, spring 2019, UIUC

​

let num = 6; // number of grid squares (init sets starting #)

let maxNum = 4; // smallest grid square size

let reduction = 75;

let w; // tracks calculated grid square width

let h; // tracks calculated grid square height

​

let gapX; // calculated gap b/t boxes along x

let gapY; // calculated gap b/t boxes along y

​

let aspect = 1; // used to hold calculated aspect ratio

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  frameRate(20);

​

  //w = 60;

  aspect = windowWidth/windowHeight;

  maxNum = aspect * maxNum;

​

​

  w = (width/num) * (reduction*.01);

  h = w * aspect;

  calcSpecs();  

}

​

function draw() {

  colorMode(RGB);

  background(random(30, 60));

  for (let y = gapY / 2; y <= height - gapY / 2; y += gapY + h) {

    for (let x = gapX / 2; x <= width - gapX / 2; x += gapX + w) {

      colorMode(HSB);

      fill(

        map(y, gapY / 2, width - gapY / 2, random(0, 20), random(230, 255)),

        map(x, gapX / 2, width - gapX / 2, random(0, 20), random(230, 255)),

        random(50, 100),

      );

      rect(x, y, w, h);

    }

  } 

}

​

// whenever the mouse is moved, grab data and calc 

// changes to grid size/num/etc

function mouseMoved() {

  handleInput();

}

​

function handleInput() {

  // num of grid squares determined by mouseX position

  num = int(map(mouseX,0,width,1,width/maxNum));

​

  // size of grid squares affected by mouseY ... 

  reduction = map(mouseY,0,height,1,100);

  reduction = constrain(reduction,1,100);

  calcSpecs();

}

​

function calcSpecs() {

  // calc width/height based on num, gridline size, 

  // and window aspect ratio

  if(height > width) {

    w = (width/num) * (reduction*.01);

    w = h * aspect;

  } else if(width > height) {

    h = (height/num) * (reduction*.01);

    w = h * aspect;

  } else {

    w = (width/num) * (reduction*.01);

    h = w;

  }

  // calc gaps

  gapX = (width - (num * w)) / num;

  gapY = (height - (num * h)) / num;

  if(gapX < 0) gapX = 0;

  if(gapY < 0) gapY = 0;

​

}

​

​

// kb control not really finished

/* 

function keyPressed() {

  if (keyCode == UP_ARROW) num++;

  if (keyCode == DOWN_ARROW) num--;

  if (keyCode == RIGHT_ARROW) w+=2;

  if (keyCode == LEFT_ARROW) w-=2;

  h = w;

  gapX = (width - (num * w)) / num;

  gapY = (height - (num * h)) / num;

}

*/