let sizeRight = 0;

let sizeLeft = 0;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  if (state == 'center') {

    drawCenter();

  } else if (state == 'left') {

    drawLeft();

  } else if (state == 'right') {

    drawRight();

  }

}

​

function drawCenter() {

  background(map(mouseX, 0, width, 0, 255));

​

  let d = dist(mouseX, mouseY, 0, height/2);

  if (d < 50) {

    sizeLeft += 0.5;

    fill(map(sizeLeft, 0, 100, 0, 255));

    noStroke();

    ellipse(0, height/2, sizeLeft);

    if (sizeLeft == 100) {

      state = 'left';

      sizeLeft = 0;

    }

  } else {

    sizeLeft = 0;

  }

​

  d = dist(mouseX, mouseY, width, height/2);

  if (d < 50) {

    sizeRight += 0.5;

    fill(map(sizeRight, 0, 100, 255, 0));

    noStroke();

    ellipse(width, height/2, sizeRight);

    if (sizeRight == 100) {

      state = 'right';

      sizeRight = 0;

    }

  } else {

    sizeRight = 0;

  }

}

​

function drawLeft() {

  background(0, 0, map(mouseX, 0, width, 255, 0));

  let d = dist(mouseX, mouseY, width, height/2);

  if (d < 50) {

    sizeLeft += 0.5;

    fill(map(sizeLeft, 0, 100, 0, 255));

    noStroke();

    ellipse(width, height/2, sizeLeft);

    if (sizeLeft == 100) {

      state = 'center';

      sizeLeft = 0;

    }

  } else {

    sizeLeft = 0;

  }  

}

​

function drawRight() {

  background(map(mouseX, 0, width, 255, 0), 0, 0);

  let d = dist(mouseX, mouseY, 0, height/2);

  if (d < 50) {

    sizeLeft += 0.5;

    fill(map(sizeLeft, 0, 100, 255, 0), 0, 0);

    noStroke();

    ellipse(0, height/2, sizeLeft);

    if (sizeLeft == 100) {

      state = 'center';

      sizeLeft = 0;

    }

  } else {

    sizeLeft = 0;

  }  

}

​