Author: Samuel Evans

Attractive things work better.

I loved the article as it speaks on something very relatable and significant in the Design world and that is the intersection of design and beauty. I never really gave it much thought but after reading the article I now see this evident in my life too and that of friends around me. I appreciate how Norman categorised how affect impacts design and behaviour. In terms of behaviour, he explains how affect regulates how well we can solve problems and perform tasks. For instance, I find myself more motivated to handwrite when I have an aesthetically pleasing pen or pencil and the opposite is also true. In terms of design, affect impacts how easy it is to learn how to use an item. My takeaway from the reading is that designers should strive to strike a balance between optimum usability and also the appealing nature of their designs. 

Her code got humans on the moon

Such an amazing piece of writing highlighting the outstanding contribution of Margaret Hamilton in the development of software Engineering. There are so many lessons to learn from this writing but what stood out to me is the passion and sheer determination of Hamilton to push beyond the ordinary and uncover the complex technological milestones with so many odds stacked against her. I found it inspiring how she paid keen attention to the possible crash of code and was ready to solve it despite the skepticism she received from NASA. Had she not been that assertive, who knows what would have happened to the space explorers. On a broader scale I appreciate how the Apollo space program revolutionized both computing history and space exploration.So many insights to take on in life from the reading —encouraging me to push boundaries, embrace innovation, and persevere through challenges in any field.

Ever been at a wedding or party, locked in deep conversation, when suddenly—a balloon drifts by, practically begging to be popped? You hesitate. Would it be childish? Would people stare? Well, worry no more! Balloon Popper is here to satisfy that irresistible urge. No awkward glances, no judgment—just pure, unfiltered balloon-bursting joy.

Project Overview

Balloon Popper is a simple game that I worked on, though not always with ease. The objective is to pop balloons as they fall from the top of the canvas using a shooter that fires “bullets” from the bottom. The game consists of a start page, a game environment, and a finish page. It utilizes classes to define key elements such as the shooter, bullets, and balloons, each with specific properties that support collision detection, interaction, and display functions.

Implementation

The game begins with a start page where the player can view the instructions by clicking the instructions button or start the game by pressing the start button. Once the game starts, the player must shoot the balloons before they reach the bottom of the canvas. The player moves left and right along four paths using the arrow keys and fires bullets using the spacebar.

At the top of the canvas, three score trackers display the number of lives, balloons popped, and stray bullets. The lives counter tracks how many balloons have passed the bottom of the canvas, while the stray bullets counter keeps track of bullets that were fired but missed the balloons. If either the lives or stray bullets count reaches five, the game ends. The number of balloons popped is also displayed, but there is no specific win condition—the player can continue playing and challenge themselves to improve their score.

When the game ends, the finish page appears, displaying the reason for the loss, whether due to missing five balloons or using up all stray bullet allowances. The end screen also includes a restart button, allowing the player to reset the game and play again.

Code Highlights

function displayTextBox(textStr, x, y, textColor) {
  textSize(16);
  textStyle(BOLD);
  textFont("Poppins");
  let textWidthValue = textWidth(textStr);
  let padding = 5;

  fill(255, 255, 255, 200);
  rect(x - padding, y - 15, textWidthValue + 10, 20, 5);

  fill(textColor);
  textAlign(LEFT);
  text(textStr, x, y);
}

I particularly love the code snippet above that defines how I displayed the score trackers at the top of the canvas.

  isHit(bullet) {
    return dist(this.x, this.y, bullet.x, bullet.y) < this.r / 2;
  }
}

for (let i = balloons.length - 1; i >= 0; i--) {
  balloons[i].update();
  balloons[i].display();

  for (let j = bullets.length - 1; j >= 0; j--) {
    if (balloons[i].isHit(bullets[j])) {
      playPopSound();
      balloonsPopped++;
      balloons[i].reset();
      bullets.splice(j, 1);
      break;
    }
  }

The above two code snippets show how to detect collision between the bullet and the balloon.

Challenges and Areas for Improvement

One of the main challenges I faced was styling the game, including selecting colors, font sizes, and text styles. I realized that I need to work on improving my design skills. Loading the balloon images was another issue, but after consulting resources such as Stack Overflow and AI tools, I was able to find a solution and successfully display the images.

This project has been a great learning experience, and I plan to build on what I’ve learned. In the future, I want to improve button management, refine the game’s sound integration, and enhance the overall visual design to make the game even more engaging. Additionally, I would like to optimize the collision detection and fine-tune the difficulty scaling to provide a more dynamic challenge for players.

ENJOY;

Concept 

For my midterm project, I am developing a game called Balloon Popper, which incorporates everything we have learned so far. In this game, balloons fall from the top like rain, and the player must pop them before they reach the bottom. The more balloons the player pops, the faster they fall and the more balloons appear, increasing the challenge dynamically. The score is based on the number of balloons popped.

Code Structure

The game will be structured around object-oriented programming (OOP) principles, utilizing classes and functions to manage different elements:

Balloon Class: Defines properties such as position, speed, size, and color. Handles movement and collision detection.

// Balloon Class
class Balloon {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color(random(255), random(255), random(255));
  }

  move() {
    this.y += 2; // moving ballon downwards
  }

  display() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.size, this.size * 1.3); // Oval balloon shape

Shooter Class: Represents a player-controlled shooter at the bottom of the screen, used to aim and pop balloons.

Game Manager: Handles overall game logic, including score tracking, difficulty scaling, and user interactions.

Interactivity: The player moves the shooter left and right and fires projectiles to pop balloons.

Challenges and Uncertain Aspects

One of the most complex aspects of this project is implementing multiple difficulty levels (Easy, Medium, Hard). I am unsure of how feasible it will be within the project timeline. Additionally, I was initially uncertain about whether to allow players to pop balloons using a shooter at the bottom or direct mouse clicks.

Risk Mitigation and Adjustments

To ensure feasibility, I decided to focus on dynamic speed increase as the main difficulty progression instead of distinct levels. This allows the game to scale naturally in difficulty without the need for predefined level transitions. However, I may still explore the possibility of adding a multi-level aspect if time permits. Additionally, I have chosen to implement shooters at the bottom rather than mouse clicking, as this adds an extra layer of interactivity and skill to the game.

• What are some of the ways that computer vision differs from human vision?

Human vision involves cognitive processes that allow us to interpret context, recognize objects without any limitation to the lighting conditions and angles, and also to make intuitive inferences. In contrast, computer vision relies on complex algorithms that analyze pixel data without context or intuition. Unlike human vision, which naturally adapts to varying conditions, computer vision relies on structured methods such as frame differencing, background subtraction, and brightness thresholding to detect motion, presence, or objects of interest​.

• What are some techniques we can use to help the computer see / track what we’re interested in? 

As recorded in the paper, one of the greatest challenges in computer vision is enabling computers to make accurate detections and distinguish between “what is” and “what was”— key factor in motion and presence detection. Several techniques help achieve this: Frame Differencing: This method detects motion by comparing differences between consecutive frames, identifying areas where pixel values have changed. Background Subtraction: This technique captures an image of an empty scene as a reference and then compares incoming frames against it. Any changes are flagged as new objects. However, it is highly sensitive to lighting variations. Brightness Thresholding: Controlled illumination and surface treatments (such as using high-contrast materials or backlighting) help distinguish objects based on their brightness levels, making tracking more effective in interactive environments. By combining these methods, computer vision can better track motion, recognize objects, and adapt to artistic applications​

• How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

The surveillance capacity and tracking ability of computer vision can be used to store and present anomalous data in a creatively artistic way. Many artists have integrated these capabilities to create interactive installations that respond to human movement and behavior. Myron Krueger’s Videoplace (1969-1975), for example, allowed participants to interact with digital graphics using only their silhouettes, demonstrating how computer vision can enable body-driven interaction. Similarly, Messa di Voce (2003) used head-tracking and speech analysis to create a dynamic visual experience where graphics appeared to emerge from performers’ mouths, merging performance with real-time digital augmentation.

Concept

I drew inspiration for this project from observing a wall clock. I saw an opportunity to apply what I had learned about arrays and classes by representing the minutes, hours, and clock arms as objects, classes, and arrays. However, I wanted to create something more dynamic and artistic. While searching online for inspiration, I came across several visuals that influenced my design.

Additionally, I used this project as an opportunity to improve my skills in color gradients. Implementing the desired background gradient took time, but it was a rewarding learning experience. One of the challenges I faced was not saving my work frequently, leading to lost progress and the need to start over. Another difficulty was choosing and balancing colors effectively.

Code Highlights

Below are some of the key sections of my code that I am particularly proud of, along with a brief explanation of their functionality:

class ClockArms {
  constructor() {
    this.p = 0;
    this.q = 0;
    this.angle = 0;
  }

  centreCircle() {
    fill(255, 0, 0);
    noStroke();
    circle(this.p, this.q, 30);
  }

  longarm() {
    let armLength = 150;
    let t = this.p + armLength * cos(this.angle);
    let s = this.q + armLength * sin(this.angle);
    let m = this.q + r * cos(this.angle);
    let n = this.q + r * sin(this.angle);
    stroke(255);
    strokeWeight(4);
    line(this.p, this.q, t, s);
    fill(255);
    noStroke();
    circle(m, n, 10);
  }

  update() {
    this.angle = map(frameCount % 360, 0, 360, 0, TWO_PI);
  }

In the code above, I created a class that implements the functionality of a clock, including the movement of the clock hand.

for (let i = 0; i < drawnMarkers.length; i++) {
  smallCircles(myCircles[drawnMarkers[i]].x, myCircles[drawnMarkers[i]].y);
}

In the code above, I used arrays to display the hour markers one by one.

Reflection and Future Improvements

Moving forward, I plan to utilize Perlin noise to create more visually interesting sketches. I also considered making this an actual working clock that tells time, but for now, that wasn’t my MVP (and I ran out of time!). Additionally, I aim to learn how to efficiently manage color schemes for accessibility, ensuring that my designs are not only visually appealing but also usable by a wider audience. By continuously experimenting with different color effects and combinations

Click to change the background image!

Characteristics of a strongly interactive system

I really appreciate how Chris Crawford clarifies the concept of Interactive Design, breaking down common misconceptions through clear, relatable, and practical examples. Before reading, I also had a mistaken perception of interactivity. Crawford’s explanation helped me understand it in its simplest form—as a cyclic process involving two actors who actively listen, process, and respond. In the context of media and graphic design, this translates to receiving input, processing it, and generating meaningful output. The core characteristics of interactivity, as highlighted in the reading, revolve around these key elements:

• Accepting user input
• Processing user input
• Providing relevant output

Another key takeaway for me was that a highly interactive system should be responsive, engaging, and adaptive, ensuring that user actions lead to unique and meaningful experiences rather than repetitive or predetermined outcomes.

improving the degree of user interaction

To enhance interactivity in my p5 sketches, I plan to incorporate more immediate user feedback and dynamic responses. For instance, I could implement gesture-based controls using mouse or keyboard input, where actions like mousePressed, mouseReleased, or cursor position trigger varied visual reactions. Additionally, introducing randomness and auto-generated elements would make the sketches feel less predictable and more engaging. By designing my sketches to respond in personalized and dynamic ways, I can create a richer and more immersive interactive experience.

One thing that stood out to me from the video was how randomness can be used to generate complexity. Casey talked about how simple rules together with random elements, can give results that feel natural and unexpected. I personally like using randomness in my work because it makes things feel more natural, rather than too structured or predictable. I also found it  interesting how randomness isn’t just about making things look chaotic—it actually reflects real-life patterns from the biological to the mathematical world. Just like in nature, nothing is perfectly placed, and randomness can help simulate that. However, I believe it is best to allow randomness to do its thing in artwork but while still maintaining some control over the whole structure to some extent. Having control or knowledge over art makes me feel more connected to the final structure.  If everything is completely random, it can feel messy, but if there’s no randomness at all, it feels artificial. I choose to settle for balance between the two . A great example Casey mentioned was a piece that incorporated randomness but became more structured when symmetry was introduced. This showed how even a small amount of control can bring order to something that initially seems chaotic. 

Another point that resonated with me was on the use of random numbers in art. He mentioned how random numbers can serve as a tool to introduce variation, but they also rely on a system of rules to guide the outcome. Without some guiding principles, the randomness would lose its purpose. I think this aligns with my approach to using randomness in my work—it’s not just about throwing chaos into the mix, but about using it in a controlled way to show creativity while still achieving a somewhat desired result. In my week two project, I was able to maintain order for the most part of the artwork, while also adding randomness in aspects like the color choices.

Concept

For my art project, I initially aimed to create dynamic helix structures using sine and cosine functions combined with loops. I wanted something dynamic and wavy like in the image below I saw from the Computer Graphics and Art resource document;However, achieving a realistic 3D effect proved challenging. Despite this, my efforts were not wasted—they laid the foundation for my new project: Color Waves. Throughout the process, I discovered my passion for interactive art, balancing control with an element of randomness in the colors.

Code Highlight

I’m particularly proud of how I successfully integrated sine curves and loops to create a smooth, gradual increase in the size of both circles and squares.

for (let x = initial_x + offsetX; x < width; x += spacing) {
  for (let y = initial_x + offsetY; y < height; y += spacing) {
    let size = sin(frameCount * 0.05 + (x + y) * 0.01) * 15 + 30;

Reflection & Future Improvements

Although I didn’t fully achieve my original vision of a helix, I notably improved from my previous project as far as interactivity is concerned.  I also gained valuable insights throughout the creative process. This experience has deepened my interest in digital art, and I’m excited to explore and master 3D figures and objects in future projects.

CLICK