p5.js

let img;

function preload() {

  img = loadImage("src/assets/photo2.jpg");
}

function setup() {
  createCanvas(400, 400);

  img.resize(width, height);
  
  image(img, 0, 0);
  frameRate(30)
  createLoop({duration:20, gif:true})
}

function draw() {
  
  const strips = 10;
  const hStrips = 10;
  
  // Vertical Strips
  // Get the source x,y,width,height
  const sx = roundToNearest(random(width), strips);
  const sy = 0;
  const sw = strips;
  const sh = height;
    // horizontal strips

  const hsx = 0;
  const hsy = roundToNearest(random(height), hStrips);
  const hsw = width;
  const hsh = hStrips;
  
  // Get the destination x,y,width,height
  const dx = sx;
  const dy = int(random(-5, 5));
  const dw = sw;
  const dh = height;

  const hdx = int(random(-5, 5));
  const hdy = hsy;
  const hdw = width;
  const hdh = hsh;
  
  // Call the copy function with the given parameters
  copy(sx, sy, sw, sh, dx, dy, dw, dh); 
  copy(hsx, hsy, hsw, hsh, hdx, hdy, hdw, hdh); 
}

// A little utility for rounding a value to the nearest 10, 20, 30 or whatever
function roundToNearest(value, nearest){
 return ceil(value / nearest) * nearest; 
}