How to position image correctly with applyMatrix


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:

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)



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:

I finally figured it out, here is a gist with the function written in JS


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.


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

1 Like