let maxRatio = 2 / 3;

let ieRatio = minRatio;

​

function setup() {

  createCanvas(400, 400);

  textSize(40);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  noStroke();

}

​

function draw() {

  background(220);

​

  let iRatio = 1;

  let eRatio = (1 - ieRatio) / ieRatio;

​

  // Draw the ratio

  if (ieRatio > 0.5) {

    eRatio = 1;

    iRatio = ieRatio / (1 - ieRatio);

  }

​

  fill(0);

  text(round(iRatio * 10) / 10 + ":" + 

       round(eRatio * 10) / 10, width / 2, height / 2);

​

  // Draw the bar

  rect(50, 100, 300, 50);

  fill(255);

  rect(50, 100, ieRatio * 300, 50);

}

​

function mouseWheel(e) {

  if (e.delta < 0) {

    adjustRatio(-1);

  } else if (e.delta > 0) {

    adjustRatio(1);

  }

}

​

function adjustRatio(dir) {

  ieRatio = min(maxRatio, max(minRatio, ieRatio + dir * 0.01));

}