i working through animation need make plane follow path given , appear "circling" earth. here codepen, can see simple.
my problem angles, trying see how should rotate plane moves through path calculating slope of 2 points, , turning degrees.
even though have added epsilon safe-check consistent differences across points , every other safe-check, getting approaches +-90 degrees, changes signs, instead of passing other quadrant 120 degrees, etc.
i can understand caused fact
you can see happening in console right in mid point (displays: slope, arctangent, degrees).
to solve this, recurring math.atan2(), using newpoint.x - firstpoint.x, newpoint.y - firstpoint.y arguments. starts off right values (codepen here). still funky rotation.
here code (i'm not posting svg image because it's large):
js
var snap = snap('#globe_1_'); // trail 1 var trail1 = snap.path('m354.3,707.9c13.9,14.5,27.9,27.2,41.7,38c13.9,10.9,27.2,19.3,39.3,25.4 c12.6,6.1,24.8,9,35.7,10.3c10.9,1.2,21.1-1.2,30.2-5.4c17-7.8,29-24.8,35.7-48.3c7.2-23.5,9-55,5.4-91.8 c-3.7-36.8-12-77.9-24.8-120.9c-12.6-43-30.2-87.6-51.9-131.7c-21.1-44.1-45.2-85.8-70.7-122.7s-50.8-69.5-77.3-95.5 c-27.2-26-52.5-43.6-75.6-53.2c-22.9-9.7-43.6-10.3-60.4-2.5c-16.3,7.8-27.9,24.2-35.1,47.7c-7.2,23.5-9.7,53.8-6.6,88.8') .attr({ id: 'trail1', fill:'none', stroke: '#c25353', strokemiterlimit: 10 }); var len = trail1.gettotallength(); var plane1 = snap.path('m375.7,708.4c0.1,0.8-0.7,1.8-1.6,1.9l-10.4,0.2l-8.4,15.1l-4,0l4.1-14.6l-7.8-0.2l-2.7,3.2l342,714 l1.6-4.9l-1.7-5.4l3.1,0.1l2.5,3.6l7.8,0.2l-4.3-14.6l4,0l8.3,14.7l10.4-0.2c375.5,706.7,376,707.1,375.7,708.4z') .attr({fill: '#cdcccc' }); var initpoint = trail1.getpointatlength( 1 ), lastpoint, slope = 0, lastlen = 0; snap.animate(0, len, function( value ) { movepoint = trail1.getpointatlength( value ); if (lastpoint && ( math.abs(lastpoint.y - movepoint.y) > 1 || math.abs(lastpoint.x - movepoint.x) > 1 )) { var slope_val = (lastpoint.y - movepoint.y) / (lastpoint.x - movepoint.x), slope_atan = math.atan2(movepoint.x - initpoint.x, movepoint.y - initpoint.y), slope_deg = snap.deg(slope_atan); slope = slope_deg; console.log('capturing rotation', slope_val, slope_atan, slope_deg); lastlen = value; } plane1.transform( 't' + parseint(movepoint.x - 350) + ',' + parseint( movepoint.y - 700) + 'r' + slope); lastpoint = movepoint; }, 5000, mina.linear); can please me out, thank you
i'm not sure of full effect after, if purely 2d angle, snap has built in (returning angle point along line), no need work hard...
element.getpointatlength() returns angle alpha, movepoint.alpha can used...
relevant line below, , other calculation lines removed.
plane1.transform( 't' + parseint(movepoint.x - 350) + ',' + parseint( movepoint.y - 700) + 'r' + (180 + movepoint.alpha)); 
Comments
Post a Comment