Making OLED Bitmap Graphics In Arduino

You can use any of the Wireling screens for this example: 0.42" OLED Display Screen Wirelingor 0.69" OLED Display Screen Wirelingor 0.96" OLED Display Screen Wireling.

* Sprite - a computer graphic which may be moved on-screen and otherwise manipulated as a single entity.

If you have not already, make sure to go through and follow the steps of the OLED Display Wireling tutorial that includes all the Arduino libraries you will need to download before starting this tutorial. Or you can directly download the libraries: Tinier Screen Library and Graphics Buffer Library.

Step 1: Hardware Assembly

Depending on the development system you choose, you will need to put together a TinyDuino stack using the 32-pin tan connectors, or you will just need to plug in your Wirelings using a Wireling Cable:

• Port 0: OLED Display Wireling (any of the sizes will work as long as the screen variables are edited in the program)

You can change the port in the included Arduino Sketch using the port variable at the beginning of the program. Match the port number found on the board with the port value set in the code.

Step 2: Software

To install the Tinier Screen and Graphics Buffer Arduino libraries, check out this Library Installation Page. Once downloaded from the software section above, you can navigate to the examples folder of the MAX30101 library and open the MAX30101_OLED.ino sketch in the Arduino IDE.

Step 3: The Code!

Download the Sprites for OLED program, or open it from the TinierScreen/examples folder (older versions of the library might not have the Sprite example included) and upload it to your processor.

Make the correct Tools selections for your development board. If unsure, you can double-check the Help page that mentions the Tools selections needed for any TinyCircuits processor.

The program is initialized to work with the 0.42" OLED Screen Wireling. To edit this in the program, comment and uncomment the two lines that match the screen you have so that only two lines matching your screen are uncommented:

// 0.42" Screen Variables
TinierScreen display = TinierScreen(TinierScreen042);
int xPixel = 72;
int yPixel = 40;

// 0.69" Screen Variables
//TinierScreen display = TinierScreen(TinierScreen069);
//int xPixel = 96;
//int yPixel = 16;

// 0.96" Screen Variables
//TinierScreen display = TinierScreen(TinierScreen096);
//int xPixel = 128;
//int yPixel = 64;

Once the program is uploaded, you should see a bunny sprite walking across the screen as well as the text "Bunny!" bouncing slowly around the screen. The screen may flicker slightly due to the speed of the text and sprite being drawn.

Create your own sprites!

In the same sprite example, there is an option for a different sprite and different text to display a Pac-Man *bitmap. This commented code should help you understand how to create your own sprites using the correct initializations and structures. You will just need to comment out the bunny sprite code and uncomment the Pac-Man code.

* Bitmap - a representation in which each item corresponds to one or more bits of information, especially the information used to control the display of a computer screen.

To create your own sprites, you will need to create your own bitmaps in the exampleSprites.h file. These are 2-D arrays of 0's and 1's where the 0's represent a black or blank pixel, and the 1's represent a white pixel. The Pac-Man bitmap details a solid sprite and if you can visually ignore the zeros are there and just focus on the 1's, you can see the picture:

To visualize sprites before creating a bitmap, you may want to create a pixel drawing first using a tool like Pixilartand then creating your bitmap from there.

I hope this helps you create something awesome!

Show what Sprites and animations you make by tagging @TinyCircuits on Instagram,  Twitter, or Facebook!