var posY;

var speedX;

var speedY;

​

//change the object size, which affects its behaviour

var diameter = 40;

​

// change the width ratio aspect

var factor = 0.5;

​

//change the speed of either moving object

var globalSpeedX = 3;

var globalSpeedY = 8;

​

var valHeight;

var valWidth;

​

function setup() {

  createCanvas(600, 300);

​

  posX = 0;

  posY = diameter;

  speedX = globalSpeedX;

  speedY = 0;

​

  valHeight = height;

  valWidth = width;

}

​

function draw() {

  background(255);

  fill(0);

​

  var factormapped = map(factor, 0.0, 1.0, 1.0, 0.0);

​

  stroke(255);

  strokeWeight(2);

​

  rect(0, 0, valWidth * factor, valHeight, 20);

  rect(valWidth * factor, 0, valWidth * factormapped, valHeight, 20);

​

  noStroke();

  fill(255);

  textSize(diameter);

  text("A", posX, valHeight / 2);

  text("B", valWidth - (valWidth * factormapped) / 2, posY);

​

  posX += speedX;

  posY += speedY;

​

  if (posX >= valWidth * factor - diameter) {

    speedX = 0;

    speedY = globalSpeedY;

  }

​

  if (

    posY >= valHeight - diameter / 4 &&

    posX >= valWidth * factor - diameter

  ) {

    speedY = 0;

    speedX = -globalSpeedX;

  }

​

  if (posX < diameter / 2 && posY >= valHeight - diameter) {

    speedX = 0;

    speedY = -globalSpeedY;

  }

​

  if (posX < diameter / 2 && posY < diameter) {

    speedY = 0;

    speedX = globalSpeedX;

  }

}

​