javascriptaugmented-realityinstagram-apispark-ar-studio

Seemingly Simple. Spark AR how do you rotate an object an additional 90 degrees each time you press the button?


I have a button and a 3d object. I would like the object to rotate 90 degrees smoothly each time i press the button once. So if i press it 4 times it does a full 360 turn. I tried googling for an example but had no luck so far. Working with Patches Spark AR.

I can get it to snap rotate 90 degrees on press ok, but stuck after this, i need it to accumulate in degrees 90,180,270 smoothly etc on each press. Working progress of layout.

screenshot


Solution

  • Without animation

    The easiest way to do that with patches is to have a Counter patch that will increase each time the Tap event is triggered. The counter can take values in a range from 0 to 3 (including both ends). Then its Value is just Multiplied by 90 and is sent to the rotation patch of an object that needs to be rotated. This is done with the Pack patch that, in this case, accepts the value for just one rotation axis and the other two are always zeros. You can adjust it for your own way of rotation. enter image description here

    With animation

    Below is one of the solutions how this can be animated. Tap triggers the Animation to start immediately, but animation reset and changing the Counter happens with the Delay, which is the same as the animation duration. Then, with Multiply and Add patches we can figure out the start and stop values that the angle of rotation should take, and feed them to Transition patch. The last Swizzle patch can be replaced with Pack patch, but swizzle is probably a little bit more efficient.

    enter image description here

    Other Notes

    By the way, using custom buttons and other 'self-made' UI elements is not advised by Spark AR official guidelines.