Introduction: Make an Animated Face With the Seed Wio Terminal

By Check out my RPA Course
About: I'm a Mechanical Engineer turned IT Professional and Author. I came into the Information Technology world because someone challenged me to. But at heart, I'm still a grease monkey with no desire to lose touch …

In this IBLE, I'm going to try to give a playful angle to getting started with the Wio Terminal Platform from Seed Studio.

In this article we create a simple animated face, and in that process try to get familiar with a few things:

  • Work with the LCD screen of the Wio Terminal
  • Work with the Graphics functions that will enable us to draw basic shapes such as lines, circles, ellipses, triangles, etc. on the LCD screen
  • Move objects across the screen to create basic animation effects

You can take this basic example and build up on it to make many more imaginative things with the Wio Terminal.

I'm not going to blab about the Wio Terminal. This device is capable of many things. The best way for you to get started is to refer to the resources listed in the supplies section. The video article linked below is especially something that you might want to watch if you want to get started with this platform.

Supplies

  1. The Wio Terminal from Seed Studio + a USB C Cable
  2. A Laptop running a compatible operating system
  3. The Arduino IDE downloadable from here
  4. The Wio Terminal Getting Started Wiki
  5. The LCD Basics Wiki or Video

Step 1: Planning the Animated Face

I've attached a rough rendition of the image that I created to be used as a guide to write the code. It definitely helped me speed up the process. The sketch is based on the following features of the Wio Terminal:

  1. Wio Terminal LCD Display is 320 px wide (X), and 240 px tall (Y)
  2. In this sketch, the top-left is (0,0) and bottom-right is (320,240)
  3. X is positive running right to left, Y is positive running top to bottom

The variables initialized in the Arduino sketch have been lifted from this image. This way if you want to adjust the attributes of your animated face, it will hopefully become easier with this image as a guide.

Step 2: The Arduino Sketch

Working with the Arduino IDE is by far the easiest way to get started with any kind of an interactive hardware platform, and the Wio Terminal is no exception. Barely have I suffered any kind of set backs given that I have coded for so many platforms with the Arduino Environment.

The code is very simple and self explanatory. Once the face is created on the LCD screen, a set of 4 functions can be lined up in sequence to create a few animated effects. In this code currently, these functions are:

Blink - Creates the effect of eyes blinking. Basically, it wipes the pupils off the screen and recreates them again in quick succession at the same location

MoveEyesRight - Moves the pupils to the right of the screen and back to the center. Uses the same technique of wiping and recreating the pupils, but unlike the Blink function, the eyes are wiped and recreated at the center point of the eyes, and a position slightly offset to the right of the center

MoveEyesLeft - Similar to the MoveEyesRight, except it wipes the pupils at the eye center positions and positions offset to the left of the center

MakeSquintEyes - Gives the face a bit of humor. The left eye moves to the right, and the right eye moves to the left at the same time, creating an effect of a funny face!

NOTE:

  • Wiping the pupils off the screen simply (re)creates the pupils in White, causing them to blend with the Whites of the eye
  • There is no delay between the time when the pupils are blended with the eye, and then recreated with the specified eye color

Attachments

Step 3: Getting Creative

From the end result, you notice that the mouth has been created using a set of four lines. And these are for a couple of reasons:

  1. From the documentation, I could not find any Graphics methods to draw arcs
  2. I wanted to demonstrate how to use the function to draw lines in addition to the standard shapes that were used to create the rest of the facial features

But you can get a bit creative and create the mouth with a combination of rectangles and triangles as shown in the image.

This is something you might want to try along with a few other things such as:

  • Animating the mouth
  • Making a grumpy face
  • Making the eyes wink

And anything else that you can imagine to make.

Thanks for taking the time to read this IBLE. Happy learning!