Safari browser sometimes has issues displaying images...

I.e: *you have to click on the images to see them...

For a better browsing experience on Brainy-Bits

Please use Chrome, Edge or Firefox browser.

  • Brainy-Bits

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



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.

PARTS USED


WS2812 LED Strip

Amazon usa

Amazon canada

5V 10Amps Power Supply

Amazon usa

Amazon canada


Arduino MEGA R3

Amazon usa

Amazon canada


These are Amazon affiliate links...

They don't cost you anything and it helps me keep the lights on

if you buy something on Amazon. Thank you!

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

191 views

All my content is and will always be Free.

If you feel that my Videos / Tutorials 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.

©2020 by Brainy-Bits