Critical-Making-Syllabus

Spring 2024 Edition @ UCF

This project is maintained by AMSUCF

Making Exercise Ten: Visualization

This week, we’ll be taking our first steps with P5.js, a library that allows for visualization, animation, and interaction on the web. (Note the change from the original listing: to reduce some of the procedural complexity and syntax challenges, we’ll be using this library twice and iterating on our work - so don’t worry if you are doing very, very basic things this week, you’ll get to go a bit further later!) The goal is to understand the act of data visualization through playing with how we visualize data - first with P5, and then with any materiality of your choice.

The Visualization Prompt

This week’s exercise serves two goals: we’ll begin exploring the act of visualization, and expanding your procedural vocabulary and comfort with creative coding. This can be a slower process than some of our other types of making, but the tools you gain can be incorporated into our other platforms for multimodal work and experimentation. To allow for both this procedural growth and a meaningful reflection on visualization, you will be creating two ways: first with P5.js, and then in any visualization modality you would like to try aided by generative AI (inspired by the work in Kairos, but not limited to it!)

As with our other exercises, make sure to include both a link to any digital elements as well as documentation of the process, including the conversation with generative AI.

Walkthrough and Resources

Pie chart

The three samples are shared using Open Processing. This platform is free and lets us eliminate certain steps (like uploading to a web server or configuring the file system) so we can focus on playing with the library itself. Start by creating a free account, then navigate to the samples covered in the video and fork each in turn to make your own iterations:

In addition to the provided P5 materials, you might find it helpful to explore examples of data visualization broadly. Here are a few sources to start with:

Remember that each stage of this exercise serves a different purpose: if you’ve never worked with a library like P5.js before, don’t expect to realize the type of concept that you might be able to explore in another materiality. Focus on getting comfortable with the basic tools (forking and editing the code’s data, color, and string inputs), then use your design exercises to conceptualize where you would like to take visualization as a form of making in the future.