paper.js remove and add new points dynamically to existing, moving (animated) path

Question

I am working on this prototype click me (updated). The problem i am having is following. You can use (W,A,S,D) or (up,left,down,right) to move your snake (path), the idea is that when you bump on another snake (path intersection) you are eating him (he is loosing his parts (points) and you are getting new parts (points). Removing points is not perfect but it works. This is the code:

 var intersections = myPath.getIntersections(testWorm); for(var i = 0; i < intersections.length; i++) { testWorm.segments[i].remove(); }

It could use some tweaking but mainly it just works.

The code for attaching new points however does not work. This is the code:

 var length = 15; // initial points length length++; // increase initial points length to meet algorithm var start = new paper.Point(Math.random()*100,Math.random()*100); // calculate start for new point myPath.add(new paper.Point(myPath._segments * length + start.x, 0 + start.y)); // add new point /* it was suppose to fix problem */ myPath.smooth(); /* it was suppose to fix problem */ view.update();

as you can see, in the moment you try to intersect the worm disappers. but there is no console log with error, so i dont understand what is going wrong.

Thank you for all the help ;)

Take out the smoothing to better see what is going on with your segments. And try to put comments into your code so people understand what is going on. Rename your variables to worm1 and worm2 from myPath and testWorm so it is more clear what is happening. I did just a quick test and it seems to work that there are points added somehow? — Christoph
– Christoph, Commented Sep 7, 2015 at 9:23
i updated the link in the question, added comments and cleared code a little bit. so for me when i try it. it doesnt work, the moment you cross other worm my worm is disappearing. and there is no error in javascript. something clearly is not ok — Mevia
– Mevia, Commented Sep 7, 2015 at 9:44
When I take out the smoothing it works jsfiddle.net/jrzxbkrf/1 — Christoph
– Christoph, Commented Sep 7, 2015 at 10:27
well if you remove smoothing, it actually doesnt disappear, but looks horrible and most important: there is no difference in look. It is getting new points but you cannot see that it does. If you create a path with 10 points, and eat 10 points (you should have 20 in total) you still look the same. But if you create upfront path with 20 points it is twice as detailed and visually longer. So why smoothing doesnt work? and why adding points doesnt actually affect the path? — Mevia
– Mevia, Commented Sep 7, 2015 at 10:40
i have created a simple proof that this method doesnt work at all, see in console jsfiddle.net/Lxfntzts when you open it, you should see one worm shorted (10 points) and one longer (20 points), after 5 seconds (timeout) shorter is getting new 10 points the same way as in project. console.log shows that path indeed is longer and has 20 segments but visually its still short — Mevia
– Mevia, Commented Sep 7, 2015 at 10:51

Jürg Lehni · Accepted Answer · 2015-09-08 08:07:17Z

I'm not sure what this part of the code is supposed to do, but I'm pretty sure it will produce NaN, meaning your point will have an invalid coordinate and can't be drawn: myPath._segments * length. Also, you shouldn't access 'private' properties (starting with a '_'), instead, use myPath.segments.

Collectives™ on Stack Overflow

paper.js remove and add new points dynamically to existing, moving (animated) path

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related