Coding Basic Shapes – Creative Computer Coding Day 1

Creative Computer Coding: Day 1


Today, we reviewed what we learned yesterday with void setup() and void draw(). We focused on applying concepts that we learned yesterday on how to set up our output sketch window. Rather than just writing the code, today we focused on having the students understand how to use the functions and lines of codes. We practiced with troubleshooting and helped if any students experienced any issues with the code or if they were having trouble understanding anything.

After the review activity, we resumed on learning how to draw more shapes: Lines, Triangles, Quadrilaterals, Rectangles, Ellipses, and Arcs. Most of the shapes were easy to visualize and understand, and the trickiest one was comprehending the radians to degrees conversion in the arc() function. We demoed how to create each shape before allowing the students to try and experiment themselves.

Code for Shapes


Each student created their own folders to save their work, and we let them loose on the computers so they could create their personal programs that include all six shapes. After completing the program, we had a bonus program to create an outline of Mickey Mouse.

Next, we planned for the students to come back and we would teach them how to use stroke() and strokeWeight() to increase the line width and darkness for additional appearance customization.

Session 1

The students today were more involved in the teaching, and many involved themselves by suggesting various sizes for the shapes during the demos. The demo, however, was interrupted by a fire drill that lasted about 15 minutes. After, we continued to demo and learn new shapes, before finally letting the students go and create their own sophisticated programs. Because of the time cut, students didn’t have a chance to create the bonus Mickey Mouse project, and we didn’t have time to break for another brief demo of strokeWeight().

Session 2

Students were chatty today and were heavily involved in the teaching and demos. Since Session 2 had more time than Session 1 again, we took our time to explain the demos and gave the students more time to create their own programs. Some students got to the Mickey Mouse project and enjoyed creating their own variations within the projects.


Teaching requires flexibility, and from the wise words of my co-teacher, we over-prepare lesson plans to anticipate the best case scenarios for each individual session. Since we had more planned than what we could accomplish in Session 1, we slowed down the lesson for Session 2 so they could be on the same level. The result was that Session 2 ended up going more in-depth into the programs and were able to spend more time practicing the concepts. This was an important lesson for me as a new programming teacher, and I’m continuing to learn.

Based on how much the students retain from the previous day, I think that the teaching pace we’re going at is good; we covered almost all of Chapter 3 tomorrow, and the students have enough experience and background with the already-taught concepts that it’s safe to say that we can continue to expand their knowledge. At this point, I can grasp the learning speed of the students in each Session, and based on that, we can assess how fast we’re going as teachers and if we need to speed up or slow down.

There’s never a dull moment in this class, and frankly, I enjoy teaching middle-schoolers. They are joyous at the fact of being able to program, and I love hearing the disappointment when the students hear that class is ending. I plan to make every day as enjoyable and educational as possible, and we have more in store than just Mickey Mouse for tomorrow!

Creative Computer Coding is an introductory visual programming course in Processing aimed for middle school students. This blog series is a daily reflection and review of each day of the course, and aims to be a resource for programming courses.


What will you say?

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at

Up ↑

%d bloggers like this: