Coding Challenge - Image Splitter

Hi Daniel!

I've recently binged watched most of your videos as I've been tinkering with P5.js.

I have a coding challenge request, but with a twist - I'v already done it. But, I'd like to see your approach and if you had any variation on it.

The challenge is to replicate what happens in this GIF - https://i.imgur.com/w59YRy5.gifv

Take a single image, then split it vertically and then split the result horizontally to be left with 4 images made from parts of the original image.

I have achieved this for an image, displaying the resulting images in a 2x2 grid (the GIF arranges them all in a row).

I'd love to see how you tackle this, showing how it could be optimised, animated etc, and maybe even look at using a video or webcam input?

Start by reviewing the linked GIF and the requested p5.js image-splitting behavior. Define the scope around splitting one image into four parts and displaying them, then decide whether animation or video/webcam input belongs in the same example. Done means the behavior is demonstrated clearly, with any optimization or variation documented.

Written by the indexing model from the issue text.