Triangle geometry, curves

[Dirtyburger]

Hi, im a student aka newbie, building a program where i want to draw a curved line between two randomized points but i dont know how to approach it.

Im currently using the quadraticBezierCurve together with the two known points  but i need a way of figuring out how to calculate the control point.

Image of the situation: http://imgur.com/a/mYoXJ

Or can i somehow find the position in the middle of the points, angle myself outwards and move N steps outwards depending on how steep i want my curve? 

 

 

[Wingnut]

Hi @Dirtyburger, welcome to the forum.  Sorry for the slow replies.

I used our playground searcher (search in code field)... to search for all occurrences of 'bezier'.  I ignored all the ones that spoke-of BezierEasing, because that is a feature of Babylon Animation, which is not really on-topic.    I was left with 3 playground demos... that COULD be your answer.  (Unfortunately, I have not worked with Beziers/lines very much, but I'm a pretty good searcher.)

#1.  https://www.babylonjs-playground.com/#RF9W9#367

In the above demo, I think the Bezier handle is... line 47.  Play with those numbers... see if you smile. 

#2. https://www.babylonjs-playground.com/#1023O#48

Again, we see a vector3... in the middle of two others... at line 101... which is the yellow line.  At lines 108 and 109, we see TWO vector3's in the middle of 2 others.  Is this a 2-handle Bezier?  A close look at the orange line... it COULD INDEED be a 2-handle beast. 

#3. https://www.babylonjs-playground.com/#YSXOQ#0  

I don't know if there is anything worthwhile there, but what the heck, we'll bring it along for the ride.

Hope this helps.  Smarter people than I... will likely comment soon.  Good luck... tell us about your troubles and/or discoveries, if you wish.  thx.  Party on!

[Dirtyburger]

@Wingnut Thanks for taking the time to reply, but maybe i wasnt clear in my first post. My real problem is the math or approach behind finding the control point (middle vector3). 

Here is my latest idea that i dont know how to execute in babylon code:

Imagine i have the two known positions A and B. I can then find the position in between those points by position+position/2 and create a mesh there.

Angle mesh 90 degrees from the angle made up by A and B and move/traverse/teleport x amount of distance outwards/forward.

Save that position and use for my curve. Done. 

 

 

[TammySmith]

@Wingnut Thanks for the resources

[Wingnut]

Hi TS!  My pleasure.  They are actually coded by others.  Just wanted you to know that.    Welcome to the forum, and thanks for the kind words!

I/we still haven't answered DirtyBurger's challenge.  Sometimes I hope that others will help with issues, and then I forget to "follow-up".  It results in un-solved challenges and unhappy programmers, sometimes.

-------------------------

Any luck with this, DirtyBurger?  Sorry for the slow replies.  Is the Bezier control point on the same z-plane as A and B?  Or, not necessarily?  I noticed you said "outwards" and "forward"  (z/depth == distance from camera, if drawing plane is X/Y). 

I am not qualified to speak about this, but nobody else is even trying.

I think we should start with our playground drag'n'drop demo.  We can place all 9? points (3 points, each with 2 control-point handles?) on the "ground" in that demo, and start playing, visually.  Convert our drag'n'drop demo... into a Bezier curve drawing program.    Then, try to gather the values of ANY visually-drawn curve, and save those values, so the curve can be reproduced later, with code. 

Unfortunately, the drag'n'drop demo can only give us 2D Beziers... and I think DirtyBurger needs (path)3D.

@jerome, @adam, DirtyB, anyone... would you guys have any thoughts on this?  I don't know if I have a clue.  I think I am confusing everyone... including myself.    Many times, I have thought about HOW to "draw" a camera flight-path within a BJS scene, and save it somehow.  Perhaps this project... can lead to that feature, someday.

[jerome]

Actually, you can't compute the control because there's no rule for this ... the control point is, well, just your decision : you choose a control point, a start point and an end point, then you get the related curve.

[Wingnut]

Right, DB's is halfway between startpoint A and endpoint B, then control point C is offset SOME distance away-from that line.  (with point C remaining same distance from A and B).

But, what happens when the control-point handles... are made longer/shorter in a drawing program?  A value changes, yes?  That value affects the curve plot, yes? 

And angling/tilting the control handles... changes the curve, too.  Can control-handle lengths and angles... be stored somehow, so a program can reproduce that curve exactly?  (My brain is stuck in Corel PhotoPaint, I think.)

And the handles... (2 dots with a dashed line between)... can be detached from each other, too.  In drawing programs, you can move JUST ONE of the two handles, if you choose.  If that is done, do we need to store a left-handle value, and a right-handle value?

I think I am showing my lack of experience, here... yet again.  I don't even know what I am asking.    I should go web-reading.

[jerome]

For instance, if the first and last points are "start" and "end", one could choose, as a control point, any point located on the perpendicular bisector of the segment start-end.

This is a way, like another to choose computationally a control point equidistant (why ?... why not) from the segment edges.

[Dirtyburger]

37 minutes ago, Wingnut said:

Hi TS!  My pleasure.  They are actually coded by others.  Just wanted you to know that.    Welcome to the forum, and thanks for the kind words!

I/we still haven't answered DirtyBurger's challenge.  Sometimes I hope that others will help with issues, and then I forget to "follow-up".  It results in un-solved challenges and unhappy programmers, sometimes.

-------------------------

Any luck with this, DirtyBurger?  Sorry for the slow replies.  Is the Bezier control point on the same z-plane as A and B?  Or, not necessarily?  I noticed you said "outwards" and "forward"  (z/depth == distance from camera, if drawing plane is X/Y). 

I am not qualified to speak about this, but nobody else is even trying.

I think we should start with our playground drag'n'drop demo.  We can place all 9? points (3 points, each with 2 control-point handles?) on the "ground" in that demo, and start playing, visually.  Convert our drag'n'drop demo... into a Bezier curve drawing program.    Then, try to gather the values of ANY visually-drawn curve, and save those values, so the curve can be reproduced later, with code. 

Unfortunately, the drag'n'drop demo can only give us 2D Beziers... and I think DirtyBurger needs (path)3D.

@jerome, @adam, DirtyB, anyone... would you guys have any thoughts on this?  I don't know if I have a clue.  I think I am confusing everyone... including myself.    Many times, I have thought about HOW to "draw" a camera flight-path within a BJS scene, and save it somehow.  Perhaps this project... can lead to that feature, someday.

No, i never did figure it out. I ended up with a curve that was all wonky but it got the job done. This problem still haunts me tho.

The funny part is that its supposed to be a simple trigonomy problem but since im math-retarded im having a hard time with it.

this is my application and those are my wonky curves . It basically shows from which square the cylinder has moved, one step at the time.

So since i have positions of the "from"(point A) and "to"(point  square, all i needed was a point C. C will always be on the same point on the y-axis (height in the scene).

Lets say i know which distance i want the C point to be from the line between A and B, That means i now also know the lenght of the side of AC and BC with the use of pythagoraen. So i now have all sides which also means all angles and all information i could possible need but i just never figured out how to translate the formulas i found when googling into a javascript/babylon method.

But once again, this problem isnt important for me to solve anymore so dont feel you need to go out of your way helping me

[Convergence]

you can try 

 

var c = BABYLON.Vector3.Center(a, b).add(new BABYLON.Vector3(0, BABYLON.Vector3.Distance(a, b) / 5, 0));

change axis in the add portion as deeded.

[Dirtyburger]

29 minutes ago, Convergence said:

you can try 

 

var c = BABYLON.Vector3.Center(a, b).add(new BABYLON.Vector3(0, BABYLON.Vector3.Distance(a, b) / 5, 0));

change axis in the add portion as deeded.

Cant try it live atm but after some quick testing in the playground it seems that you might have solved my problem