const world = []

W = 100;

H = 100;

WW = W/2;

HH = H/2;

​

function setup() {

  createCanvas(400, 400);

  for (var y = 0; y  < 3 ; y++){

    world.push([])

     for (var x = 0 ; x < 3; x ++){

       var canv = createGraphics(W,H)

       canv.background(noise(x, y)*255,255,255,100)

       world[y].push(canv)

     }

  }

}

​

​

​

var DX = 0;

var DY = 0;

​

var X = 0+WW;

var Y = 0+HH;

​

var PX = 0;

var PY = 0;

​

var t = 0;

const dt = 0.5;

​

​

function stepRight() {

  PX = X; 

  if (X!=WW && X % WW == 0 && DX % X == 0) 

    {DX -=WW

     tmp = world[0][0]

     tmp.clear()

     world[0][0] = world[0][1]

     world[0][1] = world[0][2]

     world[0][2] = tmp

​

     tmp = world[1][0]

     tmp.clear()

     world[1][0] = world[1][1]

     world[1][1] = world[1][2]

     world[1][2] = tmp

     tmp = world[2][0] 

     tmp.clear()

     world[2][0] = world[2][1]

     world[2][1] = world[2][2]

     world[2][2] = tmp

    }

  X +=1;

}

​

function stepLeft() {

  PX = X; 

  if (X!=WW &&X % WW == 0 && DX % X == 0) 

    {DX +=WW

     tmp = world[0][2]

     tmp.clear()

     world[0][2] = world[0][1]

     world[0][1] = world[0][0]

     world[0][0] = tmp

​

     tmp = world[1][2]

     tmp.clear()

     world[1][2] = world[1][1]

     world[1][1] = world[1][0]

     world[1][0] = tmp

     tmp = world[2][2] 

     tmp.clear()

     world[2][2] = world[2][1]

     world[2][1] = world[2][0]

     world[2][0] = tmp

    }

  X -=1;

}

function stepUp() {

  PY = Y; 

  if (Y!=HH &&Y % HH == 0 && DY % Y == 0) 

    {DY +=H

    }

  Y -=1;

}

function stepDown() {

  PY = Y; 

  if (Y!=HH && Y % WW == 0 && DY % Y == 0) 

    {DY -=HH

    }

  Y +=1;

}

function draw() {

  background(220);

  if (/*w*/ keyIsDown(87)) {PY =Y; Y -=1;}

  if (/*a*/ keyIsDown(65)) stepLeft()

  if (/*s*/ keyIsDown(83)) {PY =Y; Y +=1;}

  if (/*d*/ keyIsDown(68)) stepRight();

​

  translate(width/2, height/2)

  let maincanv = world[1][1]

  maincanv.push();

  maincanv.translate(X%W, Y%W)

  maincanv.strokeWeight(5);

  maincanv.point(0,0)

  maincanv.pop();

​

  scale(0.5)

  for (const [yoff, row] of world.entries()){

    for (const [xoff, canv] of row.entries()){

      image(canv,WW+(xoff*W - 1.5*W) -X - DX,

                 HH+(yoff*H - 1.5*H) -Y - DY)

​

​

    }

​

  }

  // X+=dt;

  t+=dt;

}