Many years ago, in what seems like another life… I had the advantageous opportunity to work for the Walt Disney Corporation, not a sponsor but as I said I did used to work for them as a contracted Computer Technician for a few years.

I was young and had my A+ back when it still meant something and stood as a confirmation of basic competency!

I’m just kidding, an A+ was never meaningful (allegedly and IMHO)!

Anyway, mostly my job amounted to “burning/cloning” hard drive images, light software and OS configuration as well as installing the equipment for the end user.

Occasionally I’d fix a broken printer, upgrade some RAM on a laptop, spend a little time in the LAN closet correcting the patch panel port list because the dedicated local department sys admin liked paper records.

On top of that there were the near constant departmental moves… oh the lost weekends! 😛

Nothing complicated though and along the way I met a lot of really smart and wonderful people!

Aside from the people, the two highlights I will always remember fondly from that experience are the famous Disney “Ink & Paint” building and the other was the original Pinocchio & Bambi camera.

The Ink & Paint Building

This was Walt’s paint-mixing lab back in the day and it’s where so many of the old Disney cartoon shorts and some of the animated films were inked onto transparent celluloid’s.

Photos, awards and stills from old animated films lined the walls.

The memory of being in the same building where some of the Disney magic sparkled and came to life will last with me forever and reminds me of being a child and watching reruns of old Disney cartoons and eating popcorn with my grandfather.

It reminds me of trips to “Walt Disney’s Magic Kingdom” and strolls down “Main St. USA” and sharing great moments with Mr. Lincoln (is that still there? I know they took out the Country Bear Jamboree a long time ago), or listening to bluegrass in the French Quarter while wondering what mystery was hidden from my view behind the locked Club 33 door! 😛

I’m reminded of one of the few nice things my dad and I ever did together which was on the spur of the moment go to Disneyland on the last day (or close to it) that the Skyway was running.

We road from Tomorrowland to Fantasyland late in the afternoon and I remember the dimming orange and crimson sun setting against a dull yellow sky and dark purple clouds passing from my view as we entered the Matterhorn… I want to say it sprinkled a little and I remember feeling happy!

All of those moments and experiences are interwoven pleasantly for me. 🙂

The Pinocchio & Bambi Camera

The other high point of my time working at Disney was the opportunity to see up close the actual camera that Disney used to make Pinocchio, Bambi and the other classic feature length cartoons.

It’s been many years but I want to say it was on display in the Frank G. Wells Building but I could be mistaken.

It was tucked off to the side at the end of a hallway leading off to more offices and even though you wouldn’t miss it if you passed it, you would hardly think it was imbued with any particular importance unless you took the time to stop and read the little plaque next to it.

You could almost walk around it entirely except for the rear wall, which now that I think about it might have been a set of windows and curtains… but I can’t recall.

The machine was wonderfully aged and worn and was long past having been rendered obsolete by the dumb phone attached to the smart camera in your pocket!

Here’s a clip of o’l Walt talking about his “Multiplane Camera” and how they used layers to create “depth of field” & “parallax” effects using 2D images.

Even though we’re not animating anything nearly as complex as a moving camera or scenery, how we animate Mr. Good Bot, frame by frame and with layers, is fundamentally the same.

Frame Rate

Frame rate means how many “frames (images) per second” are generated/viewed.

  • “Higher FPS” means more frames per second and is generally associated with animations that people describe as “smoother”, “clearer” or in some cases more “life like”.
  • “Lower FPS” means fewer frames per second and tends to seem more mechanical, cartoonish or If you play games and the FPS suddenly drops, “laggy”.

Most video and animation is usually somewhere between 12-24 FPS in my experience but higher or lower frame rates are not uncommon and sometimes preferable.

In the JavaScript code for Mr. Good Bot we can change the frame rate by altering his code:

setTimeout(AnimateFace, 120 * Math.floor(Math.random() * 11) + 1);

Update frame (AnimateFace) every:

120 (milliseconds) * ( (a random number between 0 & 10) + 1)

Note that 11 is used because the count starts at zero so… 0 advanced 10 spaces is 9, so index 10 + 1 = index 11 but value 10.

((0 to 10) + 1) = (1 to 11)

If this is confusing refer to zero-based numbering.

So the wait duration range to update the frame is:

(120 * 1) = 120 through (120 * 11) = 1320

This calculation ensures that the FPS isn’t always the same and gives the appearance that sometimes Mr. Good Bot is processing his thoughts and emotions slowly and more introspectively while holding a look for a moment.

Other times he will change his face more rapidly and seem more extroverted or excited.

On average this worked out to his face being regenerated approximately every 713 milliseconds in my tests with a min & max value range of 120 – 1320‬ milliseconds.

Calculating FPS

All we’re saying is how many times can or would the frame be updated so we can calculate the FPS like this:

(1000 (1 second in milliseconds) / 120 (milliseconds delay) = 8.33 frames per second

(1000 (1 second in milliseconds) / 713 (milliseconds delay) = 1.40 frames per second

(1000 (1 second in milliseconds) / 1320 (milliseconds delay) = 0.75 frames per second

Put differently, this means that Mr. Good Bot updates between 0.75 & 8.33 times a second with an average of 1.4 frame updates per second or 1.4 FPS average.

This gives Mr Good Bot a variable FPS that is slow and feels mechanical like a Good Bot should but is still quick enough while also being unpredictable to give it a more organic animated feel.

And to be honest, I haven’t tested the practicality of the higher than the average FPS delays but the added benefit of a low frame rate is that you can get away with few if any transition sequences or series of frames that must played in direct succession so in this case our goals and reality match up perfectly!

If you wanted to change the frame rate to always be a set time like 1 second for example (1000 milliseconds) then you alter the code like this:

// 1 FPS = 1 frame per 1000 milliseconds
setTimeout(AnimateFace, 1000);

This makes Mr. Good Bot feel much more predictably mechanical and ridged, though that may be the effect you are going for!

Layers

Just like how Disney cartoons were painted on transparent celluloid sheets and layered to create a scene, we build Mr. Good Bots face from layers because it helps us to reduce the number of images we have to draw.

For example lets say you have:

  • 8 different eye positions.
  • 7 different eyebrow variants.
  • 3 different mouth variants.
  • 1 nose.

We would need (eyes * eyebrows * mouths * noses) = 168 stills if we drew each frame changing only one part of the face until all possible combinations (excluding blank) had been drawn.

I like art but that’s a LOT of work!

Instead, if we draw each facial part variation as a separate image we get (eyes + eyebrows + mouths + noses) = 19 stills, far more manageable!

Here’s an example of Mr. Good Bot’s eyes from his Nucleus “skin” in the center position:

Mr. Good Bot Nucleus Eyes Centered

Notice the eyes are the only thing in the image and the background is transparent.

This lets us layer the parts of the face into a composite image and greatly reduces the number of images required to animate Mr. Good Bot.

We assemble the the parts into whatever image we need frame by frame and we get our animation of Mr. Good Bot.

With that said, let’s say the Nucleus eyes pic above is also a wallpaper and my free gift to you! 😉

I’ve uploaded Mr. Good Bots default skin to the GitHub repo.

GitHub: MrGoodBot

Here are the other posts in this series so far:

And that’s it for this post but I think I just might have it in me to do something interesting for Columbus day coming up so look out for that maybe over this coming weekend.

Next week we’ll look at building faces with code which is when you’ll finally be able to meet Mr. Good Bot in person so look forward to next week’s post and thanks for reading!


Are you willing to fork over thousands of dollars to fuel our mutual bot addictions every month?

Well you shouldn’t because I don’t need that much enabling! I’m only suggesting $1 through Patreon and you can cancel anytime. 🙂

But, if all you can do is like, share, comment and subscribe… well that’s cool too!

Much Love,

~Joy