# How to trace paths with Phaser 3

**URL:** <https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818>\
**Category:** Phaser 3\
**Created:** [February 6, 2021, 5:07pm UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818 "2021-02-06T17:07:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TharinduDG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tharindudg/32/4725_2.png) [@TharinduDG](https://phaser.discourse.group/u/TharinduDG)\
**Post date:** [February 6, 2021, 5:08pm UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/1 "2021-02-06T17:08:00Z")

</div>

Hi All,

- I came across this cool kids educational game : [Drawing Letters](https://robowhale.com/html5/drawing-letters/)
- It allows us to draw letters and it reveals a different texture while you’re drawing the letter
- it is also forcing the user to draw the letters in the exact path as shown in the video below. **(if you cannot see the video, please reload the page while holding Shift)**

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e69c183804f49592cf0d75f736101f323aea8dd9.mp4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e69c183804f49592cf0d75f736101f323aea8dd9.mp4)

- The letter revealing effect can be done like this [example](https://labs.phaser.io/view.html?src=src/game%20objects%5Crender%20texture%5Cerase%20part%20of%20render%20texture.js&v=3.52.0)

- My question is **how can I force the user to stick to the correct path while drawing the letter**?

Thanks.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 7, 2021, 2:19am UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/2 "2021-02-07T02:19:38Z")

</div>

1. [Get a tangent vector](http://phaser.io/examples/v3/view/paths/curves/get-tangent-vectors-on-cubic-bezier-curve) _T_ at the current position on the curve.
2. Get a vector _P_ for the pointer drag movement
3. Combine them somehow to get a new position on the curve. Maybe _T_ scaled by dot product of _T_ and _P_, I’m not sure.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 8, 2021, 5:07pm UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/3 "2021-02-08T17:07:16Z")

</div>

> **[Vector projection](https://en.wikipedia.org/wiki/Vector_projection)**
>
> The vector projection of a vector a on (or onto) a nonzero vector b, sometimes denoted 
>   
>     
>       
>         
> proj
>           
>             
> b
>             
>           
>         
> ⁡
>         
> a
>         
>       
>     
> {\\displaystyle \\operatorname {proj} \_{\\mathbf {b} }\\mathbf {a} }
>   
> (also known as the vector component or vector resolution of a in the direction of b), is the orthogonal projection of a onto a straight line parallel to b. It is a vector pa wh...

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 9, 2021, 8:29pm UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/4 "2021-02-09T20:29:55Z")

</div>

You can do it a little like this:

> [@Orthogonal projection on a curve (Phaser 3)](https://phaser.discourse.group/t/orthogonal-projection-on-a-curve-phaser-3/8858):
>

---

<div class="post-metadata">

**Author:** ![TharinduDG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tharindudg/32/4725_2.png) [@TharinduDG](https://phaser.discourse.group/u/TharinduDG)\
**Post date:** [February 10, 2021, 3:04am UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/5 "2021-02-10T03:04:44Z")

</div>

@samme This is so cool. Thank you so much.

---

<div class="post-metadata">

**Author:** ![ndhaniff](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ndhaniff/32/6474_2.png) [@ndhaniff](https://phaser.discourse.group/u/ndhaniff)\
**Post date:** [May 5, 2022, 12:17am UTC](https://phaser.discourse.group/t/how-to-trace-paths-with-phaser-3/8818/6 "2022-05-05T00:17:32Z")

</div>

Hi Samme. Can you point out what topic in math to understand this especially the tangent on the curve I can’t find which topic to look into.