Arduino Adafruit GFX Drawing Triangles

Getting Started with Triangles

Arduino Adafruit GFX Drawing TrianglesTriangles are yet another of the graphics primitives available with the Adafruit GFX library that useable with many Arduino GFX Displays.    If you’re new to display graphics,  you may want to spend a few minutes reading about coordinates.

The library uses a 16 bit color format.  Successfully specifying a color can be a pain in the buttocks with out the assistance of a utility.   I discuss the format and point to a utility that I use in this article.

Getting Started with TFT Displays

Arguably one of the tougher aspects to using one of the hundreds of TFT displays available is finding the software library and hardware configuration that gets you started.

If you’re new to TFT displays,  I suggest that your first purchase be one that is supported by well documented on line tutorials.   I have a tutorial HERE  for a low cost 1.44 inch display that was used to develop this guide.

You can purchase this display at any of the following locations:

eBay      Amazon

Adafruit GFX drawTriangle()

What is Does

Draws a triangle with a single line of the color you specify onto your TFT display.

How to Use It

You will need to specify three points of the triangle and a color:

  • An X-Y coordinate for Point 0
  • An X-Y coordinate for Point 1
  • An X-Y coordinate for Point 2
  • A 16 bit Color used to draw the triangle

Adafruit GFX drawTriangledrawTriangle() Sample Sketch

The sketch you see below draws an animated triangle that changes size by sweeping one of its sides from top to bottom.

// Henry's Bench
//  Adafruit GFX drawTriangle
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0xFFFF // White
#define LINECOLOR 0x0000  


#define CS 10
#define DC 9

// Declare an instance of the ILI9163
TFT_ILI9163C tft = TFT_ILI9163C(CS, 8, DC);  

void setup() {
  tft.begin();
  tft.fillScreen(BACKCOLOR);
  
  tft.drawTriangle(63, 63, 20, 20, 106, 20, LINECOLOR);
}

void loop(){   
     int yPosit;
  
     for(int y = 0; y < 87; y++){
       yPosit = 20 + y;
       tft.drawTriangle(63, 63, 20, yPosit, 106, yPosit, LINECOLOR);
       tft.drawTriangle(63, 63, 20, yPosit, 106, yPosit, BACKCOLOR);      
       
     }
}

Adafruit GFX fillTriangle()

What is Does

This is very similar to draw rectangle except it draws a filled triangle of a specified color onto your TFT display.

How to Use It

You will need to specify three points of the triangle and a color:

  • An X-Y coordinate for Point 0
  • An X-Y coordinate for Point 1
  • An X-Y coordinate for Point 2
  • A 16 bit Color used to fill the triangle

Adafruit GFX fillTriangle

fillTriangle() Sample Sketch

In this sketch I use four filled triangles in combination with a filled rectangle and a filled circle to create something that sort of looks like the sun.

// Henry's Bench
//  Adafruit GFX fillTriangle
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>


// Pallete - Where you assign names to colors you like
#define BACKCOLOR 0x841F 
#define CIRCCOLOR 0xFF55
#define FILLCOLOR1 0xFFE0
#define FILLCOLOR2 0xFFF2 


#define CS 10
#define DC 9

// Declare an instance of the ILI9163
TFT_ILI9163C tft = TFT_ILI9163C(CS, 8, DC);

void setup() {
  tft.begin();
  tft.fillScreen(BACKCOLOR);
  
  tft.fillRect(34, 34, 58, 58, FILLCOLOR2);
  
  
  tft.fillTriangle(73, 34, 10, 63, 73, 93, FILLCOLOR1);
  tft.fillTriangle(53, 34, 117, 63, 53, 93, FILLCOLOR1);
  tft.fillTriangle(34, 53, 63, 117, 93, 53, FILLCOLOR1);
  tft.fillTriangle(34, 73, 63, 10, 93, 73, FILLCOLOR1);  
  
  tft.fillCircle(63,63,30, CIRCCOLOR);   
  
}

void loop(){   

}