Coding as Enrichment: Tools of the Trade

In this Part II of our series on Coding as Enrichment, we lay out the tools chosen for the class and delve into the why, how, and experiences with each. Our clear goals for the class informed our tool choices.

We chose:

  • the MakeyMakey circuit board, to captivate and charm students
  • the Scratch coding language, to reach a quick win in digital creation
  • the p5.js drawing library, to empower visual expression
  • a simple webpage, to share class resources
  • JSBin and openprocessing.org editors, to save and share our creations

Clearly defining our goals enabled us to re-evaluate them during the course of the class. At the end of our 6 week series, we reflected on each tool and their effectiveness at helping us captivate students, encourage and activate their creativity, and spark exploration beyond our classroom.

Captivating and charming students with the MakeyMakey

We wanted our first class to intrigue our students while establishing a fun environment where they could relax, collaborate, and express themselves creatively.  The MakeyMakey is a circuit board that enables you to use any conductive thing as a touch button for your computer, such as flowers as buttons to play different sounds. We planned for students to conduct electronic experiments and make an interactive program with the MakeyMakey.

To start things off, students joined hands with us and we high-fived to play drum sounds. They soon started bubbling with questions: could we still play the drums if we joined hands as a whole class? Would it work if we held hands with some cloth in between? How does it work? Could it work with slime?

Using the MakeyMakey helped us engage the students beyond the screen. Student’s ideas for how to use the MakeyMakey carried a wow-factor that motivated them to persist and collaborate when their circuits needed debugging. Curious onlookers were drawn in by all the fun we were having, extending the activity’s impact beyond the classroom.

makeymakey.jpg

Reaching quick wins with Scratch

Another aim of our first lesson was to get students creating with code right away. For their first creative programming experience, we chose Scratch — a way to code without syntax headaches or extensive typing. Scratch's drag-and-drop interface, block-building metaphor, and rich library of sound effects empowered students to build their own versions of the MakeyMakey drum experience.

sounds-in-scratch.png

Students even collaborated to program different sounds for different circuits. Cat meows, dog barks, and song snippets filled the classroom with joy.

Empowering expression with a digital canvas

Through previous workshops like Drawing with JavaScript and ASCII Art with Python, we met many students with a passion for art and sketching. The ingenious, boundless things past students made inspire us to engage new students’ natural interest and talent in art. To build upon their coding experience in Scratch, we chose p5.js, a library that transforms a webpage into a dynamic canvas where our students draw, animate, and build interactive programs with code.

Resources like Getting Started with p5.js, Khan Academy's Drawing & Animation, Kano's Make Art, and Pencil Code were all sources of inspiration for our guided class projects. Goals for these projects focused on jumpstarting each student's grasp of the coordinate system, variables, loops, functions, and if-else statements. Friendly snowmen, rollings cars, and exploding emojis paved the way for students to confidently code their own inventive creations. Once students outgrew these guided projects, they moved far beyond following along. They inspired each other and some students looked to the documentation to learn how to rotate the arms on cartoon characters they were bringing to life on the screen from sketches on paper!

coding-with-p5js-and-makey-makey.jpg

Using p5.js greatly expanded what students could make, from  color-changing triangles to penguins and bouncy balls. It also came with some challenges. While JavaScript syntax and confusing error messages provided teaching opportunities for how to read code and how to debug, respectively, students who were still learning how to type were limited when practicing their coding. Even worse, some errors did not cause error messages, preventing students from practicing debugging on their own.

Making examples, templates, and student work accessible and sharable

In the past classes, we shared links by displaying the links on a whiteboard or the projector. Students would cautiously type each link into their browsers. With this class, we said no more! We wanted students to be able to see examples and code templates with the click of a button. We built a simple webpage with a memorable URL at bit.ly/creative-code-today; in it we kept all the links for in-class use and updated it before each class with only the links needed for each day.

Sharing a community of learning and collaboration

To avoid installing software on the laptops being provided to us, we turned to online editors. Using online editors lets us lower hardware requirements and makes student-work more accessible. The accessibility in turn allows for coding outside of classroom and sharing interactive programs.

We started the class using JSBin, a code editor that does not require students to sign up before coding and shows their creation alongside their code. While no sign up was a plus, students could see neither their own nor each other's projects since JSBin saves code at random URLs. We adjusted for this with a form for students to submit their project links at bit.ly/creative-code-share.

Another goal is to connect students to a larger community of creative people.  p5.js's compatibility with Processing, a platform popular amongst computer artists for the past 17 years, means our students are not only members of the community of p5.js users; they are also members of the community of Processing users! We wanted students to explore and be inspired by each other's and other Processing users’ work. JSBin and the form was not helping us reach this goal, so we moved to openprocessing.org — a website that hosts thousands of Processing “sketches” or creations. The students' faces lit up when they began to register this whole world of learning, creativity, and collaboration. They were browsing project after project, exclaiming excitedly about remixing ideas, and "forking" code within minutes of being on openprocessing.org!

happy-on-openprocessing.jpg

Each student created a portfolio with snapshot previews of their creations by moving their projects to openprocessing.org. They could now quickly look up techniques and code they’d used in previous projects. This was a crucial piece that was missing in the JSBin to form submission workflow.  While we had the links to their work, they could not see their own progress easily.  The openprocessing.org portfolio view gave students immediate ownership of their p5.js sketches.

Missing from the openprocessing.org editor, however, was the ability for students to see their code and the output side-by-side.  Before, they could simply change some code on the left half of the screen, and watch their “sketch” update immediately on the right half; they could see the relationship between their code and their creation. Flipping from the editor view to the result view on openprocessing.org muddled that connection. Imagine leveraging the inspirational and collaborative power of a vibrant community along with immediate coding feedback for students! An interface where students can code in the p5.js web editor, share and play in the openprocessing.org community gallery, and see their classmates’ work in an openprocessing.org class page would be amazing for student learning and collaboration.

Tools are only part of the equation

Resources like the MakeyMakey, Scratch, p5.js, and openprocessing.org helped us provide a positive and collaborative learning environment, build engaging projects, and foster creativity with art. These tools were only part of the equation for our Coding as Enrichment experience. Learn more about how classroom set-up nurtured our students’ learning in Part III of this series!

Have you used any of these resources?  Did you encounter different challenges or solve problems differently?  Please share with us!  We'd love to hear from you.

Amanda ShihComment