Creative Coding for the Web

When learning how to write code for the first time, it can feel very abstract. Like learning a foreign language, there are new words and symbols that may feel meaningless and unnatural, making it difficult to stay grounded in your learning. To help with this, a good starting point is to think about code as a practice embedded in something we already naturally understand: the physical world and how we move through it. Code exists in an abstract and intangible digital space, but it is often used to represent or simulate some phenomenon in our physical world. To demonstrate this, consider the following exercise.

Examine the room around you; it is filled with various items. Imagine you are writing a screenplay and need to compose a scene that happens in this room. To set the scene, you need to describe what is inside this room before the action unfolds so that the director, actors, and set designers can reconstruct it accurately. How would you do this? Which items would you choose to include in your description? What details about those items would you need or want to include?

As you think about this, you encounter a problem: there are different choices you can make about what counts as an “item,” and there are different levels of details that you can include in your description. You may choose to include some key items but not others based on how they function in the scene; you may choose to describe details about color or size but nothing about the relative position of items in space. Many combinations of descriptions are possible even for these relatively simple settings, but in the end, the description you choose to include will depend on how it will be used in your screenplay. Perhaps a character interacts with one item in particular, and the screenplay needs to include many low-level details about the physical properties of that item in order to make sense of that interaction; conversely, perhaps a couple of characters have a conversation in front of the desk, and the items only serve as a backdrop to the action.

Some of these choices are explicit, but many others are subconscious and incidental, already built into your mental model of the room and its contents. In the end, you will have selectively partitioned the contents of the room based on some sort of implicit paradigm you hold about what should and can be counted as an item. You will have imposed partitions in accordance with assumptions you hold about what is a meaningful item -- in this case, based on the minimum information needed to set the scene in your screenplay -- and these assumptions come from many different kinds of experiences. You already have mental models for different kinds of objects, how they function, what purpose they serve, and how you interact with them, and these mental models are a driving force in how you describe the scene. Somebody else may look at the same photo and come up with a very different description of that same room, partially due to the mental models they have about their interaction with the world.

When writing code, we will need to make these kinds of choices all the time. We will need to actively construct mental models that machines are able to understand, and this process of construction requires making a series of choices. In this sense, code is an expression of design, and thus it is a medium for world-building. Coding is a process of selective partitioning, or taking a space of fluid possibility and deciding how to separate it into different functional units. And just like in design, even small, subtle changes in how we write our code can sometimes yield seismic shifts in the end product.

This notion of code as an expression of design is where we begin our journey into programming for the web.

The following tutorials were created by Steven Braun as teaching materials for courses taught at Northeastern University (College of Arts, Media and Design) in programming for the web and engineering interactive visualizations of data. These materials do not represent a completed product but rather a collection of prototypes that will continue to evolve and be revised over time.

These materials were created by Steven Braun in the Fall 2020 semester at Northeastern University (College of Arts, Media and Design). Steven is a Visiting Assistant Teaching Professor at Northeastern University, teaching courses in data visualization, programming for the web, and statistics. To learn more about Steven, please visit Fluid Encodings.

Creative Coding for the Web

Introduction

Table of Contents

About the Author