Lines, Rectangles & Circles
Draw shapes to build a simple UI.
Lines, Rectangles & Circles is a free Arduino & IoT Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Arduino & IoT Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond Text
Text alone gets dull. The GFX library also draws shapes, so you can frame data, build meters, and design a real little interface. 🎨
The Pixel Grid
Every shape lives on a coordinate grid. Point (0,0) is top-left; x runs right and y runs down, just like the text cursor you already used.
Draw a Single Pixel
The smallest mark is one dot. drawPixel takes an x, a y, and a color, lighting exactly one point on the screen.
display.drawPixel(10, 10, WHITE);Draw a Line
drawLine connects two points. Give a start x and y, an end x and y, and a color to stroke a straight line between them.
display.drawLine(0, 0, 127, 63, WHITE);Outline a Rectangle
drawRect needs a top-left x and y, then a width and height. It strokes just the border, perfect for framing a value or a section.
display.drawRect(0, 0, 60, 30, WHITE);Fill a Rectangle
Swap to fillRect with the same arguments to paint the whole box solid. Filled bars are the heart of meters and progress displays.
display.fillRect(0, 0, 60, 30, WHITE);Outline a Circle
drawCircle takes a center x and y plus a radius. It strokes a ring, handy for dials, status dots, or rounded icons.
display.drawCircle(64, 32, 20, WHITE);Fill a Circle
Use fillCircle for a solid disc. A small filled circle makes a clear on/off indicator that is easy to read at a glance.
display.fillCircle(64, 32, 5, WHITE);Rounded Rectangles
For a softer look, drawRoundRect adds a corner radius after width and height. Rounded boxes make buttons and cards feel friendlier.
display.drawRoundRect(0, 0, 60, 30, 8, WHITE);Layer Shapes and Text
Order matters: shapes drawn later sit on top. Draw a filled box first, then print text over it for a labeled badge effect.
display.fillRect(0, 0, 50, 16, WHITE);
display.setTextColor(BLACK);Then Push to Screen
As always, all drawing fills the buffer. End your shape work with display.display() so the whole composed image appears at once.
display.display();Quick Check
You want a solid bar to show how full a tank is.
Recap
You can now draw pixels, lines, rectangles, and circles, and layer shapes with text. These primitives are all you need to compose a real UI.
Frequently asked questions
Is the “Lines, Rectangles & Circles” lesson free?
Yes — the full text of “Lines, Rectangles & Circles” is free to read here on the web, and the Arduino & IoT Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Arduino & IoT Academy course, upgrade to CoddyKit PRO.
What will I learn in “Lines, Rectangles & Circles”?
Draw shapes to build a simple UI. You practise Arduino & IoT Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Arduino & IoT Academy?
No prior experience is required. Arduino & IoT Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Lines, Rectangles & Circles” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Arduino & IoT Academy lesson?
Yes. Every Arduino & IoT Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Wire & Init an SSD1306 OLED
- Draw Text in Multiple Sizes
- Lines, Rectangles & Circles
- Animate a Bar Graph