Using JS to animate nodes, linking node properties


#1

Hello!
I’m trying to animate a butterfly. I’ve got 1 half of it as a PNG, and have duplicated and flipped it to make it whole. I’d really like to only rotate one side, and have the other side mirror it…

on the right side, I added a script:

	const RightSide = parent;

	Z.every(100, function () {
		RightSide.rotation([LeftSide.rotation[0] * -1, LeftSide.rotation[1] * -1, 0]);
	})

I’ve also tried Z.on(“frame”) but that didn’t work either… I also assume that this won’t work ‘live’ in Studio, I run a preview every time I try, but the right side refuses to be affected.

What am I doing wrong?
Is there a way to link node properties in a way that would provide a live preview in the Studio canvas?

Many thanks, really enjoying exploring AR with Zapworks Studio :slight_smile:


#2

There are only 2 reasons your code is not doing anything.

  1. It is simply not being called. Where do you invoke Z.every?
  2. The rotation is always 0. You multiply the rotation by -1. But if the initial rotation is 0, the result will never change.

Is there a way to link node properties in a way that would provide a live preview in the Studio canvas?

No live preview in Studio unfortunately.


#3

thanks @marcus,
I tried triggering it on target seen and on ready, I rotated the left wing up and previewed, but the right wing didn’t match the rotation as I’d expected. The idea was once I have it working I would key frame the left wing animation and the right should just match it… it just never worked…

Any further ideas would be appreciated!


#4

Can I ask why you are not just using timelines to animate this?
I would be a lot faster and you could play it in Studio.

Steve


#5

Hi @stevesanerd,
Well, I could but it would mean manually creating twice as many key frames when it could easily be solved with a working code… also, it’s more of a ‘figure it out as it could be useful for other things in the future’ type thing :slight_smile:


#6

I can take a look if you’d like.


#7

Sure, here you go - not much to it…You could easily try the same thing with two planes - let me know if you work it out :slight_smile: also, enjoy my fabric coaster tracking tester (it doesn’t work very well, but it was on my desk when I needed it :stuck_out_tongue: )
pivot test.zpp (7.1 MB)


#8

There are a couple of problems here

RightSide.rotation([LeftSide.rotation[0] * -1, LeftSide.rotation[1] * -1, 0]);

When coding, to see if there’s something wrong, the easiest way to do it is by debugging. Add the following line below the line above

console.log(RightSide.rotation())

But let’s get to what’s wrong:

  1. LeftSide.rotation[0]. It should be LeftSide.rotation()[0]. Same for LeftSide.rotation[1]. Why? Because rotation is a node method. To invoke methods you need to use parentheses, always(well at least on 99% of the cases, javascript is a weird language that you can do some pretty…unconventional stuff, so you might find a way to invoke a function without parentheses, but I’m telling you it’s not the norm).
  2. The right rotation is never changing. Why? Because you never change the left rotation, so the math is always the same.

#9

Thanks so much @marcus! Adding the parentheses fixed the issue :slight_smile:
Even though the left side isn’t rotated, the right wing now matches its rotation when the scene is run.