Pixel Graphics

Now that you’ve seen Text on the LCD, it’s time to dive into pixel graphics.

The display on the CodeX is 240x240 pixels. That’s 57,600 pixels!

1. Single Pixel Action

Let’s draw a white dot in the middle of the screen:

1
2
from codex import *
display.set_pixel(120, 120, WHITE)

Experiment with set_pixel(). What are the three parameters? What are their possible values? See what you can discover about this function by tinkering.

2. Screen Coordinates

../../_images/Screen_coords.png

The screen is a grid of pixels. Each pixel has an (x, y) coordinate as shown here. The x axis goes from left to right. The y axis goes from top to bottom. The y axis is backwards from the graphs you’ve learned in school. Computer monitors refresh the screen from the upper left to lower right. Our pixel coordinate system matches the flow of the display.

3. Lines

Naturally the Bitmap module provides methods to draw things more complex than just pixels! A good next-step is to draw a line using the draw_line() function. Try a diagonal across the screen:

from codex import *
display.draw_line(0, 0, 239, 239, RED)

You can also combine your Pixel Graphics skills with the Text Window knowledge you gained earlier. Go ahead! Experiment with drawing pixels and lines inside a Window!