Raster Animation

In this Spark, we make an animation on the OLED screen, and move it around the screen.

1. Draw a design on grided paper

12348004_703586256443657_1224133328464879631_n12376577_703586423110307_2891160107617502446_n

  • Come up with a simple design on blank paper
  • Translate that design onto gridded paper of size 16 x 16

2. Translate design into ‘binary code’

Now translate that grided paper into 0’s and 1’s: if the pixel is filled in, it is a 1, if the pixel is blank it is a 0. Your code will look something like this:

static const unsigned char PROGMEM icon_bmp[] =
{ B00000000, B00000000, // 0
  B00000000, B00000000, // 1
  B00000000, B01100000, // 2
  B00000000, B01110000, // 3
  B00000000, B11110000, // 4
  B00000001, B11110000, // 5
  B00001111, B11100000, // 6
  B00011111, B11110000, // 7
  B00011111, B10111000, // 8
  B00011111, B00111000, // 9
  B00011000, B00011000, // 10
  B00000000, B00111000, // 11
  B00000001, B11110000, // 12
  B00000000, B00000000, // 13
  B00000000, B00000000, // 14
  B00000000, B00000000 // 15
};

See the full source code here.

3. Design a second frame

Overlay a piece of transparent paper into the first, and vary it slightly

PICTUE

Translate it into 0’s and 1’s

4. Code up the animation logic

Now we need to code up the animation logic. How do we do that?

Here’s one way: use a counter, increment it, then do a modulo (can you think of any other ways?)

int i = 0;
int frame = 0;

void drawBitMap(int x, int y)
{
  frame = i%2;
  switch (frame) {
    case 0: display.drawBitmap(x, y,  icon_bmp_1, 16, 16, 1);
      break;
    case 1: display.drawBitmap(x, y,  icon_bmp_2, 16, 16, 1);
      break;
  }
   i = i + 1;
}

Sample Code here.

5. Adjust speed of animation

Can you see the movement? Is it too fast? How will you slow it down?

Hint: use a delay in the main loop!

delay(100);

VIDEO HERE

6. Design and implement a third frame!

Now add a third frame. This time, however, you’ll want to ‘bounce’ the frames. That is, when you get to frame 3, you’ll want to go back to frame 2 then frame 1. Can you work out how to do that?

Here’s a hint:

int i = 0;
int frame = 0;

void drawBitMap(int x, int y)
{
  frame = i%4;
  switch (frame) {
    case 0: display.drawBitmap(x, y,  icon_bmp_1, 16, 16, 1);
      break;
    case 1: display.drawBitmap(x, y,  icon_bmp_2, 16, 16, 1);
      break;
    case 2: display.drawBitmap(x, y,  icon_bmp_3, 16, 16, 1);
      break;
    case 3: display.drawBitmap(x, y,  icon_bmp_2, 16, 16, 1);
      break;
  }
   i = i + 1;
}

VIDEO

Sample code is here.

7. Challenge: can you make the speed of the animation change using a sensor (perhaps a light sensor)