Drawing constraint

p5.js Libraries
1

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
and this is my code: https://editor.p5js.org/NicolasTilly/sketches/TECIwdmVU

Thank you for your help.

1 Like
2

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.

1 Like
3

Reminds me of this

1 Like
4

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

5

(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

1 Like
6

thank you for your answers.

1 Like