Eight Ways to Paint Pixels

Some pixel art designs by participants in the workshops during the Yucatán i6 convention in 2024.

Sometimes I struggle to pinpoint the exact moment when I discover or learn something. "Eureka" moments seem to have different natures. Sometimes they feel unnoticed: "How come I didn't know that thing that's now so obvious?" Other times, they seem like a retrospective synthesis, when I reflect on a journey undertaken with a single motivation.

My path of using pixels has been the latter. I don't remember the exact moment when the idea of ​​painting with pixels came to me; I was just playing with the LED matrix and MicroBlocks, understanding the library's blocks. Questions kept popping into my head: "Could a block be configured with more spaces for a greater number of LEDs?" "Is there a shorter way to draw with pixels without having to duplicate blocks?" And often, even though I know the answers might be within reach by asking the right people (in this case, the MicroBlocks community), I choose to spend more time with an unsolved problem. That makes me value the process more and discover more along the way.

Moment when I was designing the first version of pixel painting.

Perhaps that's why, in the first versions of our pixel painting workshops, we obtained simple drawings created by long scripts. But perhaps those workshops were memorable and meaningful for the participants, valuing each of the simple creations they made more, glimpsing the value and beauty that can be found in mathematics and programming, those peculiar ways of creating things (and not just pictures).

Example of results from the first pixel painting workshop in 2021

Over time, we proposed other ways to paint pixels, exploring different methods, and recognizing their advantages and disadvantages in different contexts.

I'm now sharing, in chronological order, this history of eight different versions of how to paint pixels. There are certainly even more ways to do it, with varying levels of complexity. We hope this record will be of interest to educators and perhaps it will also provide inspiration to artists and creators.

Image	User Code	Helper Function
lion		None

Comments: Only the NeoPixels library is needed. This is a very straightforward method to start painting. Opening many fields in the list blocks can be tedious or difficult for some. Changing the colors of each series is easy, but changing the shape of the drawing is not.

Image	User Code	Helper Function
invader		None

Comments: It takes a little time to understand how the mapping works, but after a few exercises, participants can quickly become hooked on creating different shapes and colors. This technique has the advantage of being able to prototype images on paper or in a text editor.

Image	User Code	Helper Function
mario		None

Comments: This was derived from the previous version, but with more colors.

Image	User Code	Helper Function
wolf		None

Comments: Based on the previous version but with only one matrix. Different letters are used for different colors. Like the previous ones, it may take a little work to understand the logic at first, but once understood, it allows for much faster prototyping of shapes and colors. It would help if the text font were monospaced.

The next four versions use helper functions. The name of each helper function alludes to the first sketches I made with them, and sometimes their names end up being a tribute to the ideas that inspired me.

Image	User Code	Helper Function
dino

Comments: Based on the previous version, a helper function was created to save on block placement; in this way, the workshop could focus more on creating drawings than on creating algorithms. The helper function was limited to 3 colors, as many figures did not require more than that.

Image	User Code	Helper Function
juan carlos bodoque

Comments: In this version, the helper function was extended to 12 colors, each assigned to a letter related to the color's name in English. It was interesting to first challenge participants to discover which letters worked. Here, with the increased diversity of letters, the spacing that occurred when using a non-monospaced font sometimes caused confusion.

Image	User Code	Helper Function
tetris

Comments: This is an alternative version to the previous ones; it stems from an interest in understanding coordinates and generating more basic geometric shapes. In addition to the helper function shown, the library I created also has blocks for generating rows, columns, squares, and numbers.

Image	User Code	Helper Function
emilia

Comments: This version, regardless of the similarities that can be found with previous versions, is inspired almost entirely by recent MicroBlocks libraries and a tutorial for creating retro video games by Bernat Romagosa.

I think it's important to tell this story to highlight the importance that the exploration process can have, regardless of the results.

On the one hand, in my work as an instructional designer, it's thanks to this slow and steady approach that I've been able to discover the tastes and skills of different audiences.

On the other hand, I've been able to observe how participants' processes can have different motivations, tolerances, and paths depending on the tools they're given. With some of the later versions, a participant can create a multi-image animation in a single session. With other methods, even if they create just one image, they become more skilled in using blocks and understanding computational logic.

I believe it's important to communicate these subtle differences, sometimes imperceptible to both direct and indirect users, such as school administrators or parents, because only in this way can we begin to understand important aspects of the design of an educational program, whether formal or informal.

We should consider questions such as: "What programming skills are needed?", "What design skills?", "What kind of patience and experience is required?", and "Why do some things work better for a child just a year older than for another?" The answers aren't always obvious, but I think that by opening up educational and educational design processes like this, we can make better decisions and understand the challenges involved in developing educational workshops and the technologies they employ.