steamlining Muybridge's galloping horse sketch

Projects Programming
1

Hi all,

I have created for the NodeMCu equipped with a Nokia 5510 LCD an animation of Muybridge's galloping horse (see picture) (sketch attached). The horse, named Sallie Gardner, is happily running for an Olympic gold medal. A Nokia display is fast enough to support rapid successions of image frames; I even had to include a delay (=interframeTime) of 180 millis to slow it down - else Sallie's legs tend to turn into a Road Runner dust cloud.

So the animation runs good, no problem with that. It is the programming that might be improved.
The animation consists of 10 frames (bitmaps, in progmem) which are printed in rapid succession to screen, here a modest 84*48 pixel Nokia 5510 LCD). The setup is in the picture:

725×716 781 KB

Frames loaded in progrem are named horse_01, horse_02, horse_03, etc till horse_10.

I created the rapid succession of frames by composing 10 successive lines of instructions which only differ in the frame number that is being called:

display.drawBitmap (0, 0, horse_01, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_02, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_03, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_04, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_05, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_06, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_07, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_08, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_09, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();
display.drawBitmap (0, 0, horse_10, 80, 48, 1); display.display(); delay (interframeTime); display.clearDisplay ();

My question: this seems to me as nine redundant lines of instructions. I wonder whether this can this be done with one simple - for next- or -while - loop and with indexed horse_ frame calls? I welcome suggestions.

--Thanks, Photoncatcher

NodeMCU_Nokia_5510_muybridge_horse.ino (149 KB)

2

Please follow the advice on posting code given in posting code

In particular note the advice to Auto format code in the IDE and to use code tags when posting code here as it prevents some combinations of characters in code being interpreted as HTML commands such as italics, bold or a smiley character, all of which render the code useless

3

Frames loaded in progrem are named horse_01, horse_02, horse_03, etc till horse_10.

Usual advice - when you start using numeric suffixes, it's time for arrays.

4

Hi TheMemberFormelyKnownAsAWOL,
I have been searching the world for an example. Found an example using the switch ()instruction, but the horse's gallop wasn't so smooth any more - image frames were 'streamed' uneven to the display. Unfortunately my knowledge of C++ programming is hum-de-ho.
regards, Photoncatcher

5

photoncatcher:
Hi TheMemberFormelyKnownAsAWOL,
I have been searching the world for an example. Found an example using the switch ()instruction, but the horse's gallop wasn't so smooth any more - image frames were 'streamed' uneven to the display. Unfortunately my knowledge of C++ programming is hum-de-ho.
regards, Photoncatcher

Well, I can't see that code either, so I can't really help.

6

Found an example using the switch ()instruction,

Using arrays does not require or suggest using switch/case. Indeed, the very opposite is true

If you put the bitmaps in an array then you can iterate through the array to display them with a single for loop (or even without a for loop)

7

Hi UKHeliBob.

<<If you put the bitmaps in an array then you can iterate through the array to display them with a single for loop (or even without a for loop)>>

I created a variant of my sketch using one big array containing ten concatenated frames. With a switch () instruction the sketch then picks the correct frame. This does not run fluently, there is a hiccup after a few cycles.

The sketch that I attached contains an array of ten image frames being loaded in progmem, named horse_01, horse_02 and so on. However, I need in the loop () section 10 lines of code where (I think) one should be sufficient, with a variable or index defining the bitmap of the moment (e.g. horse_(j) in a j=1 to 10 for-next loop). But how does one program that? Can you (or other contributors on this forum) give me an example of syntax ? Just one line of code please ??

regards, photoncatcher

8

The sketch that I attached contains an array of ten image frames being loaded in progmem, named horse_01, horse_02

It looks like 10 separate arrays to me

The suggestion is to create a 2 dimensional array (an array of arrays) so that you can iterate through them with a for loop

A simple example that you can expand on:

byte twoDimArray[][3] =     //2 frames, each of 3 bytes
{
  {1, 2, 3},
  {4, 5, 6}
};

void setup()
{
  Serial.begin(115200);
  while (!Serial);
  for (int frame = 0; frame < 2; frame++)
  {
    for (int data = 0; data < 3; data++)
    {
      Serial.print(twoDimArray[frame][data]);
      Serial.print(" ");
    }
    Serial.println();
  }
}

void loop()
{
}
9

Hi UKHeliBob,
Thanks for the suggestion. I will expand on that! - :slight_smile:
Photoncatcher

10

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.