Packt+ | Advance your knowledge in tech

Chapter 7. Advanced Movement with the Animation Library

Now that we've achieved basic movements in our robotics projects, we're going to explore how to create timed, complex movements. This may seem daunting at first—keeping track of one servo is hard enough! Luckily for us, the Animation library in Johnny-Five makes these complex movements easier to both understand and program. In this chapter, we'll explore what makes the Animation library special and start working with some servo animations. We will cover the following topics:

What is the Animation API?
Looking at the Animation API
Writing servo animations
Animation events

What you'll need for this chapter

You'll need your microcontroller—I highly recommend the Arduino Uno for this chapter because of its compatibility. You'll also need a USB cable, a breadboard, some breadboarding wires, and the LCD you used in Chapter 4, Using Specialized Output Devices. You'll also need three standard servos. If possible, the servos should be of the same brand and make—this will help with our project.

What is the Animation API?

This chapter's title leads to a lot of questions—what is the Animation API and how does it relate to servos? There's also a lot of terminology used here. To start, let's discuss the point and development of the Animation API to give us a little context.

Why do we need an Animation API?

The Animation API was created around the work started by Donovan Buck and Rick Waldron on walking robots—Rick built a quadruped bot, and Donovan, a Hexapod. Turns out, walking robots require a lot of timing on the servos involved, and the Johnny-Five library at the time was only capable of running servos from one degree to another at a maximum speed. This made walking very difficult, because even with servos of the same brand and make, the maximum speed is slightly different. Also, there are situations in which you want different servos to move at different speeds—this was impossible before the Animation API as well.

This led to the development of a function that allows you to set the...

Looking at the Animation API

The Animation API has its own vocabulary—it may be familiar to the readers who have done some animation work. It also has a few different ways to interact with it, and we'll explore these ways before diving in and writing our own projects.

Learning the terminology

There are two parts that make up any servo animation in Johnny-Five: a target and one or more segments. The target is either a servo or an array of servos. We'll go into the programmatic differences between a servo and a servo array in our first project; the basic point is that a ServoArray object in Johnny-Five allows a logical grouping and the manipulation of multiple servos—a leg, for instance, would be a logical use of a ServoArray object.

A segment is the programmatic description of a piece of animation. It is comprised of a few pieces of information: a duration, cue points, and keyframes.

A keyframe is a description of the position of the target at a given point. A keyframe has no concept of time...

Writing Servo Animations

As we discussed in the last section, an animation in Johnny-Five is created and then you enqueue segments that run first-in, first-out. We're going to go from the inside out in our exploration of creating an animation: first, we'll learn about writing keyframes, then segments, and finally we'll explore the Animation object.

Writing keyframes

Writing keyframes are at the core of the Animation API—the power of this API is its ability to tween between our keyframes. Each keyframe is an object, and you'll pass your keyframes into your segment via an array. Remember: you'll want to write a keyframe for each of your cue points.

The keyframe object

As each keyframe is an object, we have access to a few properties that we can establish for each one:

Animation events

A lot of movements require waiting for one segment to finish before starting another. Some segments should only be fired at certain times, as well. The best way to handle these timings and communication systems is by using Johnny-Five's animation events.

We tap into these events by assigning callbacks to special attributes on segments. Let's go into the details of each one and see when they will fire.

Keyframe	Properties
`degrees`	`degrees` is what the name implies; the degree you want the servo to be at when the keyframe is reached. It should be an integer value between `0` and `180` inclusive.
`step`	`step` is similar to `degrees...`

Summary

You now know just about everything there is to know about the Animation API as it applies to a servo movement. More functionality is being added to the Animation API to work with other devices, such as LEDs—so keep an eye on johnny-five.io to see more!

In the next chapter, we'll look at adding other devices to your Johnny-Five projects, such as other USB devices and complex components.

The rest of the chapter is locked

You have been reading a chapter from

Learning JavaScript Robotics

Published in: Nov 2015Publisher: ISBN-13: 9781785883347

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Sign up now

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Kassandra Perch

Kassandra Perch is an open web developer and supporter. She began as a frontend developer and moved to server-side with the advent of Node.js and was especially enthralled by the advance of the NodeBots community. She travels the world speaking at conferences about NodeBots and the fantastic community around them.
Read more about Kassandra Perch

Personalised recommendations for you

Based on your interests and search pattern

Architectural Patterns and Techniques for Developing IoT Solutions

This book covers all the patterns and considerations that give you both the power and flexibility to build scalable, secure, and performant IoT solutions by combining various patterns in interesting ways. It also lists the benefits of combining IoT with technologies like blockchain, 3D-printing, 5G, Generative AI, quantum computing, and LLMs.

BookSep 2023304 pages

Arduino Data Communications

Arduino Data Communication focuses on IoT’s Internet aspect, guiding you in setting up your own infrastructure for storing and managing the data collected from sensors. This book goes beyond microcontroller basics, equipping you with the knowledge essential for building real-world projects.

BookNov 2023286 pages5

Arduino IoT Cloud for Developers

From fundamental principles to advanced techniques, this comprehensive book equips you with the knowledge and skills needed to design and deploy IoT applications seamlessly. Explore cloud integration, best practices, and real-world projects to harness the full potential of IoT application development with the Arduino IoT Cloud.

BookNov 2023402 pages

The Azure IoT Handbook

Building IoT Systems with Azure IoT is a comprehensive introduction for those who are new to the Internet of Things and looking to get up to speed in no time. This book will teach you how to create and develop IoT solutions with intelligent edge-to-cloud technologies in the Azure cloud.

BookDec 2023248 pages

Events	Details
`onstart`	The `onstart` callback fires when the segment has begun playing in the animation.
`onstop`	The `onstop` callback is only called when the segment is either in the queue or currently running, but the animation is stopped via `animation.stop()`.
`onpause`	The `onpause` callback is only called when the segment is queued or running in an animation that has been paused via `animation.pause()`.
`oncomplete`	The `oncomplete` callback only fires when the segment has completed running in an animation. Note: This does NOT apply to looped segments. See the `onloop...`

You're reading from Learning JavaScript Robotics