Figure 1. Screenshot of Dynamic Yellowtail Visual  

Those who work with educational technology seem to be on the constant look-out for tools and new functionalities, partly to broaden their own professional skill sets and outputs, and partly to extend their sense of “hard fun”.  I am no different.  

At a recent regional developer conference, I learned about the free and open-source Processing Programming Language, which may be used to create a range of still and motion images with fairly light programming.  This tool was introduced as a free and open-source technology that may be used for human expression.  

The tool was made by some students at the MIT Media Lab, Casey Reas and Ben Fry (in 2001), who wanted to enable the creation of digital visuals for those in the digital humanities and in other contexts.  They also wanted increased accessibility of coding and so ensured that this tool, based on Java, was no-cost and widely available.  (A sister tool is Processing.js, which extends where these created contents may be deployed.  That tool may be accessed here at http://processingjs.org/.)  

Those who prefer a book to get started would find a very engaging and clear one in Reas and Fry’s “Processing: A Programming Handbook for Visual Designers and Artists” (2014).  This book offers thumbnails of various Processing-based artworks early on and then walk-throughs of how to create various visuals.  It is possible to bring in photos and create effects on them.  JSON Arrays may be brought in and visualized.  Various types of effects may be applied to images.  

Our presenter sent us to some exploratory links to see what may be created.  

The idea of creating digital art is an alluring concept.  

She also sent us to created games that may be played in web browsers.  

The idea of making simple playable games is also attractive.  

In the tool itself, there is a library of pre-coded Examples. This enables users to see some of the cool visuals that are possible.  (My favorite is Yellowtail, in the Demos area in the Graphics folder.)  

This collection enables one to jump-start with some working code already to better understand the system and to see how the code runs on Processing with the dynamic visuals.  (Some screenshots of the still and dynamic visuals may be seen in the sub-pages to this article.)  

 

Figure 2.  Coded Examples Library in Processing

Those who share their programs often include commenting out, so it is clear what their intentions were with the code.  

//commenting out 

With these existing visuals, one can change up the frame rates, change the sizes of the frames, change the sizes of the shapes, change the colors, and actually introduce other shapes and behaviors.  One can introduce mouse events or edit those events.  

Initially, the learning curve does not seem high.  It is easy enough to start one’s own Sketchbook based on simple directions.  One sets the screen size, the background, declares variables, and places objects based on x- and y axes.  So much is built into the tool already.  

However, one gets tired of drawing a circle or a face very quickly (especially if one is used to drawing tools that are more user-friendly.)  The hard part is learning the various capabilities of the tool in combination…and in complexity…and then thinking visually and expressing that.  

When I think of use cases, I think of dynamic interactive visuals to bring learners into a learning sequence.  I think about simple games.  I think about engaging still visuals.  

I also think about the use of this tool (the Processing IDE or “integrated development environment”) as a bridge to coding.  There is something about rules, order of operations, hyper-precision, and other aspects, that may be introduced here.  (I do wish the IDE had automatic closing brackets.)  

This might be a fun tool for those who want to explore it for visuals, for games, for coding, or something else altogether.  

This presenter introduces various coding challenges with Processing.  

Our presenter’s GitHub site for “Creative Coding: An Introduction to Processing” is available.  

Processing (programming language).  (2019, Nov. 6).  Wikipedia. Retrieved Nov. 18, 2019, from 

https://en.wikipedia.org/wiki/Processing_(programming_language).  

Reas, C., & Fry, B. (2014).  Processing:  A programming handbook for visual designers and artists.  2nd Ed.  Cambridge, Massachusetts: The MIT Press.  

Shalin Hai-Jew works as an instructional designer at Kansas State University.  Her email is shalin@ksu.edu.