Exploring complex motion

Let’s explore how complex motion is implemented through an example

Complex motion
Motion in virtual worlds can take more complex forms. For example, you may want to only trigger motion when the user interacts with an object in the world, or the motion of an object follows-on after another object, or a large number of objects perform similar type of motion. The creator of the world should be able to choose the correct approach to achieve the goal of motion within their world.

Event-driven motion
We will explore the concepts of event-driven motion briefly using AFrame animation. To begin, we need to understand what “event-driven” means. The concept of events is similar to using a webpage’s event system using Javascript.
Just imagine you have an ear attached to the animation. The ear is an analogy for the listener system. This ear will only react when it hears a specific word, for example the word ‘RUN’. When it hears the word ‘RUN’, it will run the animation.
Another entity or the user can shout ‘RUN’ to the listening entity. This is the analogy to dispatching an event to the listener. You can also stop or pause the animation by using another pre-defined word, e.g. ‘HALT’.
The animation attribute allows you to define start, pause and resume events which respond to a list of words. Finally, the animation can inform its listeners that the animation has finished by saying ‘animationComplete’. Let’s see this in action.

Complex motion of Newton’s Cradle
We have provided an example (check the link “Complex Motion-Newton’s Cradle” in ‘See Also’ below) which simulates the toy called Newton’s Cradle. Initially, the cradle table is still. However, if you click/tap on the page, the table starts spinning while the balls in the cradle move as expected. If you click/tap again, the table stops spinning, but the cradle balls continue moving. Explore the source-code to see if you understand how this works.

Once you have done so, see if your understanding matches the implementation as follows:
1. There are three animation mixins: ‘spinTable’, ‘swingLeft’, ‘swingRight’.
2. ‘spinTable’ responds to events ‘spinOn’ to start spin, ‘spinPause’ to pause spin and ‘spinMore’ to continue spinning.
3. The ‘spinTable’ animation is a constant rotation from 0 to 360 degrees (using loop:true; ), taking 7.2 seconds to complete one rotation.
4. We attach the ‘spinTable’ to ‘cradleTable’ and use the state variable ‘cradleEvt’ to decide what we want ‘cradleTable’ to do.
5. We added an event-listener for clicks on the page.
6. The first click on the page dispatches an event to cradleTable, telling it ‘spinOn’. This starts the animation of spinning for the table. At the same time, ‘cradleEvt’ is updated to the next desired action (‘spinPause’ or ‘spinMore’) based on its current value.
7. Any following user’s clicks causes the table rotation animation to pause or resume.
8. The ‘swingLeft’ and ‘swingRight’ mixins define the animation of a forward rotation and a ‘return to start’ rotation respectively. Each animation responds to their respective start events.
9. The last part is the most interesting. We want the balls at each end of the cradle to start their swing in tandem with the other ball completing its swing. To achieve this, we set up listeners on the ‘leftBall’ and ‘rightBall’ entities to listen for the event ‘animationComplete’. This event tells us that the swing action is completed. Each time this event is received from one of the balls, we start the animation on the other ball by using the call targetEntity.emit(evt);.

Particle-style motion
The creator of a virtual world may want to introduce familiar entities like rain, snow or dust as a part of the experience. Inherently this involves motion of a large number of particles which is not predetermined and breaks the performance limits of the animation attribute. Fortunately, the creator can take advantage of ‘particle-system’ implementations that create these effects with limited amount of code and performance impact. Try to find AFrame resources that allow you to add mortar style fireworks to the Newton’s Cradle example, triggered each time the balls swing into resting position [Video] and compare your solution with our completed solution provided below in the ‘See Also’ section.