How to convert images to Arduino Arrays for use on LCD displays! - Tutorial

In this tutorial I'll show you how I managed to create the arcade characters that were displayed on the RGB Matrix animation frame. But this can be used for any type of LCD display.

Links:

Find more information about this and other tutorials on my website:

[haydenpetersen]

Yassss.... I have been looking for this solution for weeks now! Built the box a while ago and have been suffering through writing 256 individual assignments to each LED. Painful! Thanks a heap!

[subbirrahman]

You are an awesome person. Not many people out there have shared this kind of tutorial... You saved a lot of time for me. God bless you.

[MaxSMoke]

You can make this INFINITELY easier on yourself by "interlacing" your image. Select every other line, straight across. Then flip what you've selected horizontally.

You could streamline doing this multiple images of the same size (like animation frames) by making this selection into a mask. They just paste in each frame, select the mask, and flip the image lines. Save and repeat.

[KevinKratzke]

I haven't gotten a chance to test it out on an connected matrix, but I think you can get LCD Image Converter to output the alternating line order by selecting "Use custom script" on the Prepare tab of the conversion options and using code like:

/*
* top to bottom
* forward/backward alternating
*/

for (var y = 0; y < image.height; y++) {
for (var x = 0; x < image.width; x++) {
image.addPoint(x, y);
}
y++;
for (var x = image.width - 1; x > -1; x--) {
image.addPoint(x, y);
}
}

There might be a more elegant way to do it, but I looked at the output for a simple 8x8 rainbow gradient and it appeared that the lines were alternating correctly.

[LukaBartonicek]

Here's the custom script for scanning the image in LCD image converter without the need for manual copying of every even line. In order to use the script you need to check the "Use custom script" checkbox.

for (var y = 0; y < image.height; y++) {
if (y % 2) {
for (var x = image.width -1; x >= 0; x--) {
image.addPoint(x, y);
}
} else {
for (var x = 0; x < image.width; x++) {
image.addPoint(x, y);
}
}
}

[maddyaurora]

why did i found this channel so late, this is the best channel for arduino and more I LOVE YOU

[andywiles]

Good job but you can program LCD-Converter to separate even and odd lines :
for (var y = 0; y < image.height; y++) {
    for (var x = 0; x < image.width; x++) {
                if (y%2==0) image.addPoint(x, y);
                else image.addPoint(image.width-1-x, y)
   }
}

[danibjor]

You can use the % (mod) operator on the for-loop for the lines ( if lineNum % 2 == 0 ), then on the pixels on that row, count 0-16 or 16-0 depending on that if-statement

[cmontoya]

Hello. I have an improvement to make the array creation easier and faster. After setting the software up, in the PREPARE tab mark the option "Use custom script", and paste the next code:

for (var y = 0; y < image.height; y++)
{
if ( y % 2 == 0)
for (var x = 0; x < image.width; x++)
{
image.addPoint(x, y);
}
else
for (var x = image.width - 1; x >= 0; x--)
{
image.addPoint(x, y);
}
}

This will create the arrays ready to be copied without the need of creating the backward code.

Let me know if it worked for you, I just tested and it is fine.

BTW, thanks for the tutorial.

[pantanomonstruodel]

but what is the code for put in onto arduino ?.... I cant find it

[susantoroy]

it's amazing, wow.thanks for making this

[croydonH]

Hi, you mentioned ' more than 16 x 16 ' @5:50 . does this mean we can convert a 32 x 32 and get it displayed on a 16 x 16 led matrix?

[sub-arts]

great tip with this program. how did you manage to film your matrix this way? i have great problems to make a foto or even a film of my matrix. in most times the lcds brighten all up and the camera sees no colos.

[JonnyRetro]

I followed your tutorial to the letter and for some reason im ending up with 22 rows and 16 lines for a 16x16 bmp image!? Tried all sorts, cant seem to get it to give me 16 rows. Really odd. Any ideas?

[israg]

Hello Brainy good afternoon, your videos are amazing really, so I have a question, there is a way for putting together a scroll and an image in the 16x16 lcd matrix using the libraries NeoMatrix?

[姚荣]

Very good project, but whether the image code can be put into the memory card, so the space is infinite

[dogandemir_xyz]

here's the code for the even/odd rows.

for (var y = 0; y < image.height; y++) {
if (y % 2 == 0){
for (var x = 0; x < image.width; x++) {
image.addPoint(x, y);
}
}else{
for (var x = image.width-1; x >= 0; x--) {
image.addPoint(x, y);
}
}
}

[Rouverius]

If you are not interested in rewiring it, you should be able to handle this in code instead. Ex. If the row is odd, run the loop normally but if even then a seperate loop that accesses the column data in reverse.

[fl]

Maybe I am a bit late, but I was wondering how you display the color arrays of the Characters on the matrix? Are you using fast led? Maybe you can post an example code, that would be great!
Edit: Watched your previous Video, now i understand it, i hope this method is less heap-intesnse since my 11x11 Matrix always ran out of free heap...

[JeremyCook]

Could you provide the Arduino code for this?