This case study compares the use of p5.js in two different undergraduate courses and a Digital Humanities workshop open the general public. Each of these offers a different take on how to implement p5.js.

Course A

Course A was an upper-level elective topics course at a large research-intensive public university and was cross-listed between the English and Communication departments. The course description is: “Study of the influence of emerging technologies on rhetorical theory and practice. Rhetorical analysis of texts, including visual and audio texts. Invention and construction of digital media texts as a means of engaging rhetorical theory and analysis. Topics vary to adapt to emerging technologies and changing vernacular practices.” The version of this course that featured the p5.js assignment was titled “Big Data and the Rhetoric of Information.”

Course B

Course B was an introductory level course at a small regional public university in a Communications Media department. The course description is: “The course surveys the communication field its major theories and history as well as examines, professionally and critically, the current structure of the media industries and their cultural, economic, regulatory, social and technological systems.”

Course C

Course C was a Digital Humanities workshop offered at a public research university and open to registration by members of the public. This workshop was unique from the others courses in that it solely focused on creative coding and lasted only one week. A syllabus of the workshop is available to view. The objectives for the course included developing an understanding of the unique elements of generative design, learning the basics of p5.js, and developing a personal project.

When I began using p5.js, it required a downloadable editor that needed to be installed on students’ computers. Part of the first day of instruction was usually related to walking through these steps to make sure students had a usable editor installed and ready to use. However, there is now an easy-to-use web editor available that allows students to immediately leap into creating sketches. If they want to save their work they can create an account with the editor and access their code from anywhere.

For each course, I began by showing the Hello p5.js video, as it quickly and visually demonstrated the power of the coding language and gave a preview of the code that was being used to make various interactive elements appear on the screen. This video immediately made apparent the results that were available through p5.js, as seen in Figure 4 below.

In courses A and B, I introduced the programming language through guided practice in the classroom. I devoted one class period to setting up p5.js so it was ready to use, trying a few beginning programs to make sure students knew how it works, and finally pointed to resources for further independent learning. This instruction was fairly minimal and assumed that students would be working outside of the classroom to continue learning the language. Students were invited to attend office hours for further help and/or instruction related to p5.js.

Course C was unique in that we spent four full days working together. After the first day of instruction, I quickly realized that workshop participants would need more hands-on time to complete their projects. Because students were working on such different projects, they each needed very different programming resources. Although there were some common coding practices that helped everyone, each participant really needed individual help applying coding practices to their particular project. For this reason, I shifted to a shortened morning lesson on a new programming skill and then spent the rest of the morning and afternoon working individually with students to develop their code. This approach worked well in that it helped students advance their projects more quickly overall. However, when students got stuck and weren't sure what step to take next, there was down time incurred while they waited for me to be able to assist with their code. One other major difference in my approach to teaching this course was that we spent time in class specifically covering and practicing the iterative and generative nature of programming and how that applied to computer-based art.

Course A

Assignment A was designed primarily as a data visualization project that was worth 20% of the total course grade. It was designed to align with a Code+Art competition that the university library launched during the semester the class occurred. The syllabus description read:

In addition to the requirements of the competition, the project assessment used the same criteria used to judge the entries in the competition. The type of submissions allowed included:

The library provided both resources for learning how to code and the set of criteria for judging the submissions:

Course B

Assignment B was significantly different from the original in that it occurred in an introductory level course and required the use of p5.js rather than giving an option. Additionally, rather than creating a more straightforward data visualization, I challenged the students to take a Digital Humanities approach to a topic in media studies. Such an approach uses the iterative nature of coding to facilitate a generative artistic design as part of a visualization that can raise different questions than more traditional data visualizations such as charts or graphs. The assignment was worth 25% of the overall grade and was framed in the syllabus in the following way:

The rubric for this assignment was adapted from one used by my colleague and HASTAC (Humanities, Arts, Science, and Technology Alliance and Collaboratory) mentor, Paul Fyfe, developed for critical making projects. It assessed the following criteria:

Course C

This course did not feature any formal assessment. Instead, students were asked to develop a personal project related to current interests or research on which they were already working. This provided the most open format of all the courses.

Course A

Most of the students in this course submitted their work to both the library's Code+Art competition and as interactive exhibition titled "Big Data Visualizations and the Rhetorical Act" at the Carolina Rhetoric Conference. The exhibit was hosted in a 360-degree visualization room (Figure 6), allowing all of the data visualizations to be displayed simultaneously. This provided students with two opportunities have their work displayed publicly and the chance to discuss their projects with other scholars (Figure 7).

Two of the groups in the class chose to use p5.js as opposed to Tableau. Of note, although the theory portion of the course related to big data, student visualization projects featured comparatively small data sets, due most importantly to lack of access to the computing power needed to visualize true big data.

The first project visualized the Google search frequency for the term "selfie" between 2004 and 2016, representing it by the size of a circle (See Fig. 8). Users could interact with the visualization by dragging a slider that allowed them to select individual months in this date range. The code for this project is provided in Figure 9. The second project used data collected by the university about how often students participated in both study abroad and exchange programs. The p5.js portion of the project created an animation that slowly tallied how many students participated in each type of activity by representing each with a plane. A red plane represented programs with the students' own university, while white planes represented exchange programs with other universities. However, the group also decided to include several Tableau visualizations, showing for example, the most popular locations for study abroad and exchange programs (See Fig. 10).

Overall, student work for this assignment was successful, and students had several voluntary opportunities to display their work. They took advantage of these opportunities and gained new experience with creative coding and data visualization.

Course B

This course featured the most challenging version of the assignment, as it asked students to use p5.js the most creatively. Additionally, the task consisted of students who were majoring in areas such as game design and film/video. Perhaps because of this, I found that students gravitated toward a narrated animation approach with p5.js. This provided interesting results.

The first example is a sketch that offered commentary on YouTube's evolving demonetization process. It anthropomorphized the YouTube monetization algorithm and explored several problematic examples (See Fig. 11). The creation of this sketch included 2,590 lines of code (See Fig. 12).

A second project from this course offers a commentary on violence in video games, making the implicit argument that the more violence you participate in through video games, the more desensitized one becomes to both the violence and everything else around them. In the interactive sketch they created, a user can press buttons on the keyboard to change colors on the laptop screen. Alternatively, clicking the mouse button is meant to represent participating in a violent video game action. Notably, only the violent actions increase your score. However, the more you click to participate in the violence, the darker all of the colors become, even those unrelated to violence. Figures 13 and 14 feature a video of the sketch and its related code.

Course C

Course C featured students creating coding projects related to work they might already be doing either professionally or as a student. However, as noted above, students began by developing their coding skills creating straightforward iterative-based art work. Examples of this work are included in Figure 15.

Overall, students were happy with the workshop, and many expressed an interest in continuing their work.

By teaching this content in three different ways across three different courses, I have developed some practical suggestions that should be helpful in adopting a similar assignment in other classrooms.

First, there were pros and cons for each format. While the workshop allowed for more immersive study, the short time period didn't allow participants enough time to develop advanced projects within the workshop itself. One major con related to including a coding assignment in the traditional classroom is that it requires much more effort to "sell" the activity to students. Specifically, care needs to be taken to explain why we're spending time on a coding project in a non-coding class instead of covering additional material that might seem more relevant to students. The framing of the assignment is extremely important for student buy-in and engagement of the coding work. In some ways, this has been the most difficult challenge for me. Many communication students, especially those in media production concentrations, find it hard to imagine when they might use coding skills in their professional careers. A significantly stronger explanation about the reason for and benefits of such a coding project would help prevent at least some of this initial resistance.

I highly recommend that one creates space for teaching one-on-one, because students will get stuck and not be sure how to proceed. This could be achieved either through taking turns working with students in the classroom or by having students visit during office hours for help. In the classes where we did not have as much time to work in class, students who visited during office hours typically produced stronger final products.

Additionally, it's important to consider whether or not to assign this as a group project. While this does tend to lighten the workload and give students the opportunity to divide tasks between them, it is possible that without instructor intervention, the person who is most comfortable with coding will get stuck doing all of the work. While this is a possibility inherent in any group work, I've found that even normally highly motivated students can recede into the background if there are others in the group who are more comfortable with the coding process.

Next, I recommend that there be a concrete goal in mind for the visualization. Although a major benefit of a language such as p5.js is that it allows so much creativity, this can be problematic in terms of a course, as students can be overwhelmed, especially if it is their first time coding. One strategy that worked well in Course A was providing a particular set of data and asking students to create a visualization based on that information. Although I allowed groups to use data beyond the set I provided, having a recommended data set was particularly helpful for many groups who were not quite sure what they wanted to do.

Finally, students who have not coded before can be overly optimistic about what will be possible to achieve within the scope of a semester. This stems from not understanding the amount of coding it might take to achieve a particular outcome. Giving feedback on project ideas early in the process, ideally before the coding has even begun, can help to set and maintain expectations, preventing students from taking on too little or too much in terms of their project. With properly managed expectations, students with no prior experience can create strong projects.