API to help place 'long' animated tokens

Hi Y'all!, I want to check out if something is possible and see what the hivemind thinks is the best way to go about this. I build very simple animations to help my players with immersion in a sci-fi game I run. I don't much like the in game vfx and so this is my solutuion. See here here and here for examples. The missile/laser animations are very long and thin and can be hard to place because of the way roll20 deals with rotation (i.e. the pivot point is always in the centre of any token, so it makes placing the 'ends' of these animations at the right target time consuming and annoying). So my question is, is it possible to make a script to fix the start and end of these animations so that they lock to ends of other tokens? So I could designate the bogie and the players ship as the two ends of the animation and then automatically rotate, re-size and place the animation using a macro/API and track/change as the origin and target tokens move? Any help gratefully received (including out of the box suggestions for different ways to go about this). Disclaimer; I use alot of APIs and have modded a few but I am no coder...

I am also curious about this, though, I'd be worried about the animations getting distorted due to long distance stretching. For instance, a laser shot that travels 4 tiles in one second being stretched to a wider size would end up in a faster looking lazer, as well as a longer one.

Definitely possible to have the api calculate the size and orientation of the graphic and position it appropriately.  In the case of varying lengths, is probably suggest having several animation of different fine tokens and let the API swap them out as needed.  Now for the caveat:  last I checked, the API didn't have a way to control the play state of animations. To make this work, you might need to have all the animations present and playing, and let the API move them offscreen an on screen as needed. 

Thanks for your replies! I am glad this is possible! Now comes the $64,000 question; is there any existing code or scripts that do this sort of thing that I could look at to achieve this, bearing in mind my (weak) script-fu?

Here's a really simple example.&nbsp; Just throw that in your API and run: !lazer @{selected|token_id} @{target|token_id} With a source token selected.&nbsp; &nbsp;It will create a graphic with the ends lined up on the centers of each token and the right edge of the graphic on the source (first token) and the left edge on the target (second token). This also shows the problem with animated graphic and the API right now.&nbsp; Uncomment the first imgsrc and comment out the second and save, and you can see how the API creates animated images, but they are broken. The Code: on('ready',()=&gt;{ // Uncomment the webm to see the problem with animated images from the API // const imgsrc = '<a href="https://s3.amazonaws.com/files.d20.io/images/107370788/lsINBhZ6Kx5m37qI9kmMXQ/thumb.webm?1583974206" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/107370788/lsINBhZ6Kx5m37qI9kmMXQ/thumb.webm?1583974206</a>'; const imgsrc = '<a href="https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/thumb.png?1583976955" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/thumb.png?1583976955</a>'; const tall=16; on('chat:message', (msg)=&gt;{ if('api'===msg.type &amp;&amp; /^!la[sz]er\b/i.test(msg.content)){ let args = msg.content.split(/\s+/); let source = getObj('graphic',args[1]); let target = getObj('graphic',args[2]); if(source &amp;&amp; target){ let p1 = { x: parseFloat(target.get('left')), y: parseFloat(target.get('top')) }; let p2 = { x: parseFloat(source.get('left')), y: parseFloat(source.get('top')) }; let mid = { x: p1.x + (p2.x-p1.x)/2, y: p1.y + (p2.y-p1.y)/2 }; let dist = Math.sqrt(Math.pow(p2.x-p1.x,2) + Math.pow(p2.y-p1.y,2)); let theta = Math.acos( (p2.x-p1.x) / dist); let angle = theta / (Math.PI / 180); if(p1.y&gt;p2.y){ angle=360-angle; } createObj('graphic',{ imgsrc, left: mid.x, top: mid.y, rotation: angle, pageid: source.get('pageid'), layer: source.get('layer'), width: dist, height: tall, isdrawing: true }); } else { let who = (getObj('player',msg.playerid)||{get:()=&gt;'API'}).get('_displayname'); sendChat('',`/w "${who}" Usage: &lt;code&gt;!laser [source_id] [target_id]&lt;/code&gt;`); } } }); });

Many thanks for the help Aaron! Aye; I get a laser effect token with the webm but it doesn't play until I tell it to. Weird! But at least it's aligning it to the tokens, so it is of some use. Can we store images in other places for this script to use (other than amazonaws)? Possibly dropbox links for example?

Nope. The API can only create images stored in a user library. The animation not playing is a known bug. I hope it gets fixed soonish.&nbsp;

Many thanks! How can I store my own images in a user library (sorry for the newbie questions!). So it's a bug not a 'feature'; how long has it been like that?

It has always been that way. You're storing them in your user library by dropping them on the map. The easiest way to get the URL is to select them then push the Z key, right click and copy the URL.&nbsp; You then just need to change the "med","max", or "original" in the name to "thumb". The API can only create thumb urls.&nbsp; When I made the script, I changed from: <a href="https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/med.png?1583976955" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/med.png?1583976955</a> To <a href="https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/thumb.png?1583976955" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/107374499/AVWD9EUVyRzBKkU9V0BANA/thumb.png?1583976955</a>

Many thanks Sir! I shall play with this and see how it works out

Cool, definitely hit us back for any questions. I'll take about programming till I'm blue in the face. =D

Well; I have substituted my own WebMs and also made it so I can call lots of different effects with the same script but I notice that as written, the script that is shooting has to be to the left of the one that is the target. Is there a way to generalise things so that the token clicked on first is the shooter and the target clicked on second is the target, wherever they are in relation to one another?

Hmm.. The directionality all worked out for me: I spent most of the time making sure that was the case.&nbsp; If you want to post your code, I can take a look and see if I can spot the problem.

That's really cool! Did you find those animations or did you make them yourself? Look really badass! Also, In the second video, are you manually moving galactica? Or is a script/macro moving it?