web analytics
July 9, 2015

Display – Drawing Shapes

Below are various Arduino code examples showing how shapes can be drawn to the screen.

#include "Phoenard.h"

void setup() {
  // Draw a line connecting two points
  // Parameters: (x1, y1, x2, y2, color)
  display.drawLine(20, 20, 300, 200, RED);
  
  // Draw a horizontal line connecting two points
  display.drawLine(20, 200, 300, 200, GREEN);
  
  // Draw horizontal and vertical straight lines
  // Position is the left or top pixel of the line
  // Parameters: (x, y, length, color)
  display.drawHorizontalLine(20, 20, 200, GREEN);
  display.drawVerticalLine(220, 20, 100, YELLOW);
}

void loop() {
}

Lines

#include "Phoenard.h"

void setup() {
  // Rectangles are drawn using drawRect/fillRect/fillBorderRect
  // The parameters are (x, y, width, height, color)
  // For the fillBorderRect function, a second color is for the border color.

  // Draw a red border around the edge of the screen
  // Then fill with a yellow color, and a green color over that
  display.drawRect(0, 0, 320, 240, RED);
  display.fillRect(20, 20, 280, 200, YELLOW);
  display.fillRect(40, 40, 240, 160, GREEN);
  
  // Draw black rectangles increasing in size
  display.drawRect(130, 50, 16, 16, BLACK);
  display.drawRect(130, 50, 32, 32, BLACK);
  display.drawRect(130, 50, 64, 64, BLACK);
  display.drawRect(130, 50, 128, 128, BLACK);
  
  // Draw a white rectangle with a black rectangle border color
  // Inside that rectangle, draw a black rectangle with a red border
  display.fillBorderRect(50, 114, 64, 64, WHITE, BLACK);
  display.fillBorderRect(70, 134, 24, 24, BLACK, RED);
}

void loop() {
}

Rectangles

#include "Phoenard.h"

void setup() {
  // Fill the screen with one big circle
  // Parameters are (center-x, center-y, radius, color)
  display.fillCircle(160, 120, 100, WHITE);
  
  // Draw a smaller red circle inside
  display.drawCircle(160, 120, 95, RED);
  
  // Draw two smaller circles inside with a border
  display.fillBorderCircle(120, 80, 30, GREEN, BLACK);
  display.fillBorderCircle(200, 80, 30, GREEN, BLACK);
}

void loop() {
}

Circles

#include "Phoenard.h"

void setup() {
  // Fill the screen with one big rounded rectangle
  // Parameters: (x, y, width, height, radius, color)
  display.fillRoundRect(10, 10, 300, 220, 50, ORANGE);
  
  // Draw a filled rectangle with a border inside
  display.fillBorderRoundRect(30, 30, 200, 50, 20, WHITE, BLACK);
  
  // Draw a small rectangle below
  display.drawRoundRect(40, 120, 250, 60, 10, GREEN);
}

void loop() {
}

Rounded Rectangles

Next up: Drawing text