I’ve been teaching an Introductory Programming class to 6th grade students for the last several years. My former boss who developed the programming curriculum at my school was both a technical guru and highly creative. The curriculum strives to introduce basic programming concepts through the lens of creative coding. We begin the year using a block-based tool called Scratch in order to illustrate beginner concepts. A few months later we make the switch to text-based coding using the P5 JavaScript library. Students are taught how to navigate the grid system which is similar to a Cartesian Coordinate system. Next, they apply their understanding of the grid to draw basic 2D shapes on the canvas. One can create exemplary designs by combining shapes and colors together in interesting and creative ways. From here the possibilities are endless. Basic movement can be achieved by converting x and y values into variables. Simple conditional statements can control any number of elements on the canvas. After that it's on to Functions, Loops, and Booleans. Oh my!
The projects on the left represent student work from the Spring of 2019. Every one of them allows for user interaction. For example, if you want to launch the minion in the third sketch down on the left then you simply need to press the ‘l’ key. It is necessary to click on the sketch before you can activate the user input. This assignment requires students to convert their objects into functions, make those objects move, use conditional statements and millis() to control the timing and to make sure that when the object exits one side of the canvas that it reenters on the opposite side.
There are some interesting tricks which make doing this much easier. For example, it is possible to trace an image of something that you might like to include in your sketch. Once you have uploaded and resized the image then you can utilize the code below to trace the path of the object. Every time you click on the path of that object a vertex will be output to your console. Using the beginShape() function will allow you to string multiple vertices together into a meaningful object. The automobile in the bottom sketch was created using this method.
function mousePressed() {
print("vertex(" + mouseX + "," + mouseY + ");");}
All sketches on the left cycle the background color value in order to simulate night and day. In two of these sketches the vehicles will turn the headlights on when the color hue drops below a certain value and turn them off again when the reverse occurs. This can be accomplished using a variable for the Blue color value in a typical RGB color scheme. Multiplying the value of incremenation by -1 will reverse the direction of incrementaion when the value = 0 or 255.
if (c < 0 || c > 255) {
cdir *= -1;}
The sketch on the bottom left uses keyboard input to set certain speed conditions for mutiple objects in the sketch. When the 'r' key is pressed it sets the speed condition to 0 which stops the car and sets the stoplight to red. When the 'y' key is pressed the speed condition is set to 1 which causes the car to move slowly and sets the stoplight to yellow. And finally, when the 'g' key is pressed it sets the speed condition to 2 which changes the stoplight to green and moves the car at a quicker pace.
It's been a joy to teach this class. My students work is displayed at our school's Art Festival every May. I am constantly reevaluating how I teach every aspect of the class. I look at everything that worked well and tweak those things that did not work so well. And finally, it has been a source of pride to be part of http://ccfest.rocks/ in San Francisco this year. I look forward to doing more work for the organization in the near future.
Below is the source code for the four student projects featured on this page.