Processing 101 for Kids – Creative Computer Coding Day 0

Creative Computer Coding: Day 0

Image result for processing logo

My first day of teaching a programming course has finally arrived. Myself, along with another teacher, will work with two sessions of a total 23 girls — all middle school-aged girls. Creative Computer Coding is a 4-week course designed for students with no background in programming and uses the Processing language, rooted in JavaScript. We chose the Processing language and the Processing 3 IDE as it was the best way to introduce basic programming concepts at a sufficient abstraction level that would make it simple to introduce to middle-schoolers. The marvel of Processing is how simple its applications can be, yet the possibilities are endless — Processing can be applied in complex programs used for visual graphics and prototypes.

Without prior teaching experience in programming, I wasn’t sure what to expect; Creative Computer Coding was a new course offered during the summer within a greater camp program for middle-schoolers. I didn’t know whether the students would instantly understand the concepts, nor how fast they would pick up new concepts. After all, these students were taking Pre-Algebra or Algebra, and programming would inherently involve arithmetic logic.


As a teacher assistant and teacher-in-training, I assisted with the general teaching and management of the class.

Our general class structure was designed to be the first 45 minutes for instruction and demos, and the last 45 minutes for hands-on experimentation and programming. This way, the students wouldn’t feel overwhelmed or dulled.

First, we introduced the class to the notion of “counting from zero”, and that today was referred to Day 0 rather than your typical Day 1. We had all the students introduce themselves briefly, fill out quick personal informational surveys, and situate themselves with the desks and computers. In the classroom, each table fits two students, and the tables are whiteboard tops — convenient for students to doodle and sketch out any thoughts for clarity.

To introduce the concept of a computer, we conducted our first demo; we had a volunteer project instructions based off a drawing of several objects. The student who volunteered as tribute attempted to describe how to draw three shapes — first, without using the names, and second, with the names. The objective was to get the students to understand how specific instructions have to be to achieve the most accurate results, and the important concept that computers are not smart.

Image result for circle, triangle, square
A triangle, square, and circle. Seems simple to draw, but not to explain.

Then, each student was located at a desktop computer with Processing. At this point, each student received their very own copy of the textbook, Make: Getting Started with Processing. They started off with writing a single line of code:

Example 2-1: Draw an Ellipse

The concept was to understand how a single line of code can be formatted, and create personal work that they can write by themselves. We explained that the ellipse function, ellipse(), included circles and ovals, and needed four parameters in order to create an object properly.

ellipse(x, y, width, height);

We then moved to the next exercise and instructed students to copy the code, which we later explained line-by-line:

Example 2-2: Make Circles

We went over important concepts within the code, starting with the purpose of the void setup() and void draw() functions. We educated students that void setup() was used for formatting the output sketch window, and that void draw() was for any objects that would show up on the output sketch window. With Example 2-2, students learned that draw() function runs continuously as long as the sketch window was open, with the usage of the if-statement with (mousePressed).

With that, for the remaining time of class, students ran the code successfully, and we solved and troubleshooted any issues with the students’ code. Students experimented with the two programs and also made changes to the natures of the programs.

Session 1: (8:45-10:15am)

CCC started 15 minutes late (9 am) after a brief tour of the campus for the students. Our first session had 10 students and was generally quiet from unfamiliarity, as it was the first day of the camp. We went through the content successfully, and students had fun with experimenting with the programs. Seeing the students light up when playing with the programs made me just as excited about teaching the content. Students experimented with different shapes.

Session 2: (10:30am-12pm)

We had 13 students in this class and they were more outgoing than the first group. Session 2 students were also eager with the demonstrations, and we progressed faster with the extra 15 minutes. With experimentation, a student discovered that by changing the numbers in the fill() function, they could create different colors for the objects — going from green, to pink, to purple, to arbitrary colors from random numbers. Then, students inputted larger, randomized numbers, and discovered transparency between two colors. Session 2 discovered colors a couple days early from the lesson plan, which motivated us to expedite the lesson plan to cover colors.


First day of CCC was immensely exciting; there wasn’t a moment where I wasn’t entertained by the enthusiastic, motivated students. I learned something new and we as teachers experienced first-hand that you can never predict what can happen when students experiment for themselves. In addition, each session was unique, and with different personalities, I am able to teach two different flavors of CCC. I’m excited to see where this class will take us from Day 0 and onward, and I can already anticipate the excitement students will have in the future.

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 experiences.


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: