// load image pre-drew and posted on imgur

  imgup = loadImage("https://i.imgur.com/q60gB9F.png");

  imgdown = loadImage("https://i.imgur.com/QpREJxN.png");

}

​

function setup() {

  createCanvas(400, 400);

​

  // set the position and size of the word "POWER"

  textSize(24);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(255);

  let scaleFactor = 1.1;

​

  // constrain mouseY so that it stays within the frame

  let constrainedMouseY = constrain(mouseY, 0, height);

​

  // constrain the divider

  let divider = map(constrainedMouseY, 0, height, 50, height - 50);

  divider = constrain(divider, 50, height - 50);

​

  // set the upper image width according to its original proportion, and height based on the same scaling factor

  let imgUpWidth = width * 1.2;

  let imgUpHeight = divider * scaleFactor;

​

  // make sure the top image height won't exceed the frame

  if (imgUpHeight > height) {

    imgUpHeight = height;

  }

​

  // set the bottom image width and height

  let imgDownWidth = width;

  let imgDownHeight = (height - divider) * scaleFactor;

​

  // scale to display the top image

  image(imgup, -(imgUpWidth - width) / 2, -(imgUpHeight - divider) / 2, imgUpWidth, imgUpHeight);

​

  // scale to display the bottom image

  image(imgdown,-(imgDownWidth - width) / 2, divider - (imgDownHeight - (height - divider)) / 2, imgDownWidth, imgDownHeight);

​

  // draw the upper ellipse and text when mouse Y reachers the top

  if (mouseY <= 20) {

    stroke(0);

    strokeWeight(0.5);

    fill(255);

    ellipse(200, 28, 300, 50);

    fill(0);

    text("!  P O W E R  !", 200, 28);

  }

​

  // rotate the text at the bottom by 180 degrees when mouseY reaches the bottom

  if (mouseY >= height) {

    translate(200, height - 28);

    rotate(PI);

​

    // draw the bottom ellipse and text

    stroke(0);

    strokeWeight(0.5);

    fill(255);

    ellipse(0, 0, 300, 50);

    fill(0);

    text("!  P O W E R  !", 0, 0);

  }

}

​