Author: Kashish Satija

Margaret Hamilton is the kind of legend we don’t talk about enough. She wasn’t just a programmer, she was a problem-solver and a pioneer who helped put men on the moon while juggling motherhood and working in a field dominated by men. In the 1960s, software engineering wasn’t even considered a real thing yet, and yet, there she was, writing the code that saved Apollo 11 from disaster.

One of my favorite parts of her story is how NASA ignored her when she wanted to add safeguards to prevent astronauts from making mistakes. They told her, “That would never happen.” And then of course it did happen, and she had to fix it under pressure to bring Apollo 8’s astronauts home safely. That’s the kind of foresight and brilliance that makes her work so groundbreaking.

What’s even more inspiring is that she did all this while raising a kid. She’d bring her daughter to the lab, let her sleep on the floor while she worked late nights writing code. It’s proof that women have always been capable of incredible things in STEM. Hamilton didn’t just write software; she helped create an industry, proving that software wasn’t an afterthought, but the future.

Reading Donald Norman’s take on affect and design really got me thinking about what we do in physical computing. His idea that attractive things work better made me question the way we usually talk about design. It’s so easy to think that usability is the most important thing, but Norman makes a solid point—aesthetics, usability, and functionality all need to work together, depending on the context. That’s something I really want to keep in mind as we start building our own devices.

With physical computing, we’re not just designing screens or interfaces—we’re making real objects that people will physically interact with. That makes things more complicated because now we have to think about how something looks, how easy it is to use, and what it’s actually meant to do all at the same time. The balance between these depends on what we’re building. If it’s something like a smart home controller, aesthetics matter because it’s going to sit in someone’s house, and they’ll see it every day. But if we’re making a fire escape guidance system, function is everything. No one in an emergency should have to stop and figure out how to use it, it just has to work.

The three teapots analogy really stuck with me too. It’s a great reminder that different users and situations need different design choices. I hadn’t really thought much about how a person’s emotional state affects how they interact with a device, but it makes so much sense. If someone is stressed—like using a medical alert system—they need clear, obvious controls. No distractions, no unnecessary design elements, just pure functionality. But if we’re designing something more creative, like an interactive art installation, we can push the boundaries and make it more about the experience rather than efficiency.

As we start designing our own projects, I don’t want to fall into the trap of just thinking, whether it works or no? Of course, usability matters, but if something feels cold or uninviting, people won’t want to use it.

At the end of the day, physical computing isn’t just about circuits and code but rather about how people feel when they use what we create. A device isn’t just good because it functions. It’s successful when it resonates with people and feels right to use. That’s something I really want to keep in mind moving forward.

For my midterm project, I drew inspiration from the color-by-number games that are so popular on the internet. I used to be obsessed with them, so I decided to create my own pixelated version. In my project, users color cell by cell in a grid, where each cell corresponds to a letter, and each color on the palette is assigned to a letter as well. By following the key and filling in the grid, the design gradually comes to life, revealing the full picture bit by bit. There’s something incredibly relaxing about mindlessly clicking, watching the colors take shape, and seeing the image emerge one step at a time. It’s a simple yet satisfying process, where every small action contributes to a larger, beautiful result.

The game starts with a welcome screen where the user has two options: Start, to begin coloring immediately, or Help, which provides instructions on the various features the game offers. Once they click Start, they are taken to the selection screen, where they can choose a coloring page from the available options. After selecting a page, they arrive at the actual coloring screen, where the process is simple—choose a color from the palette above and start coloring. However, if the user accidentally fills in the wrong square, they can double-tap the cell to remove the color. If they wish to start over or choose another page, a Reset button clears the canvas. Once the user finishes coloring their chosen page, the game is considered complete, and they are prompted to restart if they wish to play/color again.

One aspect of my code that I’m particularly proud of is the implementation of the actual coloring page. The way the cells fill in over the image has a seamless and polished look. I also like how intuitive the overall user interface is—even first-time users can start playing without needing to read the instructions. I chose soothing shades of brown for the interface, paired with lofi background music, to enhance the game’s relaxing atmosphere.

That said, I encountered a few challenges along the way, particularly with the coloring process itself. One major issue was ensuring that the grid, which tracks cell positions, perfectly aligned with the image. Initially, a double grid effect was visible on top of the image, which was distracting. To fix this, I had to experiment with different parameters before finally finding a formula that worked—provided the image was a perfect square with no empty or extra areas. This was implemented in the ColoringPage class. Once the grid was properly aligned, tracking mouse clicks and filling in the correct areas became much smoother.

class ColoringPage {
  constructor(name, imagePath,thumbPath, rows, cols, palette,targetCells) {
    this.name = name;
    this.img = pageImages[name.toLowerCase()];  
    this.thumb = pageThumbnails[name.toLowerCase()];
    this.rows = rows;
    this.cols = cols;
    this.cellSize = 600 / this.cols;
    this.grid = Array.from({ length: this.rows }, () => Array(this.cols).fill(null));
    this.palette = palette;
    this.selectedColor = Object.values(palette)[0].color;
    this.targetCells = targetCells; 
    this.filledCells = 0;
  }

  display() {
    this.drawPalette();
    image(this.img, 100, 90, 600, 600);
    this.drawGrid();
    this.drawColoredGrid();
  }

  drawGrid() {
    stroke(0, 50);
    noFill();
    for (let row = 0; row < this.rows; row++) {
      for (let col = 0; col < this.cols; col++) {
        rect(100 + col * this.cellSize, 90 + row * this.cellSize, this.cellSize, this.cellSize);
      }
    }
  }

  drawColoredGrid() {
    for (let row = 0; row < this.rows; row++) {
      for (let col = 0; col < this.cols; col++) {
        if (this.grid[row][col]) {
          fill(this.grid[row][col]);
          rect(100 + col * this.cellSize, 90 + row * this.cellSize, this.cellSize, this.cellSize);
        }
      }
    }
  }

  drawPalette() {
    let keys = Object.keys(this.palette);
    let x = (width - keys.length * 60) / 2;
    let y = 20;

    noStroke();

    for (let i = 0; i < keys.length; i++) {
        let colorValue = this.palette[keys[i]].color;
        let isSelected = this.selectedColor === colorValue;
        let isHovered = mouseX > x + i * 60 && mouseX < x + i * 60 + 50 &&
                        mouseY > y && mouseY < y + 50;

        let circleSize = 50; 
        if (isHovered) circleSize = 55; 

        let centerX = x + i * 60 + 30;
        let centerY = y + 25;

        if (isSelected) {
            fill(255); 
            ellipse(centerX, centerY, circleSize + 8, circleSize + 8);
        }

        fill(colorValue);
        ellipse(centerX, centerY, circleSize, circleSize); 
      
      let c = color(colorValue);
      let brightnessValue = (red(c) * 0.299 + green(c) * 0.587 + blue(c) * 0.114); 

        fill(brightnessValue < 128 ? 255 : 0);
        textSize(14);
        textAlign(CENTER, CENTER);
        
        let labelChar = this.palette[keys[i]].label;  
        text(labelChar, centerX, centerY);
    }
}


  selectColor() {
    let keys = Object.keys(this.palette);
    let x = (width - keys.length * 60) / 2;
    for (let i = 0; i < keys.length; i++) {
      if (mouseX > x + i * 60 && mouseX < x + i * 60 + 50 && mouseY > 20 && mouseY < 70) {
        this.selectedColor = this.palette[keys[i]].color;
        break;
      }
    }
  }

  fillCell() {
    let col = floor((mouseX - 100) / this.cellSize);
    let row = floor((mouseY - 90) / this.cellSize);

    if (row >= 0 && row < this.rows && col >= 0 && col < this.cols) {
      if (!this.grid[row][col]) {
        this.grid[row][col] = this.selectedColor;
        this.filledCells++;
        console.log(this.filledCells)
        if (this.isCompleted()) {
          game.state = "final";
        }
      }
    }
  }

Another challenge I faced was determining the end condition for the game. Currently, the game ends when the total number of filled cells matches the number of cells corresponding to a color on the grid. However, this assumes that users only color the cells with assigned letters and don’t fill in any blank spaces. Additionally, since the game allows users to fill any cell with any color, the code does not track whether a specific cell is filled with the correct color. A possible solution would be to store a reference for each cell’s correct color in every coloring page, but I haven’t yet found a way to do this dynamically without hardcoding hundreds of cells, which would be inefficient and take up unnecessary space in the code. This is an area I would like to improve in the future.

For this week’s project, I wanted to create something with a cosmic theme that felt both interactive and magical. I focused on shades of blue and purple to match the theme and added a twinkling star effect as the background. The core of the project is the interactive bubbles—users can click on the screen to generate bubbles, and each bubble will display a random star sign. Clicking on an existing bubble reveals a short message related to that star sign. The letters of the message then fall down in an effect imitating a meteor shower.

CLICK TO CREATE AND POP BUBBLES

One part of the code that I’m particularly proud of is the way the bubbles and the falling messages behave. When the user clicks on a bubble, the bubble displays a message tied to the star sign. After a few seconds, the letters from the message “fall” like meteors. This falling effect was challenging to create because I had to ensure the letters moved smoothly and looked dynamic without overlapping or bunching together. Balancing the timing and position of each letter took some effort, but I’m happy with how it turned out. It adds a playful touch to the overall design.

class Fortune {
  constructor(x, y, message) {
    this.x = x;
    this.y = y;
    this.message = message;
    this.alpha = 0; // Start invisible for fade-in effect
    this.timer = 90; // Now lasts for 3 seconds
    this.fadeInSpeed = 5; // Controls how fast it fades in
    this.released = false;
    this.floatOffset = 0; // For a slight floating effect
  }

  update() {
    if (this.timer > 0) {
      this.timer--;
      if (this.alpha < 255) this.alpha += this.fadeInSpeed; // Gradually appear
      this.floatOffset = sin(frameCount * 0.1) * 2; // Subtle floating effect
    } else if (!this.released) {
      this.releaseLetters();
      this.released = true;
    }
  }

  display() {
    if (this.timer > 0) {
      push();
      translate(this.x, this.y + this.floatOffset);

      // Glowing text effect
      fill(255, 255, 255, this.alpha);
      textSize(14);
      textAlign(CENTER, CENTER);
      drawingContext.shadowBlur = 10;
      drawingContext.shadowColor = color(255, 200, 255, this.alpha);

      text(this.message, 0, 0);

      pop();
    }
  }

  releaseLetters() {
    for (let i = 0; i < this.message.length; i++) {
      rainingLetters.push(new Letter(this.x, this.y, this.message.charAt(i)));
    }
  }
}


class Letter {
  constructor(x, y, char) {
    this.x = x + random(-10, 10);
    this.y = y;
    this.char = char;
    this.speed = random(1, 3);
    this.alpha = 255;
  }

  update() {
    this.y += this.speed;
    this.alpha -= 3;
  }

  display() {
    push();
    translate(this.x, this.y);
    fill(255, this.alpha);
    textSize(20);
    textAlign(CENTER, CENTER);
    text(this.char, 0, 0);
    pop();
  }
}

Concept and Inspiration

For this week’s assignment, I drew inspiration from spirals and circles, as symmetry has always intrigued me. The goal was to create a generative artwork, and after reading about interaction in this week’s reading, I wanted to give the viewer creative freedom over the composition. To achieve this, I incorporated keyboard controls for selecting different color gradients and allowed users to click anywhere on the canvas to generate a spiral at that point. Additionally, the canvas can be cleared to provide users with a blank canvas.

IMP : Read before creating ART
Color Scheme (click to choose) –

• Rainbow: ‘R’ or ‘r’
• Blues: ‘B’ or ‘b’
• Blue-Green: ‘G’ or ‘g’
• Pink-Purple: ‘P’ or ‘p’
• Yellow-Orange-Red: ‘O’ or ‘o’
• Purple-Red: ‘S’ or ‘s’
• Clear Canvas: C or ‘c’

The biggest challenge I faced during this project was related to the creation and positioning of the spiral. I had to make sure that the circles followed the spiral’s curve closely, without leaving gaps between them. Initially, the gaps were too large, and the spiral looked disjointed. I spent a lot of time figuring out how to make the circles remain close together as they moved outward  and to ensure they were placed one after another in a way that created a continuous, tightly packed spiral.

The part I’m most proud of is the creating the spirals. Initially, my spirals weren’t very pretty, as the circles grew apart too much and it didn’t even look like a spiral. It took some time to figure out how to position the circles in a way that made the spiral look smooth and cohesive. After lots of tweaking, I managed to figure out the conditions where the circles would be placed in a way that created an organized spiral.

// Creates Spiral class, which acts as a template to print all spirals
class Spiral {
  constructor(x, y, max_radius, num_circles, color_palette) {
    this.x = x;
    this.y = y;
    this.max_radius = max_radius;
    this.num_circles = num_circles;
    this.current_circle = 0;
    this.angle_increment = 10;  // Places individual circles closer depending on value
    this.radius_increment = 0.3;  // Reduces outward distance between concentric circles of spiral depending on value
    this.color_palette = color_palette;
  }

  // creates new mini circle each time function is called in draw function
  update() {
    if (this.current_circle < this.num_circles) {
      this.current_circle += 1;
    }
  }

  // prints spiral on canvas 
  display() {
    push();
    translate(this.x, this.y);

    for (let i = 0; i < this.current_circle; i++) {
      let angle = i * this.angle_increment;
      let radius = i * this.radius_increment;
      // to control transition of colors for diff color palettes
      let gradient_factor = map(i, 0, this.num_circles, 0, 1);
      
      // defining color gradient for each transition
      let col;
      if (this.color_palette === "rainbow") {
        // Full rainbow transition
        if (gradient_factor < 0.25) {
          col = lerpColor(color(255, 0, 0), color(255, 255, 0), map(gradient_factor, 0, 0.25, 0, 1)); // Red → Yellow
        } else if (gradient_factor < 0.5) {
          col = lerpColor(color(255, 255, 0), color(0, 255, 0), map(gradient_factor, 0.25, 0.5, 0, 1)); // Yellow → Green
        } else if (gradient_factor < 0.75) {
          col = lerpColor(color(0, 255, 0), color(0, 0, 255), map(gradient_factor, 0.5, 0.75, 0, 1)); // Green → Blue
        } else {
          col = lerpColor(color(0, 0, 255), color(255, 0, 255), map(gradient_factor, 0.75, 1, 0, 1)); // Blue → Purple
        }
      } else if (this.color_palette === "blueGreen") {
        col = lerpColor(color(0, 0, 255), color(0, 255, 0), gradient_factor); // Blue → Green
      } else if (this.color_palette === "orangeRedYellow") {
        col = lerpColor(color(255, 255, 0), color(255, 0, 0), gradient_factor); // Orange → Red
      } else if (this.color_palette === "pinkPurple") {
        col = lerpColor(color(255, 105, 180), color(96, 15, 156), gradient_factor); // Pink → Purple
      } else if (this.color_palette === "purpleRed") {
        col = lerpColor(color(128, 0, 128), color(255, 69, 0), gradient_factor); // Purple → Orange → Red
      } else if (this.color_palette === "Blues") {
        col = lerpColor(color(0, 0, 139), color(0, 255, 255), gradient_factor); // Deep Blue → Cyan
      }
      
      // prints each circle with chosen color after calculating positions
      fill(col);
      noStroke();
      let x = cos(angle) * radius;
      let y = sin(angle) * radius;
      ellipse(x, y, 8);
    }

    pop();
  }
}

Reflections and Future Improvements
Looking back, I’m happy with how everything turned out, and I especially like that so many different variations can be generated based on user interactions from such simplicity. However, I feel there’s still room to improve the spiral’s look. I want to learn how to adjust the spacing between circles so that they grow proportionally as they move outward, filling the space more evenly. Additionally, I would love to experiment with making the spiral tighter and more closely packed. Also I want to figure out a different ending for the spiral, maybe something like it keeps growing and takes over the whole screen, since right now it just stops adding circles to the spiral.

One thing I loved was how much easier my life became using OOP. Using a class to create a template for the spirals allowed me to generate as many spirals as I wanted without much effort. It’s fascinating to see how simple code structures can support more dynamic and complex artistic ideas, and I’m excited to keep refining my approach to generative art.

In Chapter 1 of The Art of Interaction, “What Exactly is Interaction”, the discussion of interactivity goes beyond simple cause-and-effect relationships and explores how a system can engage users in meaningful ways. The idea that a truly interactive system should not just respond but also “think” in some capacity aligns with my own belief that interactivity is more than just reaction—it should involve some level of contemplation or adaptation. This challenges traditional perspectives on interactivity as being solely input-output driven. I found myself questioning whether an interactive system needs to have intelligence or just the illusion of it. Could randomness or unpredictability be enough to make a system feel “thoughtful” without actual intelligence?

One of my key takeaways is the importance of variety and unpredictability in user experiences. Instead of simply offering pre-defined responses to user input, I want to explore ways to make my sketches feel more dynamic and responsive. Introducing randomness in outputs could create the illusion of an evolving system that adapts to user behavior rather than just executing a set of rigid, predetermined responses. This approach also reflects my opinion that a truly interactive system should engage users in a way that feels organic and intentional, rather than mechanical.