How to use split screen video sections as textures?

p5.js Coding Questions
1

Here is what I am trying to do: load one split screen video (for example https://www.youtube.com/watch?v=5eEXKzbeH7c ) and then use either side of the video as a texture for two different GL shapes.

Hoping the community can point me in the right direction to answer this question:

  • How do you translate the position and crop the dimensions of textures on gl shapes?

Brainstorming about it, the first idea which comes to mind is to do the work myself on a canvas and then use my canvas as a texture. However, this might have performance penalties when using video.

Here is a template for where I would like the video to be split:
https://codepen.io/jedierikb/pen/dEVKWL?editors=1010

Thanks,
Erik

2

Any suggestions on this one? Amongst other applications would be sliding a video texture around on an object in response to the user’s input. Help appreciated.

3

Here is an example of translating the scaling a gl texture:
http://learnwebgl.brown37.net/10_surface_properties/texture_mapping_transforms.html

How do we control a texture in a similar way using p5.js?

4

Herein lies the answer to how to move a texture around on a gl shape:
https://p5js.org/reference/#/p5/textureWrap