# How to position image correctly with applyMatrix

**URL:** <https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766>\
**Category:** Coding Questions\
**Created:** [June 11, 2020, 10:41am UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766 "2020-06-11T10:41:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [June 11, 2020, 10:41am UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766/1 "2020-06-11T10:41:50Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b124bb03473d404e46bb2c6041cd205afc848fab.jpeg)

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:

```auto
function getTransformationMatrix(v1, v2, v3, v4)

```

Thanks!

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [June 11, 2020, 12:18pm UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766/2 "2020-06-11T12:18:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [June 11, 2020, 7:06pm UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766/3 "2020-06-11T19:06:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 11, 2020, 7:23pm UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766/4 "2020-06-11T19:23:07Z")

</div>

Thanks for sharing your solution!

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

> **[Projection mapping](https://en.wikipedia.org/wiki/Projection_mapping)**
>
> Projection mapping, similar to video mapping and spatial augmented reality, is a projection technique used to turn objects, often irregularly shaped, into a display surface for video projection. These objects may be complex industrial landscapes, such as buildings, small indoor objects or theatrical stages. By using specialized software, a two- or three-dimensional object is spatially mapped on the virtual program which mimics the real environment it is to be projected on. The software can Altho...

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/](http://keystonep5.sourceforge.net/)

[https://fh-potsdam.github.io/doing-projection-mapping/processing-keystone/](https://fh-potsdam.github.io/doing-projection-mapping/processing-keystone/)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [June 11, 2020, 7:38pm UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766/5 "2020-06-11T19:38:44Z")

</div>

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