Splitting up a webcam video into 3 parts and rearranging them

Hello everyone,

I am fairly new to processing and to coding in general so I’m having a hard time, figuring this out.
I am currently working on a video installation that is supposed to film someone standing on a marked spot. The live video should then be split up into at least 3 parts (say head, torso, legs(doesn’t need to be accurate)) who are then rearranged so that for example the head and legs are switched. Or some parts could be flipped horizontally.

I know how to get the video of the webcam into processing and how to rotate it and all those things. But I just can’t figure out any way I can split up the video and rearrange it.

Do you have any tips on a way to approach this or anything I could look into? Is it even possible to do this in processing? Is there a software that could do this better(I want to add graphic overlays as well)

Thanks a lot in advance!

This can all be done in Processing. You need to become familiar with the following functions in this order:

PImage, get (or copy), translate/rotate and pullMatrix/PushMatrix.

All their definitions can be found in the reference. For the last terms, I also suggest you read this tutorial: https://processing.org/tutorials/transform2d/

The concept is this. You get your image from your video stream and store it in a PImage object. Then you can use get to extract a section of the image. What you want to do is to create 3 PImage objects that will have your head, torso and legs sections of your images. Now, instead of drawing your main (video) image into the sketch, you can use the different fragments like this:

image(torsoPImage, posx, posy);

Where the positions are specified by you. You mix these calls with rotations or even translations to reposition your segment in your canvas. You need to use pul/push functions in order to reposition the segments independently from the other segments. The tutorial above will explain the concept if you are not familiar with them. Positioning a segment would look something like this:

image(torso, posTorsoX,posTorsoY);


1 Like

Perfect, thanks a lot! I will try this out and come back if I have any more questions!

Thanks again!

Also check out the version of image() that takes 9 parameters - image, destination rectangle, source coordinates. This will be more efficient than using get().

1 Like

So it all worked out with your tips! Thank you! :slight_smile:

1 Like