Creative Coding for All

with p5.js for students and teachers.

Coding for expression is an important way for students and teachers to engage with computing. p5.js is easy-to-use and web-friendly way for teachers and students to code creatively. We hosted CC Fest at NYU-ITP to build a K-12 community to support creative coding in schools.

Flyer for CC Fest

Creative Coding

The term ‘creative coding’ can be hard to define but it should be exciting to educators in the age of ‘CSforAll’. Creative coding is a field of computing that developed when artists started using code for artistic expression and has lead to innovation and practices that can support CS education in new ways. As the video below explains, creative coding is often open-source, accessible, and encourages diversity in thought and action. In this way, it offers us a way to get students excited about coding for creative expression, which is why Danny Fenjves, Stephen Lewis, and I organized CC Fest.

The Art of Creative Coding (PBS)

p5.js

Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.”

p5.js is made for the web and can interact with “with other HTML5 objects, including text, input, video, webcam, and sound.” And there is helpful community building and sharing in Processing and a similar community is being formed around p5.js. That community can help you learn how to use p5 and create. The best place to start is Dan Shiffman’s video series on Youtube (see below).

NYU-ITP

On a rainy day in NYC, forty students and teachers gathered together at NYU-ITP to spend the day learning how to use p5.js and thinking about how to use it in the classroom. ITP, Interactive Telecommunication Program, at NYU’s Tisch School is the home to a two-year graduate program “to explore the imaginative use of communications technologies — how they might augment, improve, and bring delight and art into people’s lives.” Both the people and the space put out a lot of creativity into the world, digital and otherwise.

Both Lauren MacCarthy, the creator of p5.js, and Dan Shiffman are associated with ITP. So it was the ideal place to host the event. ITP run a couple of great program for outsiders including ITP Camp and ITP Make Education Camp.

Keynote

The day began with a keynote from Dan asking us “As a _____ why should I care about creating software?” From there he went on to talk about the development of Processing, p5.js, and the work of the Processing Foundation. The philosophies behind those projects come from the larger creative community and are worth considering. As Lauren McCarthy states (via Shiffman), “No tool is neutral. Tools are embedded with beliefs, desires, biases of its creators.” As educators, we can be a part of the process of diversifying tools and their application. But first, we must learn how to use the tools.

Sessions

Once the keynote ended we split off into three group based on our experience level and interest for hour-long introductory sessions. I took a small group of beginners and wrote out some simple lines of code in the p5 IDE. We talked about how JavaScript works with HTML and CSS. Then we created simple shapes and moved them around using the mouse, basically the first three videos from Dan’s series on YouTube.

Danny took a group of intermediate users for a session on animation in p5. Students and teachers learned how to use listener functions, conditionals, global variables, and the draw() function to make a shape bounce around the canvas.

Stephen, who is an inventor of some wonderful hardware that works with code, did a session on creating things with the FunKey FunKey board and its sensors in “keystroke” mode with P5, and also some people used the Make!Things board with p5 coding framework.

We stopped for lunch at noon and started back up with a talk by Sinan Ascioglu on OpenProcessing, a beautiful site to post and share p5.js or Processing sketches. Then we began the second round of sessions at 1 pm.

Marius Watz led a session on how to create “create basic geometric shapes with an eye towards aesthetics”. Katy Garnier showed how to load an image into a p5 sketch for use as a game sprite, and how to use the arrow keys to move it around. And Stephen did a repeat of his hardware session.

The day ended with a teacher-only session and hang-out. Each teacher shared where they worked, what they taught, and what they want to do with p5.js. With a diversity of institutions, age-groups, skills level, etc. there was a wide-ranging discussion. There was a consensus the importance of in-person meetings for teachers to dig into code, and share lessons.

Next Steps

We hope that this event can help build a K-12 community around creative coding in NYC. Here are some steps that can help with the process here and elsewhere:

  1. Join the Processing Educators Google Group to share and learn about how p5.js and Processing are used in different classrooms.
  2. Come to CC Fest 2 in April 2017 at NYU MAGNET in Brooklyn (details coming soon). Email me at mrkhanatndv@gmail.com if you have questions or want to run a session.
  3. Try out www.p5share.com and feedback comments, suggestions and bugs to steve@architectronics.com.