How to draw shapes on a 72x40 OLED?

When drawing multiple shapes, consider the overlap order—later draws overwrite earlier ones. For example, if you draw a filled rectangle from (0, 0) to (71, 39) in white, then draw a circle in black at (36, 20) with radius 10, the circle will appear as a hole in the white background. This is because the library uses a page-based buffer where each pixel is a bit, and setting it to 0 clears it. The buffer is 72 bytes wide and 5 pages high (40/8 = 5), totaling 360 bytes. You can access the buffer directly with display.getBuffer() to manipulate pixels manually, which is faster for bulk operations. For instance, to draw a vertical line, you can set bits in the buffer by calculating the page and column: for pixel (x, y), the page is y/8, the bit position is y%8, and the column is x. This manual approach avoids library overhead but requires careful bitwise operations. The SSD1306 supports horizontal and vertical scrolling, which can animate shapes without redrawing. You can set scrolling with display.startscrollright(0x00, 0x07) to scroll the entire display right, or display.startscrollleft(0x00, 0x07) for left. The parameters are the start and end pages, so for a 40-pixel display, pages 0 to 4 are valid. Scrolling works at 2-3 frames per second, which is slow but useful for marquee text. For custom shapes, you can define them as arrays of points and draw them with a loop of drawPixel() calls, but this is inefficient for large shapes. A better approach is to use the drawLine() function for each edge of a polygon. For a pentagon with vertices at (36, 5), (50, 15), (45, 30), (27, 30), and (22, 15), you need five lines, which the library draws in 1-2 ms total. The bounding box is from x=22 to 50 and y=5 to 30, covering 29 * 26 = 754 pixels, but the actual shape is smaller. The fill function for polygons isn’t built-in, so you’d need to implement a scanline fill algorithm, which is feasible for 72x40 resolution because the height is only 40 lines. The scanline algorithm iterates over each y from 0 to 39, finds intersections with the polygon edges, and fills between them. This takes about 5 ms in C++ on an Arduino, which is acceptable for static graphics.

For text and shapes combined, the library includes setTextSize(size) where size 1 is 5x7 pixels per character, size 2 is 10x14, and so on. A 72-pixel wide display can fit 14 characters of size 1 (72/5 = 14.4, but with spacing, it’s 14), or 7 characters of size 2. When drawing a rectangle around text, you need to calculate the text dimensions: for a string of 10 characters at size 1, the width is 10 * 6 = 60 pixels (including 1-pixel spacing), and height is 8 pixels (7 for the font plus 1 for spacing). So a bounding box from (5, 5) to (65, 13) would enclose the text. The library’s getTextBounds() function can automate this, but it’s not available in all versions, so manual calculation is often needed. The 0.42 inch 72x40 oled display’s pixel pitch is 0.15 mm, giving a physical size of 10.8 mm x 6.0 mm, so shapes are small but legible. For touch interaction, you can overlay a resistive touch panel, but that’s beyond the scope of drawing shapes. The I2C bus can handle up to 127 devices, so you can chain multiple displays, each with a different address set by the SA0 pin. The default address is 0x3C, but you can change it to 0x3D by connecting SA0 to VCC, allowing two displays on the same bus. This is useful for dual-screen projects where you draw shapes on one and text on the other. The library’s setCursor() function sets the starting position for text, and you can draw a shape behind it by calling the shape function before the text. For example, to draw a button, use fillRect(10, 10, 50, 20, WHITE) then drawRect(10, 10, 50, 20, BLACK) for a border, and then setCursor(15, 15) and print("OK"). The button will be 50x20 pixels, which is 1,000 pixels, or 34.7% of the display area. The border thickness is 1 pixel, which is fine for 72x40 resolution, but for a thicker border, you can draw multiple rectangles offset by 1 pixel. This technique is common in UI design for embedded systems.

Performance optimization is crucial when drawing many shapes. The SSD1306’s buffer is byte-addressable, so writing 8 pixels at once is faster than individual pixel calls. For example, to draw a horizontal line of 72 pixels, you can set a byte to 0xFF for each column, which takes 72 bytes of I2C data. The library’s drawFastHLine() function does this efficiently, but if you use drawPixel() in a loop, it sends 72 separate I2C commands, which is 72 times slower. The same applies to vertical lines; drawFastVLine() sets a bit in each page for a given column. For a vertical line from (10, 0) to (10, 39), it sets the corresponding bit in each of the 5 pages, requiring 5 bytes of data. The library’s internal implementation uses bitwise operations to set the correct bit within each page byte. For example, page 0 covers y=0-7, page 1 covers y=8-15, etc. So a vertical line at x=10 sets bit 0 in page 0 for y=0, bit 1 in page 0 for y=1, up to bit 7 in page 0 for y=7, then bit 0 in page 1 for y=8, and so on. The drawFastVLine() function calculates the start and end pages and sets the appropriate bits in a single pass. This is why it’s 10x faster than a pixel-by-pixel approach. For circles, the library uses the midpoint circle algorithm, which only calculates 1/8 of the circle and mirrors it, so a circle of radius 10 requires 80 pixel operations, each setting a bit in the buffer. The algorithm is efficient because it uses integer arithmetic, avoiding floating-point operations. The time to draw a circle is about 0.5 ms on a 16 MHz Arduino. For filled circles, the library draws horizontal lines between the left and right edges for each y, which is faster than filling individual pixels. The number of lines is 2 * radius + 1, so for radius 10, it’s 21 lines, each setting a range of bytes. This takes about 1 ms. The 0.42 inch 72x40 oled display’s response time is 10 µs, so the display itself is not a bottleneck; the I2C bus is. At 400 kHz, each byte takes 20 µs, so a full buffer update of 360 bytes plus commands takes about 8 ms. If you’re drawing shapes that modify only a portion of the buffer, you can use display.display() to send only the changed bytes by tracking dirty regions, but the library doesn’t do this automatically. You can implement a custom function that compares the old and new buffers and sends only the differences, which can reduce update time to 1-2 ms for small changes. This is advanced but necessary for animations like a bouncing ball.

For drawing shapes with anti-aliasing, the SSD1306 library doesn’t support it natively because the display is monochrome. However, you can simulate anti-aliasing by using dithering patterns. For example, a line at an angle can be drawn with varying pixel intensities by using a 2x2 or 4x4 pattern. Since the display only has on/off pixels, you can use spatial dithering to create the illusion of gray levels. For a 45-degree line, you can alternate between setting pixels and leaving them off, creating a smoother appearance. This is done by calculating the sub-pixel position and deciding whether to turn on the pixel based on a threshold. The algorithm for line anti-aliasing is the Wu algorithm, which uses the fractional part of the line equation to set two pixels at each step. For a 72x40 display, this adds about 50% more pixels per line, but the visual improvement is noticeable. The library doesn’t include Wu, so you’d need to implement it yourself. The code involves fixed-point arithmetic, where the line slope is stored as a 16-bit integer. For a line from (0, 0) to (71, 39), the slope is 39/71 ≈ 0.5493, and the Wu algorithm would set pixels at (x, y) and (x, y+1) with weights based on the fractional part. This doubles the number of pixel writes, so a 72-pixel line would set 144 pixels, taking about 0.3 ms longer. The 0.42 inch 72x40 oled display’s high contrast makes anti-aliasing less critical, but for curves, it helps. Another technique is to use sub-pixel rendering for text, but that’s only possible with color displays. For shapes, you can also use the drawRoundRect() function, which draws a rectangle with rounded corners. The corner radius is specified in pixels, so a radius of 3 on a 50x20 rectangle gives corners that are 3 pixels in each direction. The function draws the four corners as quarter-circles and the straight edges. The quarter-circle for radius 3 covers 4 pixels (since the arc length is πr/2 ≈ 4.7, but discretized to 4), so the total shape has 4 corners * 4 pixels = 16 corner pixels plus the straight edges. The straight edges are 50 - 2*3 = 44 pixels wide and 20 - 2*3 = 14 pixels high, so the top and bottom edges are 44 pixels each, and the left and right edges are 14 pixels each, totaling 44+44+14+14 = 116 pixels. The filled version uses fillRoundRect(), which fills the interior. The interior area is 44 * 14 = 616 pixels, plus the corners, so total 632 pixels. This