// p5.js 2021-09-18 Jeremy Douglass

// https://editor.p5js.org/jeremydouglass/sketches/s3_A5sQdo

// https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

​

  // test sizes, aspect ratios

  let fr = frameCount%480;

  if(fr>=0 && fr<120)   scale(1, 1);

  if(fr>=120 && fr<240) scale(2, 2);

  if(fr>=240 && fr<360) scale(0.9, 0.6);

  if(fr>=360 && fr<480) scale(0.5, 1);

​

  // rectangle is 25% of canvas, offset by 5% margin

  rect(10, 10, 25, 25);

}