How to convert images to Arduino arrays values for use on displays

//How to convert images to Arduino arrays values for use on displays
TUTORIAL

Arduino Arrays from Images


How to convert images to array values for Arduino

HELP OUT

All my content is free.

If you feel that my videos are helping and you would like to contribute, you can toss some coins in the Tip Jar via PayPal.

Select amount then click the “Donate” button.

Brainy-Bits Tip Jar Amount
OVERVIEW

After publishing the last tutorial on how to build the Arduino animation frame using WS2812B led strips, I got the question on how did I create the arrays of HTML color codes to create the retro arcade characters?

Well, not by hands, that for sure!

If you think about it, there’s 256 HTML color code per characters, and for the tutorial I create 2 frames or arrays per characters for the simple animation, and there was three characters…  So that’s 256 x 6 = 1536 individual values!!

So in this quick tutorial I’ll show you how I manage to create those by using some software.

Although I’m using Photoshop as one of the software here, you could probably use another graphic program if you wanted.

note* I’m using this for the Matrix animation frame project, but it could be useful for other projects that use a graphic lcd as well.

PROGRAMS NEEDED

Like I just mentioned Photoshop is the graphic program I’m using but if you don’t have that you can also use the very good FREE graphic program GIMP which you can download here:

https://www.gimp.org/

The other program needed is called ‘lcd-image-converter’ you can find it here:

https://sourceforge.net/projects/lcd-image-converter

This program was created by and was designed by riuson to create arrays of values for programming purposes.

THE PROCEDURE

First thing you will need is an image.  The animation frame has a matrix size of 16×16 which makes it’s ideal for retro arcade characters.

A great website to get some of those characters is https://www.spriters-resource.com

For this tutorial I will be using the one from Galaga here: Galaga Sprite Sheet

We then open the image in Photoshop and crop it to the right size, in this case 16×16 pixels.

After we convert the image to indexed color, to limit the number of colors, and we choose Web Colors, since the Arduino code wants HTML color codes.

We then save the file in the .BMP format.

Now that we have our image in the right format, we then open it in the next program, LCD Image Converter.

At this point I advise you to watch the tutorial video to get more information on how to convert the image to array values, since it’s a lot easier to explain in a video.

TUTORIAL VIDEO
DOWNLOAD

GIMP graphic editor:  https://www.gimp.org

LCD-IMAGE-CONVERTER:  https://sourceforge.net/projects/lcd-image-converter

Sprite image resources:  https://www.spriters-resource.com

By | 2018-03-19T19:10:59+00:00 March 12th, 2018|Tutorials|

Leave A Comment