How to position image correctly with applyMatrix

p5.js Coding Questions
1

Hi,

I’ve started my first AR project and I can’t figure out how to position image correctly in a real world.
For example, I want to replace my TV screen with custom image like this:

ar
ar800×442 86.8 KB

My question is: if I know the coordinates of the edges of my TV screen, how can I get applyMatrix arguments to perform correct image transformation and place it in correct perspective?

Something like:

function getTransformationMatrix(v1, v2, v3, v4)

Thanks!

2 Likes
2

Update: Just realized for 4 target coordinates I need 3d transformation, I guess in that case applyMatrix will be taking 4x4 matrix as argument :thinking:

3

I finally figured it out, here is a gist with the function written in JS https://gist.github.com/ognjenvucko/1e6ee7b3ee62f0ee4fde4255384f4352

2 Likes
4

Thanks for sharing your solution!

A related problem to the one you are describing is “projection mapping.”

This is more often applied to projecting something into a 3D object using a projector, but may also applying to mapping an image into a video feed to create an in-situ illusion.

Processing has some projection mapping libraries for this purpose that also provide interfaces to make free transformation of a PGraphics easier, including Keystone.

http://keystonep5.sourceforge.net/

https://fh-potsdam.github.io/doing-projection-mapping/processing-keystone/

3 Likes
5

Wow, really interesting references to Projection mapping and keystone!
Thank you @jeremydouglass!

1 Like