After playing around with some image manipulation code in Python, I decided it would be fun to publish it as a web app for other people to play around with it!

The original idea is simple: take a random crop of an image (select 4 random points within the bounds of the image). Paste that crop back onto the image in a randomly-selected place. Repeat this process, but take crops from the original image, and paste them onto the latest frame to build up layers.

1import argparse
2from PIL import Image
3import random
4import string
5import os
6import imageio.v3 as iio
7
8NUM_LOOPS = 40
9DURATION = 5
10
11
12def create_images(image_filepath):
13    original = Image.open(image_filepath)
14    img = original.copy()
15    filenames = []
16
17    dir_name = ''.join(random.choices(
18        string.ascii_letters + string.digits, k=8))
19    os.mkdir(dir_name)
20
21    img.save(f'./{dir_name}/img0.jpg')
22    filenames.append(f'./{dir_name}/img0.jpg')
23
24    width, height = img.size
25
26    for i in range(NUM_LOOPS):
27        left = random.randint(0, width)
28        top = random.randint(0, height)
29        right = left + random.randint(0, (width-left))
30        bottom = top + random.randint(0, (height-top))
31
32        crop = original.crop((left, top, right, bottom))
33        img.paste(crop, (random.randint(0, width), random.randint(0, height)))
34        filename = f'./{dir_name}/img{i+1}.jpg'
35        img.save(filename)
36        filenames.append(filename)
37
38    images = []
39    for file in filenames:
40        images.append(iio.imread(file))
41
42    iio.imwrite(f"./{dir_name}/animation.gif", images, duration=500, loop=0)
43
44
45if __name__ == "__main__":
46    parser = argparse.ArgumentParser(prog="imageCropReplicator")
47    parser.add_argument("image_file", help="Path to the input image file.")
48    args = parser.parse_args()
49    image_filepath = args.image_file
50    create_images(image_filepath)

Since I'm more well-versed in React.js, I converted this logic to JavaScript and began building a web app.

For the design, I found the 98.css design system created by Jordan Scales. It gave the site the nostalgic feel I was looking for.

After uploading an image, users can view a gif preview of the frames generated using the crop & paste process. They can change the delay, and add a variety of image effects: invert colors, grayscale, sepia, pixelate, and detect edge. Users can also choose to create a seamless loop, which plays the frames start-to-end, then end-to-start.

Thanks for reading! To see the rest of the source code, visit the GitHub repository.