let aspect = {x: 9, y: 16}

let aspectScalar = aspect.x/aspect.y;

let iAspectScalar = aspect.y/aspect.x;

let playableSpace = {x:-1, y:-1, w: -1, h: -1};

let gridCount = {x:45, y:80}

let launcherPoint = {x: 23, y: 70}

let gridSize = 20 * aspectScalar;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(220);

  computeScreen();

}

​

function draw() {

  // computeScreen();

  // background(220);

  drawBase();

  drawGrid();

  launcher();

}

​

function launcher() {

  fill(255,0,0)

  circle(playableSpace.x+launcherPoint.x*gridSize, playableSpace.y+launcherPoint.y*gridSize, gridSize)

}

​

function drawBase() {

}

​

function drawGrid() {

  fill(30)

  for(let x = playableSpace.x; x <= playableSpace.x + playableSpace.w; x+=gridSize) {

    for(let y = playableSpace.y; y <= playableSpace.y + playableSpace.h; y+=gridSize) {

      if(Math.random() > 0.99) {

        fill(255)

      } else { fill(30) }

      circle(x, y, gridSize)

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(220);

  computeScreen();

}

​

function computeScreen() {

  if( windowWidth + windowWidth * aspectScalar > windowHeight) {

    // wide

    playableSpace.h = windowHeight;

    playableSpace.w = windowHeight * aspectScalar;

    playableSpace.x = (windowWidth - playableSpace.w) * 0.5;

    playableSpace.y = 0;

    gridSize = windowHeight / gridCount.y;

    // fill(80)

    // rect(playableSpace.x, playableSpace.y, playableSpace.w, playableSpace.h + playableSpace.y);

  } else {

    playableSpace.h = windowWidth * iAspectScalar;

    playableSpace.w = windowWidth;

    playableSpace.y = (windowHeight - playableSpace.h) * 0.25;

    playableSpace.x = 0;

    gridSize = windowWidth / gridCount.x;

    // fill(80)

    // rect(playableSpace.x, playableSpace.y, playableSpace.w + playableSpace.x, playableSpace.h + playableSpace.y);

  }

}