Two.js: What does Path.contains do?

[adroitwhiz]

I'm trying to refactor beginning/ending for cyclic paths, and I came across the contains utility function in the process. I can't seem to figure out what it's meant to do. My current best guess is that it determines whether a given t value for a path lies exactly on an anchor.

It looks like this check is unnecessary, since if elapsed >= target, then target - elapsed will always be either 0 or negative, so the entire if-block could be replaced with if (elapsed === target) return true, but is there something I'm missing?

I can't get this function to ever return true for t-values other than 0 and 1, even when passing t-values I know correspond to anchor points, likely due to floating-point error.

If the function does return whether a t-value lies exactly on an anchor, I think that floating-point error significantly hampers its usefulness.

[jonobr1]

I believe that's what it's for. When I was rewriting the current version of beginning / ending I noticed there were these weird hiccups where the renderer would draw a point in a crazy place when t approached an anchor just before and after. I'm sure the floating-point precision doesn't help, but on top of that the length calculations is really rough. This is supposed to combat that in beginning / ending. Perhaps this isn't a problem nowadays though.

This is an example of the demo I would test against: https://jsfiddle.net/jonobr1/6tokL9y2/

If the animation plays smoothly at 270 and 180 degrees then there isn't a problem, which v0.7.0 plays smoothly because of -- presumably -- the contains logic.

[barrylachapelle]

Hey @jonobr1 - I see the example (https://jsfiddle.net/jonobr1/6tokL9y2/) only animates 75% between the 4 points - is there any simple way of animating/closing this shape using makeCircle()?

I have been trying to animate a circular path for a couple of days now ;) I'm in the weeds trying with 6 vectors and makeCurve() - trying my best to trim off the first and last vectors.

[jonobr1]

Thanks for the question. At the moment there isn't, you have to construct it yourself... But, this is definitely something I'd like to address sooner rather than later.

[barrylachapelle]

Thanks, @jonobr1 - by 'construct it yourself' - am I on the right track? Using makeCurve() and setting dynamic beginning and endpoints in the animation?

[jonobr1]

You're close! You should be able to use makeCurve and get away with using 5 vertices. I'll try to pull up an example for this.

[barrylachapelle]

Hey @jonobr1 I'm still stuck on this. I can't seem to get it work with 5 verts and 6 seems more likely. Would love to know how you think I may accomplish this. This project I'm working on hinges on it.

[jonobr1]

Sorry for the delay, been underwater with some work this past week. I was making a small demo for you, but I discovered some other errors that your question raises. Hoping to have this resolved and give you an example today. Once I do patch this, I will also update NPM packages, because this issue is also urgent and now fixed in dev.

[jonobr1]

Okay, this has been published to NPM with the following fix:

var circle = two.makeCircle(0, 0, 50);
circle.closed = false;
circle.ending = 0.88;

[jonobr1]

I'm going to close out this issue, because A) I answered @adroitwhiz's question to the best of my knowledge and B) resolved @barrylachapelle's problem. In the future please post this as a new issue @barrylachapelle. Thanks!

[barrylachapelle]

Fantastic @jonobr1 will give it a go thank you for the effort - and apologies for highjacking the thread.

[barrylachapelle]

It works! Thank you kindly @jonobr1

[jonobr1]

Glad to hear! Hoping to add this kind of consistency to the rest of the primitives soon.