paperjs - Paper.js animating : Movement according to a paths normal -

paperjs - Paper.js animating : Movement according to a paths normal -

i trying animate line , normal ( line ). when alter position after or before setting rotation of normal unusual animation occurs.

is there has thought on that?

i have code in sketchpad:

http://sketch.paperjs.org/#s/jvjlb5taep4rky7bqgvubs+ocogstt2klaueeohzida2q+aztayoi8v/vbm7mfdlucqjne8xz0oe+raieft7cbioomluuonfu9wz6hjcd3njzll2vcih9edcn4fqxlhxsath2xz3//gkr9rgivtimucqpuzn2ds8zlojp6x4xygs5gu5yjo0/xkz8lelecwe0vp29aqlqslj4ish5vwpa0m4hncttijlc9lj3yhxcelzbj5z5fgqzcatc8bxryjfmgrc2b2xz7vmhqndsk2ymjtyc6boqwfy3mhr2bp0gpf96giqqgfvpysgwsuwunxkaril373m/6hwqj3vvahbp7abvqmi96jbjj/nstngknw2r8e8xyhyyuohmsopxvkujnugjjhninupyxftg+p2fp4twm9odkpk6w4l7xdddpan5rbcm/r6gxc4e4tdk5kfspnehipj2irrab3klogfrjwvc9pulcqpdqxxypzmaifwidlczisyc+plvf0jkdbezx607+tfflgzur/l3nv2gxfcw7ulgo/pp5c2jdnp3l7h2d1c6lslfcdjdpwl

var outerh = 200; var outerw = 300; var grouping = new group(); var spine = new path({x:0, y:0}); spine.add({x:0, y:outerh/4}); spine.add({x:-outerw, y:outerh}); spine.strokecolor = 'red'; var np = new path(); np.strokecolor = 'blue'; np.add(new point(0, 0)) np.add(new point(50, 0)); //np.pivot = np.bounds.topleft; group.addchildren([spine, np]); group.position = {x:200, y:300}; var loc = spine.getlocationat(120); var normal = spine.getnormalat(120); np.position = loc.point; np.rotate(normal.angle); view.onframe = function(event) { var sinus = math.sin(event.time ); var cosinus = math.cos(event.time ); // alter x position of segment point; spine.segments[2].point.y += cosinus ; spine.segments[2].point.x += sinus ; var loc = spine.getlocationat(120); var normal = spine.getnormalat(120); np.position = loc.point; //np.rotate(normal.angle); }

if uncomment -> np.rotate(normal.angle); np not rotating line normal point?

please read next post on mailing list explains behavior , offers alternative switch paper.js mode simplifies scenario:

https://groups.google.com/forum/#!searchin/paperjs/applymatrix/paperjs/4eirsgzcaui/sekont-pspwj

paperjs