Create parallel Lines always on the outside (no matter the direction)

Questions
1

Example: https://www.babylonjs-playground.com/#FA2H7X#23

Tubes in the example represent walls. And lines

In my app, the user is able to draw each wall from scratch, so he decides whether to start drawing clockwise or counter-clockwise.

I need to change the parallelLines function so that the parallel lines are always on the outside, no matter what direction the walls are drawn.

Because currently the function works for 1 direction only. In the example, you can see that even though I use the outerPoints, the lines are drawn in the inside side for the 3 tubes. Thats not what I want.

I hope this makes sense. Let me know if you need clarification.

2

I am so bad at this but I know both @jerome and @JohnK love those :slight_smile:

1 Like
3

Assuming that the walls are drawn first in the XZ plane and the parallel lines are added by code rather than the user then find the center C of the room created by the walls, for each corner of the room P find unit vector2, u, in the direction CP and then the angle u makes with the x axis for each u

angle = Math.acos(dot(u, (1, 0)).Math.sign(z))

if angles in order increase then order of corners is counter clockwise and if they decrease then order of corners is clockwise (just check this is correct way round)

If the order is wrong way round then use .reverse on array of corners

Form your paths in the order you want to get displacement

2 Likes
4

@JohnK how do I find the center C?

Lets say in the scenario of 4 vectors representing 4 corners.

Is it (V1 + V2 + V3 + V4) / 4 ?

In babylon.js what is the right way to do this?

5

This one is easy

var C = BABYLON.Vector3.Zero();
C.x = (V1.x + V2.x + V3.x + V4.x) / 4;
C.y = (V1.y + V2.y + V3.y + V4.y) / 4;
C.z = (V1.z + V2.z + V3.z + V4.z) / 4;
1 Like
6

Thanks I think you have a typo thought.

Should be C.x, C.y, C.z right?

7

corrected

1 Like
8

@JohnK I am trying to find if the corners were created clockwise or not here https://www.babylonjs-playground.com/#J0VTG5#4

But the angle values are increasing and then decrease at one point.

If you check the console the angles for each corner are calculated:

corner-0 2.356194490192345
corner-1 0.7853981633974484
corner-2 0.7853981633974484
corner-3 2.356194490192345

Am I doing something wrong? Because then I cannot verify what you said here right?

9

No it was me. I forgot that acos only returns values from 0 to PI and for the full circle you need values from -PI to PI. You need to take into account the quadrant the corner is in relative to the room center. In your case the axes are XZ and cos is negative when z is negative so it needs a multiplication by 1 when z is positive and -1 when z is negative. Math.sign(z) gives these values.

Amended here https://www.babylonjs-playground.com/#J0VTG5#6

10

I discovered a flaw in this.

In this scenario https://www.babylonjs-playground.com/#J0VTG5#7, BoxA starting from top left, BoxB from bottom left and so on.

The angles are not in an order at all.

corner-0 2.356194490192345
corner-1 -2.356194490192345
corner-2 -0.7853981633974484
corner-3 0.7853981633974484

What would be a better solution here?

12

@JohnK the accepted solution here would work? math - How to determine if a list of polygon points are in clockwise order? - Stack Overflow

It says it will work for non-convex polygons, but doesnt specify if it works for convex polygons like squares also.

EDIT: It works in my implementation!

13

You are correct my solution was too simplistic. Glad you found a solution that works.

2 Likes