# Drawing constraint

**URL:** <https://discourse.processing.org/t/drawing-constraint/16367>\
**Category:** Libraries\
**Created:** [December 13, 2019, 9:58am UTC](https://discourse.processing.org/t/drawing-constraint/16367 "2019-12-13T09:58:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicolas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolas/32/7166_2.png) [@nicolas](https://discourse.processing.org/u/nicolas)\
**Post date:** [December 13, 2019, 9:58am UTC](https://discourse.processing.org/t/drawing-constraint/16367/1 "2019-12-13T09:58:14Z")

</div>

Hi,  
I want to make “invisible walls” in my sketch so that when you draw a trace with the mouse, it is blocked and the line is drawn around this form of “invisible walls”.

I tried with the p5 Play library but it works with sprites and I can’t use `line();` to draw a solid line. And i want to draw a solid line. I use `collide();` form p5 Play but i’m not sure it is the good way to do that.

Here is the result: [https://editor.p5js.org/NicolasTilly/present/TECIwdmVU](https://editor.p5js.org/NicolasTilly/present/TECIwdmVU)  
and this is my code: [https://editor.p5js.org/NicolasTilly/sketches/TECIwdmVU](https://editor.p5js.org/NicolasTilly/sketches/TECIwdmVU)

Thank you for your help.

---

<div class="post-metadata">

**Author:** ![manno](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@manno](https://discourse.processing.org/u/manno)\
**Post date:** [December 15, 2019, 6:27pm UTC](https://discourse.processing.org/t/drawing-constraint/16367/2 "2019-12-15T18:27:28Z")

</div>

Not exactly sure what you have in mind, but the play library attempts to resolve the collision which results in the ‘teleporting’ from one edge to the other of the blocking rect.  
You say you want invisible walls yet want to draw solid lines.  
Should the black sprite follow the shortest route around the blocking line? And indeed as tight as possible or more smooth? Dan Shiffman has a few videos on ray casting in which he adreses line intersection if I remember correctly.  
I suppose some math on intersecting lines and following line ‘contours’ could do. Otherwise A\*? Bit of a stretch but with short distances, it might work. You’d probably be limited to tiles though.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 16, 2019, 6:06pm UTC](https://discourse.processing.org/t/drawing-constraint/16367/3 "2019-12-16T18:06:57Z")

</div>

Reminds me of this

> [@Connecting outermost dots with a single line?](https://discourse.processing.org/t/connecting-outermost-dots-with-a-single-line/16395/7):
>
> There is also a Java example of Monotone Chain here: [https://en.wikibooks.org/wiki/Algorithm\_Implementation/Geometry/Convex\_hull/Monotone\_chain#Java](https://en.wikibooks.org/wiki/Algorithm_Implementation/Geometry/Convex_hull/Monotone_chain#Java) which has an animation demonstrating the search method [[image] ](https://upload.wikimedia.org/wikipedia/commons/9/9a/Animation_depicting_the_Monotone_algorithm.gif) …and a video demo of atduskgreg’s hull implementation which also shows the search method:

---

<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:** [December 16, 2019, 6:21pm UTC](https://discourse.processing.org/t/drawing-constraint/16367/4 "2019-12-16T18:21:37Z")

</div>

If I’m understanding right, you are describing something like the magnet tool in photo editors such as Photoshop – is that correct?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 16, 2019, 6:36pm UTC](https://discourse.processing.org/t/drawing-constraint/16367/5 "2019-12-16T18:36:14Z")

</div>

(I don’t know the algorithm)

I imagine a car that follows the mouse and draws a line.

Normally the car can go straight but when there is an obstacle (rectangle) it drives around it towards the mouse

---

<div class="post-metadata">

**Author:** ![nicolas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolas/32/7166_2.png) [@nicolas](https://discourse.processing.org/u/nicolas)\
**Post date:** [January 27, 2020, 6:05pm UTC](https://discourse.processing.org/t/drawing-constraint/16367/6 "2020-01-27T18:05:36Z")

</div>

thank you for your answers.