var sceneScale = 1;

var boundsPadding = 10;

​

function setup() {

  createCanvas(400, 400);

  noStroke();

  for(var i = 0; i < 10; i++) {

   points.push(createVector(random(-width/2,width+width/2),random(-height/2,height+height/2)));

  }

}

​

function calAvgPt() {

  var avg = createVector();

  for(var i = 0; i < points.length; i++) {

    avg.add(points[i]);

  }

  avg.div(points.length);

  return avg;

}

​

function getBounds() {

  var minx = 10000, miny = 10000, maxx = -10000, maxy = -10000;

  for(var i = 0; i < points.length; i++) {

    var pt = points[i];

    if(pt.x < minx) minx = pt.x;

    if(pt.y < min) miny = pt.y;

    if(pt.x > maxx) maxx = pt.x;

    if(pt.y > maxy) maxy = pt.y;

  }

  return {

    minx: minx - boundsPadding,

    miny: miny - boundsPadding,

    maxx: maxx + boundsPadding,

    maxy: maxy + boundsPadding

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    oldSceneScale = sceneScale;

    sceneScale += .1;

  } else if (keyCode === DOWN_ARROW) {

    oldSceneScale = sceneScale;

    sceneScale -= .1;

  }

  return false; // prevent default

}

​

function draw() {

  background(0);

  var avg = calAvgPt();

  var bounds = getBounds();

  sceneScale = max(width / (bounds.maxx - bounds.minx), height / (bounds.maxy - bounds.miny));

  translate(width / 2 - (avg.x * sceneScale), height / 2 - (avg.y * sceneScale));

  scale(sceneScale);

  fill(255,0,0);

  ellipse(avg.x, avg.y, 10, 10);

  for(var i = 0; i < points.length; i++) {

    var pt = points[i];

    fill(0,0,255);

    ellipse(pt.x * sceneScale, pt.y * sceneScale, 5, 5);

    fill(255);

    text(i, pt.x * sceneScale, pt.y * sceneScale);

  }

}