thanks BenK

Video

Materials

1. Arduino Uno
2. Adafruit SFX board (16MB)
3. Bluetooth speaker with 3.5mm jack
4. Hobby servo
5. Nichrome wire
6. Cotton Ball
7. Vegetable glycerin

Mechanics

Electronics

Animation

Today computers can't exactly create hand drawn in-between frames, but they can easily move objects between two keyrames. Specifically Adobe After Effects was used to create the animations. I created a rig in After Effects that allowed cameramanjohn to visualize the mouth while animating.

Mouth rig in After Effects

The mouth position can be animated by adding new keyframes (red circle).

Keyframe closeup

In graphical mode, you can see how the computer linear interpolates the mouth position between keyframes.

Graph view

After effects does allow for non-linear interpolation to create smooth movements, but my Arduino firmware only supports linear interpolation...

These keyframes were copy/pasted from After Effects into Excel, where I converted them to the desired servo positions, and outputted text that could easily be copied and pasted into the Arduino code.

Here's a 'dirty' trick I'm proud of... We need to create an array of keyframes in our Arduino code, but I don't want to hand type this:

Keyframe mouth_VapeNaysh[] = {
        Keyframe(1, 70),
        Keyframe(3, 135),
        Keyframe(4, 135),
        Keyframe(10, 70),
        Keyframe(12, 88),
        Keyframe(14, 135),
        Keyframe(19, 70),
        Keyframe(22, 126),
        Keyframe(24, 135),
        Keyframe(25, 126),
        Keyframe(37, 135),
        Keyframe(41, 70)
      };
      

Especially if we need to tweak the animation a little it'd mean retyping everything. In Excel you can add multiple text stings together, so I did to create an array that's easy to copy/paste into the Arduino IDE:

Copy/paste keyframe text

This setup allowed us to rapidly create and visualize the animations on a computer before ever driving real hardware.

Code

Wooooo code!!! My favorite part of the project. All the firmware was written in the Arduino IDE (code download up top).

The basic idea is you start with a single keyframe.
Then a list of keyframes makes an animation.
And then a list of animations forms a sequence (like multiple motors/lights running at the same time)

I've given up on trying making code look good with Blogger so here's some non-color-coded code..

class Keyframe {
        public:
          uint8_t value = 0;
          uint8_t frame = 0;
          Keyframe(uint8_t, uint8_t);  //Keyframe(frame number, value)
          float getTime(float);
          void print();
      };
      

class Animation {
          Keyframe *keyframe_list;
          int16_t num_keyframes = 0;
          float   total_time = 0.0;
          uint8_t audio_file = 0;
          float fps = 24.0;
        public:
          Animation(Keyframe*, uint16_t);  //Animation(keyframes, number of keyframes)
          void print();
          float getPosition(float);
        private:
          float interpolate(float, float, float, float, float);
      };

class Sequence {
        public:
          Animation *layer;
          uint8_t num_animations = 0;
          float total_time = 0.0;
          uint8_t track = 0;
          //byte fps = 24;
          Sequence(Animation*, float, uint8_t); //Sequence(animations, length in seconds, audio file)
      };

Making an Animation

Keyframe animation_hello_motor1[] = {
        Keyframe(1, 70),
        Keyframe(5, 135),
        Keyframe(10, 135),
        Keyframe(12, 70)
      };

Keyframe animation_hello_motor2[] = {
        Keyframe(0, 80),
        Keyframe(2, 90),
        Keyframe(10, 135),
        Keyframe(15, 80),
        Keyframe(16, 90)
      };

Animation sequence_hello[] = {
        Animation(animation_hello_motor1, array_length(animation_hello_motor1) ),
        Animation(animation_hello_motor2, array_length(animation_hello_motor2) )
      };

Sequence Sequence_list[] = {
        Sequence(sequence_hello, 6.0, 3)
      };

Sequence beanie_animation[] = {
        Sequence(sequence_WhatIsThisCough, 6.0 + EXTRA_DELAY, 3),
        Sequence(sequence_VapeNaysh, 3.0 + EXTRA_DELAY, 2),
        Sequence(sequence_SoManyCreeps, 4.0 + EXTRA_DELAY, 15),
        Sequence(sequence_MakeMillions, 6.0 + EXTRA_DELAY, 14),
        Sequence(sequence_GoneSexual, 4.0 + EXTRA_DELAY, 13),
        Sequence(sequence_Cough01, 3.0 + EXTRA_DELAY, 7),
        Sequence(sequence_Cough02, 4.0 + EXTRA_DELAY, 8),
        Sequence(sequence_Cough03, 3.0 + EXTRA_DELAY, 9),
        Sequence(sequence_Cough04, 3.0 + EXTRA_DELAY, 10),
        Sequence(sequence_Cough05, 6.0 + EXTRA_DELAY, 11),
        Sequence(sequence_Cough06, 6.0 + EXTRA_DELAY, 12),
        Sequence(sequence_ComeOnDog, 3.0 + EXTRA_DELAY, 6),
        Sequence(sequence_ChubNTuck, 6.0 + EXTRA_DELAY, 5),
        Sequence(sequence_AlrightCough, 6.0 + EXTRA_DELAY, 4)
      };

servo_position = beanie_animation[active_sequence].layer[motor].getPosition(animation_time);
      mouthServo.write(servo_position);

Code Overview

1. before the first keyframe - output is the value of the first keyframe
2. after the last keyframe -  the output is the value of the last keyframe
3. in-between two keyframes - linear interpolation between the two keyframes

Conclusion

servo_position = beanie_animation[active_sequence].layer[0].getPosition(animation_time);
      mouthServo.write(servo_position);

The End