Meaningful Math via Coding: Making Masks in p5 (coordinate planes & polygons)

"Are we doing math?!", one of my 6th grade computer science students asked me, appalled, during one of our class sessions. We were on day 2 of our "code a mummy/code a mask" project when she realized that all of the work that she was doing in the p5 coordinate system in order to write the code for her "face art" was, indeed, math. 

One of the aspects of programming that I love is the opportunity for my students to engage in meaningful mathematics in the pursuit of creating something with code. Especially for my students who might otherwise struggle in their mathematics courses, coding is a chance for them to practice math concepts in a different context, which sometimes helps them make sense of the math in a way they haven't before.

This last school year, I tried Raspberry Pi Foundation's "Make a Face" project for the first time with my 6th grade classes. Math concepts that we covered in this project included:

• solving problems on a coordinate plane (CCSS 6.NS.C.8)
• find distances between points on the coordinate plane (CCSS 6.NS.C.8)
• draw polygons on the coordinate plane given coordinates for the vertices (CCSS 6.G.A.3)
• use coordinates to find the length of a side (CCSS 6.G.A.3)

In the project guide by the Raspberry Pi Foundation, students create geometric art using p5.py, which is a Python library based on the Processing language, and a great way (in addition to Turtle Python) to introduce beginning-level students to coding visual artwork. I launched this project around October (during which my students were studying ancient Egypt in Social Studies, and had the Halloween holiday on their minds), so students were tasked with either coding a mask, a self-portrait or a mummy. 

To create a shape, students can simply use the function for the shape they want to create, but will then need to experiment with starting coordinates for that shape + the length and width of the shape (or the radius) to place the shapes where they want them on the grid.

For example, if a student wants to create a rectangle on a grid of 400 x 400 that starts at x of 100 and ends at x of 300, they then calculate that length in order to draw their shape, since the arguments for the rectangle function are the x & y starting coordinates + width and height of the shape. As we begin to layer shapes, students also had to add and subtract along the y-axis to ensure shapes lined up properly.

In preparation for our programming, students first completed a Desmos activity on the p5 coordinate system. Then, after an introductory code-along with me, students used a planning document to first hand-draw the image they wanted to program and to think about what p5 functions they might use in their programming. Once they had some planning done on paper, they used a coding template that I provided them in Trinket (the p5.py file originally provided by Raspberry Pi in their project guide) to help them get started on their own creations.

In the process, students developed a greater understanding of how coordinate systems work, how addition and subtraction relate to movement along number lines, how to determine distances between points on a coordinate plane and how to use the characteristics of shapes in an authentic context. 

Examples of student work: