Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Why is my token rotating and/or moving inconsistently?

The following code is intended to be used to calculate a new location and rotation angle for a ship token by moving its starting point 70 pixels forward then change its starting rotation (facing) by angleOfCurve degrees and then repeat these steps distanceToMove times. Then I update the final position and rotation angle on the token. Each time I try this the distance moved appears correct but not the final location or the final rotation angle/heading of the ship. Sometimes the ship doesn't move at all. The rotation stick on the token is facing forward on the ship image so the direction should be correct. Any ideas why this doesn't seem to work? Thanks --Andy on('chat:message', function(msg) { var params = msg.content.split(' '); if(msg.type == 'api' && msg.selected && msg.content.indexOf('!turn') == 0){ var cmd = params.shift().toLowerCase(); var angleOfCurve = parseFloat(params.shift().toLowerCase()); var distanceToMove = parseFloat(params.shift().toLowerCase()); log(angleOfCurve); log(distanceToMove); var selectedObjs = msg.selected; _.each(selectedObjs, function(obj) { if(obj._type == 'graphic'){ var token = getObj('graphic', obj._id); var angle = ((parseFloat(token.get('rotation'))||0)-90) * (Math.PI/180); var rotation = ((parseFloat(token.get('rotation'))||0)-90); log(rotation); var x = parseFloat(token.get('left')); var y = parseFloat(token.get('top')); var i; for(i = 1; i <= distanceToMove; i++) { x = x + (70 * Math.cos(angle)); y = y + (70 * Math.sin(angle)); rotation = rotation + angleOfCurve; if(rotation < 0) { rotation = 360 + rotation; } if(rotation > 360) { rotation = rotation - 360; } angle = rotation * (Math.PI/180); };         token.set({         top: y,         left: x,         });         token.set({rotation: rotation});         log(rotation); };             }); }; });
1614795204
The Aaron
Roll20 Production Team
API Scripter
Hmm.  I notice you're subtracting 90º from the rotations, but not adding them back before setting them.  That might have something to do with the orientation issue. I would add some logging in your loop and make sure that x and y are changing the way you expect, and rotation too, for that matter.  You're adding angleOfCurve each time, so I suppose you might call this as something like: !turn 10 3 And expect the ship to travel 210 pixels and rotate 30º basically in 3 segments? In that case, I'm not sure why you'd subtract 90º from the angleOfCurve. I think I need more data and perhap to try and run this myself.
Aaron, Thanks for replying. I borrowed your code from&nbsp; <a href="https://app.roll20.net/forum/post/7408135/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/7408135/slug%7D</a> &nbsp;which had the -90 in it. I've since removed the -90 but I'm still not seeing the ship move and rotate the way I'd expect. You are correct in your assumptions. A battleship has a smaller turning arc then a destroyer. Both need to move 3" (210 pixels) through their turning arc. Rather than figure out the trig to find the center of the turning circle, and a new point and angle on that circle, etc, I thought I would just iterate 3 times (1" move, turn, 1" move, turn, 1" move, turn). Calculating a new point 70 pixels in the direction of facing, change the facing by say 10 degrees for a cruiser, 5 degrees for a battleship, 20 degrees for a destroyer, etc. Then once I had the final position and rotation angle, update the token. Here is a before and after when using "!turn 10 3". The adjusted x and rotation seem to be right but the y is down and to the right rather than up and to the right as I would expect. on('chat:message', function(msg) { var params = msg.content.split(' '); if(msg.type == 'api' &amp;&amp; msg.selected &amp;&amp; msg.content.indexOf('!turn') == 0){ var cmd = params.shift().toLowerCase(); var angleOfCurve = parseFloat(params.shift().toLowerCase()); var distanceToMove = parseFloat(params.shift().toLowerCase()); log(angleOfCurve); log(distanceToMove); var selectedObjs = msg.selected; _.each(selectedObjs, function(obj) { if(obj._type == 'graphic'){ var token = getObj('graphic', obj._id); var angle = (parseFloat(token.get('rotation'))) * (Math.PI/180); var rotation = parseFloat(token.get('rotation')); var x = parseFloat(token.get('left')); var y = parseFloat(token.get('top')); log(x); log(y); log(rotation); var i; for(i = 1; i &lt;= distanceToMove; i++) { x = x + (70 * Math.cos(angle)); y = y + (70 * Math.sin(angle)); rotation = rotation + angleOfCurve; if(rotation &lt; 0) { rotation = 360 + rotation; } if(rotation &gt; 360) { rotation = rotation - 360; } angle = rotation * (Math.PI/180); }; token.set({ top: y, left: x, }); token.set({rotation: rotation}); log(x); log(y); log(rotation); }; }); }; });
1614800479
The Aaron
Roll20 Production Team
API Scripter
It will be easier to follow if you do something like: log(`x: ${x}`); The origin for Roll20 is at the upper left corner.&nbsp; Positive X is to the right and positive Y is down. I'll try and take a closer look at this in the next few days. I think that gives me enough information to understand what needs to happen.
Thanks Aaron.
1614804059

Edited 1614804246
Aaron, I got it to work by subtracting 90 in a couple of places, just not where I was first subtracting 90. Entering a negative angleOfCurve turns left, a positive angleOfCurve turns right. I'm going to add a direction (straight, left, right) parameter to the function to handle that and just moving straight distanceToMove. on('chat:message', function(msg) { var params = msg.content.split(' '); if(msg.type == 'api' &amp;&amp; msg.selected &amp;&amp; msg.content.indexOf('!turn') == 0){ var cmd = params.shift().toLowerCase(); var angleOfCurve = parseFloat(params.shift().toLowerCase()); var distanceToMove = parseFloat(params.shift().toLowerCase()); log(`angle: ${angleOfCurve}`); log(`distance: ${distanceToMove}`); var selectedObjs = msg.selected; _.each(selectedObjs, function(obj) { if(obj._type == 'graphic'){ var token = getObj('graphic', obj._id); var angle = (parseFloat(token.get('rotation')) - 90) * (Math.PI/180); var rotation = parseFloat(token.get('rotation')); var x = parseFloat(token.get('left')); var y = parseFloat(token.get('top')); log(`x start: ${x}`); log(`y start: ${y}`); log(`rotation start: ${rotation}`); var i; for(i = 1; i &lt;= distanceToMove; i++) { x = x + (70 * Math.cos(angle)); y = y + (70 * Math.sin(angle)); rotation = rotation + angleOfCurve; if(rotation &lt; 0) { rotation = 360 + rotation; } if(rotation &gt; 360) { rotation = rotation - 360; } angle = (rotation - 90) * (Math.PI/180); }; token.set({ top: y, left: x, }); token.set({rotation: rotation}); log(`x end: ${x}`); log(`y end: ${y}`); log(`rotation end: ${rotation}`); }; }); }; });
1614805838
The Aaron
Roll20 Production Team
API Scripter
Great!