Teaching Coding with OpenProcessing
A quick walkthrough of the exciting world of code, creativity, education, bugs, and Kandinsky.
Today, creative coding is an exciting medium to explore, teach, and create interactive visual works. But exposing new students to computational thinking, algorithms, coding’s limitless possibilities comes with its challenges: localhost setups, bugs, syntax errors, and infinite loops, for starters. And navigating through libraries, documentations, and code repositories online, just to experiment with an idea, brings another layer of barriers that add to coding’s infamous learning curve.
With OpenProcessing, we’re aiming to eliminate those hurdles by providing a platform that enables teachers and students to code ideas in seconds, share with ease, initiate conversations over algorithms, variables, structure, and loops — all the things that matter as you learn.
A Simpler Code Editor
Today’s code editors, like Brackets, Atom, and VSCode are great for building professional, scalable apps and websites. That is, of course, if you can navigate sophisticated interfaces, extensions, and hundreds of keyboard shortcuts. Mastering a code editor can be as hard as learning a programming language itself.
In contrast, OpenProcessing puts the focus on learning and creativity.
With its minimalist design, it takes all the pro-features away from the eyes to let students focus on the code and see their results with a single click. The big inspirations for this project, DBN and Processing, have proven how simplified code editors can lead to great projects by beginners and professionals, alike. OpenProcessing is now taking those ideas online to make coding easier and more social.
Instead of supporting all the programming languages, OpenProcessing focuses on javascript and p5js. This allows students to access the most important features without leaving their code.
- Students can enable common libraries with a single click to extend their projects with sound, physical interaction, gaming elements, and even machine learning.
- They can access all the p5js functions and variables in the reference panel as they code.
- Students can view their history and rollback any changes made. This also allows professors to view students’ progress and catch any quick instances of copy/paste.😈
- They can upload files, videos, and images to work within the sketch.
- They can create a fork of any sketch on the website by simply editing the code.
- They can download or embed their sketch on their website.
Class Platform: A mini-LMS, just for teachers and students to code and collaborate.
Coding together has never been easier or more engaging with OpenProcessing’s Class Platform. It lets students code, share work, and submit assignments in one, collaborative environment, and gives everyone, including teachers, a home to showcase their projects.
Here’s how creating and managing a class looks on OpenProcessing:
- Create your class to kick-off the semester.
- Invite your students by sharing the class URL and access code.
- Create collections to organize your class by topics, weeks, or assignments.
- Add your sketches as examples and templates for your students.
- Your students can add their own sketches/assignments and share their work with the rest of the class.
You can also create a variety of assignments using collections. For example, you can ask students to build on each other’s work to collaborate, or they can hide the source code of their sketches to create challenging exercises. I will talk more on the approaches and types of assignments on a separate article.
At the end of the semester, you can archive your class to freeze it from further submissions. You can also clone your class for a new semester. (This will create a new class with all the same collections and settings, without the submitted sketches.) It’s the easiest way to start a fresh semester.
But what teachers really love the most is…
The Creative Coding Community
Today, with over 300,000 open source sketches on the website, OpenProcessing hosts a welcoming community of everyday coders who use coding as a creative medium.
Students are part of the open source community from day one.
As they use OpenProcessing, students:
- Get exposed to inspiring projects.
- Connect with the community by following other users.
- Learn open source software literacy as they learn to read and understand other people’s code, create forks, and give attribution.
- Showcase and contribute their own work.
Students usually have questions in their mind as they get introduced to coding.
“Why should I learn to code?”
“What is possible with coding?”
“How is this any better than Photoshop or Instagram?”
These questions are best answered by being exposed to the community and a great set of examples.
Teaching coding to non-CS students is a fairly new territory. There aren’t many set syllabus examples, so teachers on OpenProcessing are exploring the best ways to instruct students, together, as they share class work and assignments.
New media artists and teachers, Golan Levin and Tega Brain, recently published a fantastic teacher’s manual (update: it is forthcoming, not published yet), and Kandinsky assignment, given by Casey Reas in 2010, has inspired many other teachers to include it in their curriculums. Assignments like these replicate existing artworks in code and encourage students to explore shapes, colors and coordinate system to see how coding can become a creative medium of its own by adding interactions and animations. Many other artists like Sol LeWitt, Agnes Martin, Vera Molnar have also become common themes in OpenProcessing classes.
But these examples are only possible because of the many dedicated teachers on the platform, and their interest in finding the best ways to teach coding in a social setting.
If you’re a teacher in coding, join us on OpenProcessing to create your own class and explore how other classes are developing. Together, we can introduce students to the world of code and get them excited about creating as a community.
