Arduino Bug – Using Modulo to Extend our Animation

This spark is not for everyone. If you’ve completed the other exercises though you will learn a very valuable coding trick in this extension. There are other simpler (but not better) ways of doing the same thing but none quite so powerful.

For this variation we will be using a programming function called modulo.

Modulo is signified by the % character and its used a lot like the other mathematical operations are used. Modulo is the remainder of the division of two numbers;

2 % 1 = 0  because 1 goes into two without a remainder
5 % 2 = 1 because their are two two’s in 5 that leaves one reminder

Why is this powerful?

We can use it to do different things when the number is odd or even;

if (x % 2 == 0) {  // if the number is even

then do this

} else {  // the number is odd

do that


Take a look at my final Bug code to see how I’ve used this modulo function to move between two frames on each pass through the loop.

Note I have added;

  1. IF statements like those above to test if the current frame is odd or even
  2. Two new functions under drawPolygonBug1 that are the wing positions (up and down); drawPolygonWings1(); & drawPolygonWings1();
int x = 128/3;
int y = 64/3;
int z = 1;
int col = 1;

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <SPI.h>
#include <Adafruit_SSD1306.h>

#define OLED_RESET 4

Adafruit_SSD1306 display(OLED_RESET);

void setup() {

  // tell the little screen that we are 128 x 64 pixels
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // dont worry about this line- it is used to set up our display
  // set text size
  // set the text color - we only have a choice of black or white for this display
  //set the way the text behaves when it gets to the end of the line
 // display.setTextWrap(1);

void loop() {
  if (x > 128+50){
    x = -50;
  y= y+z;
  if (y < 5){
  z = 3;
  if (y > 28){
  z = -3;  
  if ( x % 2 == 0 )



void polygonbug1() {
 display.drawCircle(10+x,0+y,4,col);  //first eye
 display.drawCircle(22+x,0+y,4,col);  //second eye eye
 display.fillCircle(11+x,1+y,1,col);  //first pupil
 display.fillCircle(22+x,1+y,1,col);  //second pupil
// display.drawTriangle(9+x,14+y,-20+x,5+y,1+x,-5+y,col);  //first wing
// display.drawTriangle(23+x,13+y,50+x,5+y,30+x,-5+y,col);  //second wing
 display.drawCircle(0+x,17+y,4,col);  //left hand
 display.drawCircle(31+x,17+y,4,col);  //right hand
 display.drawCircle(-4+x,13+y,1,col);  //left hand fingers
 display.drawCircle(36+x,13+y,1,col); //right hand fingers
 display.drawLine(7+x,15+y,13+x,11+y,col);  // four lines that make up body
 display.drawLine(20+x,11+y,25+x,15+y,col);  //
 display.drawLine(5+x,21+y,16+x,34+y,col);  //
 display.drawLine(27+x,21+y,16+x,34+y,col);  //
// display.drawLine(17+x,19+y,10+x,21+y,col);  // four lines that make up mouth
// display.drawLine(17+x,19+y,23+x,21+y,col);  
 display.drawRect(4+x,31+y,9,6,col);  // rectangle that makes up left leg
 display.drawRect(20+x,31+y,9,6,col);  // rectangle that make up right leg


void polygonwings1() {
 display.drawTriangle(9+x,14+y,-20+x,5+y,1+x,-5+y,col);  //first wing
 display.drawTriangle(23+x,13+y,50+x,5+y,30+x,-5+y,col);  //second wing

void polygonwings2() {
 display.drawTriangle(9+x,14+y,-10+x,5+y,1+x,-5+y,col);  //first wing
 display.drawTriangle(23+x,13+y,45+x,5+y,30+x,-5+y,col);  //second wing