Edges and Limits – Extending the Bug

Now that you know how to make your graphic move across the screen it would be good to use all the skills developed so far to work out;

  1. How to make our animation loop so it doesn’t disappear off into infinity.
  2. How to make the edges of the screen actual edges that our animation might bounce off.
  3. How to add some detail with extra frames so we can make our bug flap their wings, or blink their eyes.

The answer for that first question should be easy – basically we need to use the code we saw in our first ‘Increment’ sketch.

The x value is what’s making our bug move further away. If we reset that value our Bug will return to his original spot – you should be able to work this out. Here is the code you will need;

if (x == 150){

x=0;

}

Add it to the bottom of your loop method somewhere. Here is mine. I’ve changed my initial x value to -50 and my rest value to -50 so my bug flys all the way across the screen.

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

#define OLED_RESET 4

Adafruit_SSD1306 display(OLED_RESET);

int x = -50;

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

  display.clearDisplay();
  display.setTextColor(WHITE);
  pinMode(2, INPUT);  //this is our button from our increment - we will us it again soon.
  
}


void loop() {
 
  display.clearDisplay();
  x++;                        //add one to x every time we run through the loop
  display.setCursor(0,0);      //reset the text to draw in the top right corner
  display.println(x);          // print the value of x to the memeory of the display
  drawPolygonBug1();          // call on the function that draws our polygon bug
  display.display();          // write the displays memory to the screen

  if (x == 150){
      x=-50;
  }

}

void drawPolygonBug1() {     //here is my bug drawing with all my  +x's showing
  
 //eyes
 display.drawCircle(10+x,0,4,1);  //first eye
 display.drawCircle(22+x,0,4,1);  //second eye eye
 //pupils
 display.fillCircle(11+x,1,1,1);  //first pupil
 display.fillCircle(22+x,1,1,1);  //second pupil
 //nose
 display.drawCircle(17+x,8,5,1); 
 //wings
 display.drawTriangle(9+x,14,-20+x,5,1+x,-5,1);  //first wing
 display.drawTriangle(23+x,13,50+x,5,30+x,-5,1);  //second wing
 //hands
 display.drawCircle(0+x,17,4,1);  //left hand
 display.drawCircle(31+x,17,4,1);  //right hand
 //fingers
 display.drawCircle(-4+x,13,1,1);  //left hand fingers
 display.drawCircle(-4+x,22,1,1);  
 display.drawCircle(-6+x,17,1,1);  
 display.drawCircle(36+x,13,1,1); //right hand fingers
 display.drawCircle(36+x,21,1,1);  
 display.drawCircle(38+x,17,1,1);  
 //body
 display.drawLine(7+x,15,13+x,11,1);  // four lines that make up body
 display.drawLine(20+x,11,25+x,15,1);  //
 display.drawLine(5+x,21,16+x,34,1);  //
 display.drawLine(27+x,21,16+x,34,1);  //
 //mouth
// display.drawLine(17+x,19,10+x,21,1);  // four lines that make up mouth
// display.drawLine(17+x,19,23+x,21,1);  
 display.drawLine(17+x,25,10+x,21,1);  
 display.drawLine(17+x,25,23+x,21,1); 
 //legs
 display.drawRect(4+x,31,9,6,1);  // rectangle that makes up left leg
 display.drawRect(20+x,31,9,6,1);  // rectangle that make up right leg

}

 Challenges:

Can you speed your bug up a little? Try

x= x+3;

instead of x++;

Can you add some more code that checks if the button has been pressed and resets X?

You will need something like this;

if (digitalRead(2) == HIGH) {

x = 0;

}

Can you make the animation only move when you press the button?
(you don’t need any more code for this – you already know how to do it)

Giving your screen edges:

Now we need to extend our sketch a little more. Moving in a straight line is pretty dull so lets start by repeating everything we did for the X axis on the Y axis. Start by adding +y  to every y axis coordinate in your sketch. Your shapes should start to look like this;

display.drawTriangle(9+x,14+y,-20+x,5+y,1+x,-5+y,1);

What elements will you need to add to make animation on the y-axis work like it does on the x-axis?

  1. You’ll need to initialise a y variable at the top of your sketch just like we did with ‘x’;
    int y = 0;
  2. You’ll need to increment ‘y’ just as you did with the x-axis add y++; or y=y+3; to your sketch about the same point you find x++;
  3. You’ll also need to add an IF condition so your animation doesn’t fly off into space.
    Add something like this to the bottom of your sketch (but you should know this now)

    if ( y >= 100){
    
    y=0;
    
    }

Now lets give our screen some proper edges for our bug to bounce off.
To achieve that we need to add another variable to our sketch – I really hope you know how to do that by now.

You’ll need to add int z=0; somewhere at the top of your sketch with the other variables.

Then we are going to add this code -replacing the simple x++;

 y= y+z;

if (y < 0){
  z = 1;    
}

if (y > 50){
  z = -1;  
}

Can you see what this is doing? Instead of just adding one to the ‘y’ its adding ‘z’ to ‘y’.  The trick is that every time y gets to the bottom of the screen we change ‘z’ to equal -1. Now we are adding -1 to on each loop and the graphic rises up because y is getting less (when we add -1 to a number it is the same as taking 1 away). When ‘y’ gets back to the top of the screen we ‘switch’ z back to +1 – and down goes the graphic.

Make sure you understand this – if you don’t -ask your tutor.