Week 4 – Generative Artwork

Concept

For this assignment, I created an interactive artwork called Don’t Notify Me. It shows a self-portrait of me trying to work on my laptop while a stream of notifications keeps breaking my concentration. Participants can write their own notification, send a blank one, reset the scene, or tap the lamp to switch on focus mode.

A normal notification takes about two seconds to pull my attention away from the laptop. Strangely, a blank notification gets an even faster reaction. Since it gives me no information, I immediately want to know what it means. One or two notifications do not bother me much, but my mood changes as they pile up. After three pings in a row, I start to look annoyed. At five, I lose my patience completely. My expression changes, the scene turns red, my replies become more direct, and the sounds get harsher.

I wanted the experience to be playful, but also familiar to anyone who has struggled to focus while notifications keep appearing. The participant is not just watching me become frustrated. They are the one causing it. Their timing and messages affect my expressions, responses, and surroundings, creating a small back-and-forth between the participant and the artwork.

Code highlight

One part I am especially proud of is the way the artwork uses CSV files to manage its timing and dialogue:

settingsTable = await loadTable("settings.csv", ",", "header");
responsesTable = await loadTable("responses.csv", ",", "header");

currentPing = {
  message,
  createdAt: now,
  reactionAt: now + (
    message ? config.normal_delay : config.empty_delay
  )
};

settings.csv contains values such as the reaction delays, streak window, and mood thresholds. responses.csv contains the character’s possible replies to calm, annoyed, furious, urgent, and empty notifications. Keeping this information outside the main sketch makes the project much easier to adjust. I can change the timing or rewrite the character’s responses without digging through all the drawing code.

The character’s mood depends on the current notification streak:

const score = Math.max(
  0,
  streak - (theme === "dark" ? config.focus_relief : 0)
);

if (score >= config.furious_at) return "furious";
if (score >= config.annoyed_at) return "annoyed";
return "calm";

Focus mode lowers the effective streak instead of erasing it. Tapping the lamp can help the character calm down, but it does not act as if the earlier interruptions never happened.

How this was made

I adapted an earlier p5.js self-portrait and turned it into a scene of me working at a table. The laptop screen faces the character, so the audience sees the back of it. While I am working, my eyes point down toward the screen. Once the reaction delay ends, my eyes move toward the notification and a speech bubble appears.

The controls beneath the canvas use a real HTML text field and buttons. Participants can type a message and press Enter, click Send Ping, send a deliberately blank notification, or reset the scene. Each notification appears as a card inside the artwork, along with a timer showing how long it is taking to catch my attention.

The program also tracks how quickly the notifications arrive. Pings sent close together build a streak, while leaving me alone for long enough resets it to zero. This makes the interaction feel less like pressing a button and more like testing someone’s patience.