Project 7.03 Drawing Shapes with the OLED

We can do more than just text on the OLED. In this project you’ll learn how to draw shapes too!

Project Code:

////////////////////////////////////////////////////
// 7.03 Drawing Shapes with the OLED

#include <Adafruit_SSD1306.h>

byte screenWidth = 128;
byte screenHeight = 64;
byte screenAddress = 0x3C;

Adafruit_SSD1306 display(screenWidth, screenHeight, &Wire);
void setup() {
  display.begin(SSD1306_SWITCHCAPVCC, screenAddress);
  display.setTextColor(SSD1306_WHITE); 
}

void loop() {
  display.clearDisplay();
  display.drawPixel(63, 32, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.drawLine(0, 0, 63, 63, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.drawCircle(63, 31, 12, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.fillCircle(63, 32, 12, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.drawTriangle(63, 0, 96, 63, 32, 63, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.fillTriangle(63, 0, 96, 63, 32, 63, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.drawRect(10, 10, 107, 43, WHITE);
  display.display();
  delay(1000);

  display.clearDisplay();
  display.fillRect(10, 10, 107, 43, WHITE);
  display.display();
  delay(1000);
}
////////////////////////////////////////////////////

Copy

*If you’re copying and pasting the code, or typing from scratch, delete everything out of a new Arduino sketch and paste / type in the above text.

First, we include the library needed for the OLED.

#include <Adafruit_SSD1306.h>

Copy

Then we make some standard variables for the OLED to define screen width, height, and the I2C address.

byte screenWidth = 128;
byte screenHeight = 64;
byte screenAddress = 0x3C;
Copy

After that we use the constructor to make our display object.

Adafruit_SSD1306 display(screenWidth, screenHeight, &Wire);  

Copy

Now we can set the OLED up in the setup() function.

void setup() {
  display.begin(SSD1306_SWITCHCAPVCC, screenAddress);
  display.setTextColor(SSD1306_WHITE); 
}

Copy

Next, we can use specific functions to draw different shapes on the OLED! Don’t forget that (0,0) for the OLED is actually in the top left of the screen.

The first shape we will explore is actually just a point. We can draw points on the OLED with the function drawPixel. The first parameter is the X position, the second parameter is the Y position, and the last parameter is the color. All of these functions last parameter will be “WHITE” since this OLED can only display white.

void loop() {
  display.clearDisplay();
  display.drawPixel(63, 32, WHITE);
  display.display();
  delay(1000);

Copy

The next shape is a line. We can use the drawLine function. These parameters are the starting x position, starting y position, ending x position, ending y position, and the color.

display.clearDisplay();
display.drawLine(0, 0, 63, 63, WHITE);
display.display();
delay(1000);

Copy

The next shape is a circle. We can use the drawCircle function. These parameters are the x position, y position, circle radius, and color.

display.clearDisplay();
display.drawCircle(63, 31, 12, WHITE);
display.display();
delay(1000);

Copy

The next shape is also a circle. We can use the fillCircle function to draw a circle that is filled in. These parameters are the x position, y position, circle radius, and color.

display.clearDisplay();
display.fillCircle(63, 32, 12, WHITE);
display.display();
delay(1000);

Copy

The next shape is a triangle. We can use the drawTriangle function. This function takes a set of three points and draws lines connecting them. The parameters are x0, y0, x1, y1, x2, y2, and color.

display.clearDisplay();
display.drawTriangle(63, 0, 96, 63, 32, 63, WHITE);
display.display();
delay(1000);

Copy

The next shape is also a triangle. We can use the fillTriangle function. This function takes a set of three points, draws lines connecting them and fills in that area. The parameters are x0, y0, x1, y1, x2, y2, and color.

display.clearDisplay();
display.fillTriangle(63, 0, 96, 63, 32, 63, WHITE);
display.display();
delay(1000);

Copy

The next shape is a rectangle. We can use the drawRect function to draw a rectangle. This function takes the top left starting x position, top left starting y position, width of the rectangle, height of the rectangle and color.

display.clearDisplay();
display.drawRect(10, 10, 107, 43, WHITE);
display.display();
delay(1000);

Copy

The next shape is also a rectangle. We can use the fillRect function to draw and fill in a rectangle. This function takes the top left starting x position, top left starting y position, width of the rectangle, height of the rectangle and color.

  display.clearDisplay();
  display.fillRect(10, 10, 107, 43, WHITE);
  display.display();
  delay(1000);
}
////////////////////////////////////////////////////

Copy