Dear friends, welcome back! In front of me, there is a Raspberry Pi Pico board connected to an 1” OLED display, and as you can see an animation is running on the screen. We can do the same thing with a Color OLED display as well. The animation is smooth and it looks great. But how did I achieve that? Was it easy? Let me show you, let’s start at once. 

There are many ways to load and display an animation on an OLED screen, either a monochrome one, or a Color one. I am going to show you what I think is the easiest way to achieve it. I will work with the monochrome OLED, but the procedure works with the Color one as well with only one minor difference that I will show you later in this video. 

First of all, what is an animation? An animation is just a series of images displayed in succession. So, if we have a series of images, we can turn them into an animation by displaying them one after the other fast enough so that the human eye cannot perceive the individual images, but only the overall animation. 

CircuitPython makes it extremely easy to display an animation out of a series of images. So, all we have to do is to use the adafruit_imageload library and load a SpriteSheet image.

But what is a SpriteSheet image? It is just a normal image, but it contains a series of smaller images, or Sprites. In our case, each sprite is 64×64 pixels, and we have 28 sprites in total, placed one after another in the SpriteSheet image. So, the image size of the spriteSheet is 64*28 pixels in width and 64 pixels in height.

So all we have to do to achieve the animation, is to load this SpriteSheet image, and display each sprite one after another fast.Let me now show how to load the SpriteSheet and be sure to watch the video until the end because I will show you how to create your own SpriteSheets easily. 

? Monochrome OLED: https://educ8s.tv/part/OLED096

? Color OLED: https://educ8s.tv/part/ColorOLED

? Raspberry Pi Pico: https://educ8s.tv/part/RaspberryPiPico

To display an animation with CircuitPython first you need to connect the displays to your Raspberry Pi Pico  board. Check out the detailed videos I have prepared about connecting these OLED displays to your Pico board.

Then you need to install two libraries. The adafruit_displayio_ssd1306 for the monochrome display or the adafruit_ssd1331 for the color display, and the adafruit_imageload library. 

To install the libraries, we have to download the CircuitPython libraries bundle from this link and unzip it on our computer. Since I developed the project using CircuitPython 8 we need to download the bundle for CircuitPython 8. Now all we have to do is to locate the needed libraries and copy and paste them inside the lib folder in the CIRCUITPY drive, just like this.  Also, we need to copy the SpriteSheet imager file in the CircuitPy drive.

Your CIRCUITPY drive should now look like this. 

We have a code.py file with the script to run on the board, the SpriteSheet file, and a lib folder with all the libraries required. You can find links to all the files needed in the video description.

Now, all we have to do is to run the code.py script and the animation will appear on the screen! Cool!

As you can see, the script is very easy to use. All we have to do is to define the sprite width and height here, the filename of the SpriteSheet and the total number of frames it contains. I will show you how to find this number in a minute.

Just like that, you can load an animation on your OLED display. You can also call the invert_colors function if you want to invert the colors of the animation on a monochrome display.

Now, let’s see how to create a new animation from scratch.

The easiest way is to turn an animated GIF icon into a SpriteSheet. So, let’s visit icon8.com , a website that offers thousands of free GIF animation files. Let’s search for a weather icon, let’s say a storm icon. I selected a b/w one since I am going to use it on a monochrome OLED, but I could choose a color one if I wanted to use it with a color display. Now all we have to do is to convert it into a SpriteSheet. 

Now, here is the cool thing. The conversion is very easy. I developed a Python script to achieve just that. Just run this script on your computer with the GIF file in the same folder with script.  Before running the script, just set the file name here, the output size in pixels, 64×64 for example, and if you want color or not. Since I am using a monochrome display, I set the variable MONOCHROME to True. That’s it. Now we can run the script and it will output a SpriteSheet file ready to be used with CircuitPython. Cool huh. The filename of the SpriteSheet tells you how many frames it contains so you can use that number in the CircuitPython script. 28 in this example. Now copy the produced file to your CircuitPy drive and rename it to something simpler, check that you have entered the correct file name, Sprite size and  number of frames here, run the CircuitPython script and the new animation appears! How cool is that? It took us just a few seconds! 

By the way, if  what I just shared with you was really useful, then I would love it if you would give this video a like so more people can learn about this easy procedure!

With the help of this script, loading animations is now easier than ever before, so we can add some very cool animation to our projects and make them shine!

I have prepared a detailed video on how I developed this Python script on my second channel. It will teach the basics of image manipulation in Python in just a few minutes and it will allow you to modify this script to work with other displays too. Check it out now by clicking on this link, I think it will help you a lot. Thanks for watching, I will see you next time.