// see https://kirkdev.blogspot.com/2021/10/creating-and-positioning-circle-image.html 

// for more explanation

let poseRaw, romaRaw, pose, roma;

​

// put actual image loading in preload

// so we have width/height before doing 

// calculations...

function preload(){

    poseRaw = loadImage('pose.jpeg');

    romaRaw = loadImage('roma.jpg');

}

​

function setup() {

  createCanvas(400, 400);

  roma = makeMaskedImage(romaRaw,1);

  pose = makeMaskedImage(poseRaw,-1);

  rectMode(CENTER);

}

​

function draw() {

  background(220); 

  // just for fun and to prove the flexibility 

  // we remap the mouseX,mouseY to a position

  // on an imaginary circle and the image size,

  // respectively

  const angle = map(mouseX,0,width, -PI, PI);

  drawMaskedImage(roma,200+100*cos(angle),200 + 100*sin(angle),map(mouseY,0,height,40,200));

  drawMaskedImage(pose,200+100*cos(angle+PI),200 + 100*sin(angle+PI),map(mouseY,0,height,40,200));

  noLoop();

}

​

function mouseMoved(){

 loop(); 

}

// dir is a number between -1 and 1 inclusive

// indicating placement of circle relative to center

function makeMaskedImage(img, dir){

      const circleMask = createGraphics(img.width,img.height);

  // fill a soft mask so we see the whole frame,

  // for educational purposes

    circleMask.fill('rgba(0, 0, 0, .5)');

    circleMask.rect(0,0,img.width,img.height);

    const sz = min(img.width,img.height);

    const wRatio = img.width/sz;

    const hRatio = img.height/sz;

  //hard circle mask

    circleMask.fill('rgba(0, 0, 0, 1)');

    circleMask.circle(

        (sz * wRatio) / 2 + (dir * ((sz  * wRatio - sz)/2))        ,

        (sz * hRatio) / 2 + (dir * ((sz  * hRatio - sz)/2))        ,

    sz);

    img.mask(circleMask);

  return {img, wRatio, hRatio, dir};

}

​

function drawMaskedImage(maskedImg, cx, cy, sz ){  

    const {img, wRatio, hRatio, dir} = maskedImg;

    const trueWidth = sz * wRatio;

    const trueHeight =  sz * hRatio;

    const xCenter = cx - (trueWidth/2);

    const yCenter = cy - (trueHeight/2)

    const xWiggle = ((trueWidth - sz) / 2) * dir;

    const yWiggle = ((trueHeight - sz) / 2) * dir;   

    image(img,xCenter - xWiggle,yCenter - yWiggle,trueWidth,trueHeight);   

}