Week 7

Project file 1
Project file 2

> N/A

This week, I began sketching/ideating early versions of what my public installation would look like, and considering the different ways this system can engage with the community when being placed directly in the surroundings that it impacts. Most of my work for this week is written, and I think my sculpture will end up being hand constructed. (Rendering attached below)

Credits & References

I used Chat to help me render a visualization that I described to it, which is a series of cylindrical tubes that are filled with different color balls which represent the volume of complaints within a neighborhood for each key category.

Week 4

Project file 1
Live Demo

Last week, I had a series of diagrams each served as a record of a social interaction. Rather than trying to objectively measure human communication, the system uses code to visually communicate something highly subjective. As the project developed, I became more interested in what happened when these exchanges accumulated, largely because I wanted to add complexity to the visual appearance of the system. This final iteration records multiple interactions occurring within the same space and period of time. Each colored circle represents an individual, with the number of lines emerging from it determined by how many interactions that person had. Some become highly connected, while others remain more isolated. Each trajectory retains the variables of the original system, while dotted lines become a physical manifestation of the "missed opportunity" of the interaction -- all of which was impacted by factors of avoidance, understanding, and engagement of the two people participating.

Credits & References

I used Claude to help organize code and introduce me to new functions like lerp() and constrain() to give me more control over how the lines moved in an environment that became increasingly more complex.

Week 2

Project file 1
Live Demo

For this project, I wanted to explore social interaction as a coding system, which built from last week's assignment of identifying chat messages/reactions as a form of social code. By documenting a two way communication system, it allowed me to make the variables more complex. I was interested in the idea that an interaction between two people can have a number of different outcomes: contact can be intentional or accidental, a message can be received or missed, understood or misunderstood, reciprocated or left without a response. This idea was partially inspired by a communication theory reading that we read in Seminar during Week 1, which breaks down communication into a sequence of events, beginning with the consideration of a message and progressing through sending, receiving, processing, understanding, responding, and potentially replying. Before assignment visual code to all of these potential steps, I wanted to simplify it into a smaller set of variables. The six variables I used in my sketch are initiation, medium, reception, understanding, reciprocity, and duration. I then began developing a simple visual system using two ellipses to represent two people and lines to represent the interaction between them. The behavior of the line can change depending on the conditions of the interaction – it might reach the second person, stop before reaching them, be returned, or move at a different speed. Using ‘let’ allows these properties to exist as variables within the system, while ‘random’ introduces unpredictability into how an interaction unfolds. I’m interested in continuing to explore how the same basic visual language can generate different outcomes and also create more engaging, visually engaging visuals.

Credits & References

I used Claude to help me create the moving lines between the shapes rather than static ones to communicate an exchange visually, when the lines were static it was less interesting, but I have the draft here: https://editor.p5js.org/patzzb/sketches/zjBz8yu6I

Week 6

Project file 1
Live Demo

For this project, I wanted to explore a dataset that could reveal something about the larger environment I live in. I started by looking what publicly available data existed in NYC and it turns out that every important city department publishes 311 complaints daily, and they're easily exportable. This felt like a perfectly expansive data set that I can filter down to be highly specific + localized, but also can expand on a variety of factors like zip code, departments, complaint types, etc. I narrowed the dataset to complaints submitted in my neighborhood over the past week. There were 38 complaints across six categories -- noise, water maintenance, sewer maintenance, lead, air quality, and water quality. I started thinking about how I could translate the data into something more abstract than a traditional chart. I wanted each complaint category to have its own symbol, with the shapes loosely relating to what they represent. Overall, what I want to produce visually is something that feels like a lighthearted design, in a way that specifically feels visually incongruent and happier than the subject matter itself. This turns a city of complaints into visual art for enjoyment. I'm interested in using size and opacity as the two main variables for now. The number of complaints would determine both, so more frequently reported issues would appear larger and more opaque. I'm using the map() function in p5.js to translate the complaint counts into visual properties, while random() determines where the shapes appear. I'm still experimenting with how much randomness to introduce. I like the idea of the shapes overlapping and creating unexpected relationships, which is what would allow this to be a design object (either 2D or 3D down the road). I think there is an interesting balance between having a system that follows a strict set of rules and allowing the final composition to develop more organically, and when looking at visual examples of different data sets, I'm drawn to the ones that are hand-developed rather than digital.

Credits & References

I used Chat to help me understand what publicly available data sets I can use in NYC that are regularly + consistently documented. Once I defined my code structure and the variables I wanted to use the map function for, I used Chat to help me organize my code and repeat it across different complaint types.

Week 3

Project file 1
Project file 2
Project file 3
Project file 4
Project file 5

This project started with the idea of translating social interactions into a visual system. I was interested in how an interaction could be reduced to a few basic elements, while still communicating some of the less tangible things that happen between two people: whether they understood each other, how open or avoidant to the interaction they were, and whether the interaction ultimately felt successful. I created a set of rules using circles to represent individuals and lines to represent the interaction occurring between them. From there, I identified a few variables that could change the behavior of the lines: understanding, engagement, avoidance, and success. The distance, direction, length, and movement of the lines shift depending on those conditions. I used p5.js to create five different sketches testing how the system could behave. In each, two lines travel toward one another, but their paths and outcomes change.The circles and lines remain consistent while randomness allows each interaction to behave differently within the rules I established. I was especially interested in the tension between a structured system and something as subjective as human communication. Even when two interactions have similar conditions, they do not necessarily produce identical results. At this stage, the project is less about creating an exact measurement of communication and more about exploring how code can translate the uncertainty, movement, and variability into a fixed visual representation.

Credits & References

I used Claude to help me make the lines "travel" toward one another. I learned that this can be influenced by affecting line length from points on the x-axis (dividing them and subtracting pixels), through the left/right Reach functions.

Week 1

Project file 1
Live Demo

For this project, I focused on establishing the shapes in relation to one another, getting more comfortable with manipulating the x and y coordinates to create even and uneven intervals of overlap between each shape. After placing a few ellipses on the canvas, the idea of building a caterpillar naturally came up, so I ran with it. Rather than using the (loop) command to determine how color was distributed, I wanted each shape to be a different color, so I opted to use the (fill) command in front of each (ellipse) command, which made the code easier to interpret if I wanted to make changes within a specific ellipse later on. I further explored the reference library to create other effects, adding standard text and finding a resource for creating repeating rainbow text, which followed the color system of the caterpillar. I wanted to make a foundational structure that could lend itself to adding motion later on, which is a feature I’d like to build on for this specific sketch.

Credits & References

p5 reference library