Arduino Polygon Bug

We’ve had a play with shapes and possible even some fun randomness. Now its time to find out just how hard rewarding it is to draw an actual graphic.

We are going to encode our abstracted polygon bugs to Arduino (Adafruit) code and animate that bug on screen.

In the previous Polygon Bug exercise you should have ended up with a beautiful abstracted bug;

Here is mine – I didn’t have a chance to colour it in….which is lucky cause our OLED’s are monochrome – that is – they only draw in black and white;

IMG_1088

You can see I’ve tried to draw simpler shapes over the more complex ones.
This drawing is still way too complicated for our little screen. Try and ensure all your shapes begin and end on points and that circles have there centre at a point and are at least a 2 points wide.

The is part of the ‘limits’ of the systems with which we are working. We must always try and work with the lists of the system to work out the best possible abstraction (the computer version) of our drawn bug. A circle must have a centre point and to points either side of this centre to describe the diameter of the circle. You will also find that diagonal lines and triangles get ‘bumpier’ the smaller they get because its hard to draw accurate triangles with limited pixels. You should explore these limits by drawing shapes of different sizes and lines of different angles. When it comes to draw you’ll understand what works and what doesn’t.

Remember our story about abstraction and about how the best abstraction is one that does the most with as little instructions possible – the smiley face is an awesome example of very good abstraction. We can convey a range of emotions with just three lines in a way that everybody understands.

SMILE_FACE_16x16_PIXEL_EXAMPLE1

The more shapes in your diagram the more numbers you’ll have to code. Keep it as simple as possible. Get rid of as many lines and she as you can without losing your character.

Now its time to start a new sketch in the arduino IDE.

Remember you’ll need all those libraries and setup code that we use to make the OLED screen work with the arduino. I’ll paste them here so you can copy them. I’ve added a couple of new extra bits that we’ll need to talk about;

#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
  
  display.clearDisplay();
  
}

void loop() {

drawPolygonBug1();

}

void drawPolygonBug1() {




}


 

We’ve added a couple of new elements to this framework for drawing with the OLED.
In previous sketches we did all our drawing in the loop. Now you’ll note that I’ve created what is called an extra function in addition to our ‘setup’ and ‘loop’ methods.

You’ll notice it looks a lot like setup and loop – but here I’ve made up a name ‘drawPolygonBug1’

void drawPolygonBug1() { }

You’ll also note the in the loop I now call on this function by typing a line of cods that looks like this;

drawPolygonBug1();

Everytime my program runs through the ‘loop’ its going to run the code in this function.

In fact the program will jump out of loop and complete the ‘drawPolygonBug1()’ function before coming back and completing the loop.

Why do this? It makes our code modular. We can break our coding into neat little packets. This means our code to animate the graphic is seperate from our code to animate that graphic. We can also call on the same bit of code 100 or 1000 times very easily.

Here we are going to use this function to draw our Polygon bug.

Rather than just jumping in and starting to draw it is a good idea you to create a plan of your code using comments. For our Graphic this might mean breaking it down into steps like this;

#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
  
  display.clearDisplay();
  
}

void loop() {

drawPolygonBug1();

}

void drawPolygonBug1() {

// main body shape
// eyes
//pupils
//arms
//hands
//legs
//feet
//wings


}

This allows you to plan out your whole shape and makes sure you haven’t forgotten any elements. If we were working on a more complex program we might write sets of instructions in plain language that we than go in and try and ‘flesh out’ with actual code.

In this example our comments are going to help us code, help us keep our code organised, and make our code easier to read for both us coding it and others who might read it.

Once you’ve put in these comments go through and fill in the details. Like this;

#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
  
  display.clearDisplay();
  
}

void loop() {

drawPolygonBug1();

}

void drawPolygonBug1() {

// main body shape

display.drawRect(50,20,20,20);

// eyes
//pupils
//arms
//hands
//legs
//feet
//wings


}

Now run through and continue filling in your code and till you’ve finished your graphic.

As you complete the first draft of your graphic in code you’ll see elements of your original abstraction that you’ll need to improve or amend – this is normal – we discover the ‘contingencies’ of our particular medium as we create and we need to adjust and work with them.

Now we will work to add some animation to our little graphic.