Creating Characters with Code

Ever wonder how to take the Everyone Can Code projects and integrate them into your classroom? Even when you are a little fearful of code like me? I discovered with my students that Swift playgrounds is an amazing way to integrate code into my class while connecting it to their learning.

Our class novel, Because of Mr. Terupt, is told through the voices of seven characters. A lot of the work we do with the book is on character analysis. In the past, students have chosen a character and created what their locker would look like, or even created a fake Instagram profile for them and explained their choices based on what they learned in the book. I thought creating an avatar of the character in Swift playgrounds, using the Everyone Can Code project, could achieve the same results with a slightly different approach. The question was simple, based on what students knew of the character, could they make choices and justify them, while at the same time learn to code? 

With that idea in mind, I decided to jump into learning to code and practiced following the steps in the guide by making iconic book characters in Swift playgrounds using the Build with Stacks and Shapes project. In this process, I learned so much and to help you overcome your fear, I discovered 5 helpful tips to help you in your coding journey. 

Practice Characters

Tip 1: Practice is Important

When you have made the same mistakes as the students in your classroom, you can help them more easily find the errors. Code is all about debugging!

I felt like I needed to know the Build with Stacks and Shapes project inside out and backwards before teaching it to my students but we had finished the book and we had to move forward! I set aside a 1 hour block, and since the guide said the estimated time was going to be 1 hour, I thought it would be fine.

Not quite! I went right into setting up an App playground and composing with stacks and shapes. My students code Lego robots regularly so I thought the idea of code and how it worked was going to be pretty clear.

Text based coding offered a lot of challenges that block coding did not for my students. Removing blocks was so much simpler than removing text was. A missing {bracket} could make it impossible to do anything. The first step was to remove some of the existing code and just deleting the code and replacing it forced us to do some debugging. Thankfully, I had paired them up so they had another person to work through problems with in addition to me!

Coding is a skill that needs time to develop. Practice takes time, so take your time when integrating this activity with your class.

Tip 2: Labelling your Code //

To build your characters, you are able to add shapes and customize them through adjusting the code. Shapes are stacked on top of each other to create the different features of your character.

Once every group had a head we moved onto adding a new shape for the neck. Before adding the shape I made sure to have students label their code. This was important so we could connect parts of our code to the character and make changes later if needed. When they started a new line, typed //neck and then pressed return. The // makes the computer skip what is written on that line and helped us debug with more ease.  

Tip 3: Let your students explore

When coding your characters, so much can be learned by trial and error for example when we played with offset(x:  , y:  ). Together the students realized that a positive x value moved things right while a positive y value moved things down. Not the coordinate system they are used to.

Coordinate grid example

I gave them the challenge to use what we had learned to make the shoulders of their character. Some pairs moved forward quickly while others struggled. When any team had difficulty they could mirror their iPad to the large screen to get some help from the class. We would solve our problems together, solidify our understanding and move onto the next stage. 

Another example is to discover how the shapes are stacked. The students understood that the code was read from top to bottom by the computer. We went through how the first piece of code is the bottom layer and everything written after it was layered on top. Each shape was like a piece of paper being placed on top of the one before it.

Changing the order of the code caused the most problems. This was where a period or a bracket could go missing and make the code break down. Frustration became the general feeling in the room.  

When letting your students explore, frustration will definitely happen! Knowing your students is very important to be able to know which students may need help first, the ones who would give up quickly, or those who would reach out to classmates. Built-in to Swift playground is the immediate feedback of a red stop sign that tells the student when there was an error in their code. For some they viewed it as a challenge while others it provided a visual cue to ask for help. What surprised me during this activity was despite student being frustrated, they kept at it and persevered until they could fix their code and wanted to know when they could continue working at it.

Tip 4: Create Visual Guides 

To support students to help each other or when students needed more challenges, I created visuals to guide them such as how to trim shapes.

Circle trim levels

Rectangle trim levels

As they needed more coding tools I would show them opacity, shadows, grouping and custom colours. Many of my students were very unhappy with the colour choice they were limited to. However through code, we were able to create any colours we wanted to by changing the amount of red, green, and blue.

RGB values for skin tones

Tip 5: Celebrate your students 

Sharing their characters on the big screen and justifying why they created the avatars the way they did was a celebration of all the hard work and overcoming their frustration. Every avatar that went up was easily recognized by the group and the explanations seemed like the least worrisome part of the entire experience. 

Even with the challenges, my students did say that they thought this was “real” coding and they were proud of their achievements. They felt like coders! According to my sixth graders, “We are proud of finding our mistakes and being patient because if we didn’t keep going we wouldn’t have made anything.”

My students still ask if Thursday afternoons are coding afternoons. It sparked something in them and in order to keep the flame lit, I will need to find other ways to integrate code into English Language Arts. Feel free to drop any ideas in the comments.

For ideas like this one or to continue the conversation, please visit @atcreativestation on Instagram (www.instagram.com/atcreativestation). A hub of creative ideas shared by Canadian ADEs.