Response – Week 5, Golan Levin’s Computer Vision for Artists and Designers

Golan Levin’s Computer Vision for Artists and Designers,  explains the concept computer vision for beginner programmers like myself, placing a emphasizing on utilizing vision-based detection and tracking techniques within interactive media. The initial section introduces the artistic applications of computer vision beyond industrial and military realms.

It was a very interesting read that almost shows history in interactive media through computer vision, at least in some way or the other. It is through computer vision the first computer interactive art performance was developed.

For example, ‘Standards and Double Standards’ by Rafael Lozano-Hemmer is something that intrigued me. Belts spinning around based on who’s passing by – visually cool, but there’s this metaphorical layer that adds depth. It’s the kind of stuff that makes you ponder. Which is what I would like to implement in my work.


Midterm: Feline Frenzy

For my midterm, I had to create a game primarily focused on cats, driven by my love for them. The game’s objective is to reach a score of 20 by catching as many cats as possible within thirty seconds. Additionally, there is a power-up cat that boosts your score. I encountered two unsuccessful attempts in executing my ideas, leading me to start over, which I believe turned out quite well.


My initial idea was to create a game inspired by “My Talking Tom,” a game I enjoyed playing while growing up. I aimed to introduce a twist by replacing the cat with a camel. However, when it came time to execute the idea, I was unsure of how to begin and could not find any examples to follow.


My second idea involved creating an interactive game using PoseNet, modeled after the classic “I’ve got your nose” game. The core code functioned well; however, implementing the menu and other deliverables proved difficult, as they interfered with the rest of the code’s functionality. If you’re interested in trying it out, I recommend visiting the actual sketch, as you’ll need your webcam.

Moving on to the actual game, I aimed to create something simple and easy to play. However, I do wish it offered more of a challenge to players. Perhaps increasing the speed or adding another character that reduces the score instead of offering power-ups could enhance the difficulty. Additionally, feedback from one of my classmates highlighted the importance of clear instructions. Given the potential for confusion, providing explicit instructions regarding the timeframe, the scoring system, and the power-up cat would make it easier for users to understand and enjoy the game.

In terms of challenges, I faced issues similar to those of my classmates, particularly with the sketch not accepting images. I was advised to either work on the code locally or clear my cache to resolve this issue. However, my main challenges were related to the stylistic aspects of the game and deciphering the keyPressed(); function. Additionally, linking all parts of the game—from the menu to the game itself, and then to the win or lose screen—before looping it all back to the menu was probably the most time-consuming aspect of this entire project.

The most enjoyable aspect of this project for me was creating the graphics. I utilized Canva and Vecteezy to source all the elements needed to achieve the pixelated Mario aesthetic I desired.

Code + Notes:

// Midterm Project by Amal Almazrouei
// Credit:
// Sound:
// Font: Google Fonts
// Images: ;
// Graphics:
// Example Code:

// Flags to control game state
let started = false;
let gameEnded = true; // Treat game as ended initially to present start menu
let showingEndScreen = false; // Indicates if end screen is currently displayed

// Game timing and positioning variables
let startTime;
let x = 200;
let y = 200;
let powerX = 100;
let powerY = 200;

// Score and game dynamics variables
let score = 0;
let r = 48; // Radius for interactive elements
let interval = 60; // Controls frequency of game events
let frames = interval; // Countdown to trigger game events
let powerIsThere = false; // Flag for power-up appearance
let increase = 1; // Score increment
let increased = 0;

// Assets and sound variables
let img, powerImg, startScreenBg; // Image variables for game elements
let myFont; // Custom font variable
let backgroundMusic, catSound, powerUpSound, winSound, loseSound; // Sound variables

function preload() {
  // Preload all necessary media assets
  img = loadImage('Media/cat1.png'); // Main character image
  powerImg = loadImage('Media/cat2.png'); // Power-up image
  startScreenBg = loadImage('Media/startScreenBg.png'); // Start screen background image
  myFont = loadFont('assets/MyFont.ttf'); // Custom font
  // Loading sound assets
  backgroundMusic = loadSound('sounds/backgroundMusic.mp3');
  catSound = loadSound('sounds/catSound.mp3');
  powerUpSound = loadSound('sounds/powerUpSound.mp3');
  winSound = loadSound('sounds/winSound.mp3');
  loseSound = loadSound('sounds/loseSound.mp3');

function setup() {
  createCanvas(400, 400);
  textFont(myFont); // Set the custom font
  backgroundMusic.loop(); // Play background music on loop

function keyPressed() {
  // Handles key presses for restarting or transitioning from end screen
  if (gameEnded && showingEndScreen) {
    showingEndScreen = false; // Exit end screen to show start menu
  } else if (!started && !showingEndScreen && gameEnded) {
    resetGame(); // Reset and start game from menu

function resetGame() {
  // Reinitialize game variables for a new session
  started = true;
  gameEnded = false;
  showingEndScreen = false;
  startTime = millis(); // Reset game timing and positioning
  x = 200;
  y = 200;
  score = 0;
  r = 48;
  interval = 60;
  frames = interval;
  powerIsThere = false;
  increase = 1;
  increased = 0;
  clear(); // Clear the screen before starting

function mousePressed() {
  // Handle player interactions with game elements
  if (started && !gameEnded && !showingEndScreen) {
    if (dist(mouseX, mouseY, x, y) < r) {;
      // Random chance for score increase
      const rand = random(1);
      if (rand < 0.02) {
        increase = 50;
      } else if (rand < 0.1) {
        increase = 10;
      } else {
        increase = 1;
      score += increase;
      increased = 20;
    if (powerIsThere && dist(mouseX, mouseY, powerX, powerY) < r) {;
      interval = 60;
      r = 48;
      powerIsThere = false; // Remove power-up after clicking

function draw() {
  // Main animation loop: Update game screen based on state
  if (!started && !showingEndScreen) {
    gameStartScreen(); // Show start screen if game hasn't started
  } else if (started && !gameEnded) {
    // Game play updates
    let currentMillis = millis();
    background(135, 206, 235); // Set background
    // Display power-up image if present
    if (powerIsThere) {
      image(powerImg, powerX - r, powerY - r, r * 2, r * 2);
    // Display main character image
    image(img, x - r, y - r, r * 2, r * 2);
    // Display score and time left
    textAlign(LEFT, TOP);
    fill(255, 0, 255); // Set text color
    text(score, 15, 15);
    let timeLeft = 30 - Math.floor((currentMillis - startTime) / 1000);
    text("Time: " + timeLeft, 15, 50);
    // Update positions and check for game end conditions
    if (frames <= 0) {
      frames = interval;
      x = random(width);
      y = random(height);
      if (random(1) < 0.07) {
        powerIsThere = true;
        powerX = random(width);
        powerY = random(height);
      } else {
        powerIsThere = false;
    if (score >= 20) {
      endGame(true); // Player won
    } else if (currentMillis - startTime > 30000) {
      endGame(false); // Time's up, player lost

function endGame(win) {
  // Handle game end: Show win or lose screen
  started = false;
  gameEnded = true;
  showingEndScreen = true;
  background(135, 206, 235); // Optionally reset background
  textAlign(CENTER, CENTER);
  // Display win or lose message
  if (win) {;
    fill(0, 0, 128); // Blue color for win
    text("You Win!", width / 2, height / 2);
  } else {;
    fill(0, 0, 128); // Blue color for lose
    text("You Lose!", width / 2, height / 2);
  fill(255, 0, 255); // Magenta color for subtitle
  textSize(24); // Smaller font size for subtitle
  text("Press any key to continue", width / 2, height / 2 + 20);

function gameStartScreen() {
  // Display start screen at game launch
  image(startScreenBg, 0, 0, 400, 400);

Credit + Resources:

Font: Google Fonts
Images: ;
Example Code:




Raya Tabassum: Reading Response 4

The article provides a comprehensive examination of how computer vision technologies have evolved from highly specialized tools to accessible instruments for artistic expression and design. The inclusion of historical and contemporary examples of interactive art, such as Myron Krueger’s Videoplace and Golan Levin’s own Messa di Voce, serves not only to illustrate the potential applications of computer vision in art but also to inspire readers to think creatively about how they might employ these tools in their own work. The article does not shy away from addressing the challenges and ethical considerations inherent in surveillance and data collection, using projects like the Suicide Box by the Bureau of Inverse Technology to provoke critical thought about the implications of computer vision technology. The workshop example, LimboTime, serves as a tangible outcome of Levin’s pedagogic approach, demonstrating how novices can rapidly prototype and implement an interactive game using basic computer vision techniques. This example encapsulates the article’s core message: that with the right guidance and tools, computer vision can become a powerful medium for artistic exploration and expression.
By demystifying computer vision and providing practical tools and techniques for novices, Levin opens up new avenues for creative expression and interaction, reinforcing the idea that art and technology are not disparate fields but complementary facets of human creativity.

Week 5 : Midterm Progress

When I heard how the midterm would be to create a game, my mind immediately went to my favorite type of game: Rhythm Games. I wanted to try and recreate one of my favorite arcade games called Dance Dance Revolution where the player would have to stand on the arrows on the ground that would correspond to the rhythm of the background music.

This is the DDR Arcade Machine:

I successfully created three lives that would get lost when the player would miss a ball. I also managed to create a “Game Over” state which I have to modify. However, I need to work on the interactive part of it. The mechanics that I have currently are Mouse click based, meaning that a player would have to click on the target area in order to gain points. When I tried to play it using a mouse, it felt very awkward so I will probably change it to the arrow keys which would be way more convenient.

Update: Okay, turns out that It does not even work properly with the mouse no matter how hard I try. I will be switching the strategy to the arrow keys.  I found the exact arrows that I would want to use which are the following. Now I have to figure out how I could code the arrow keys and assign them to each of the targets.

This is what I would like it to look like:

Week 5 Reading Response: Machines can see us now?

This week’s reading is eerily interesting. Learning about how we can now interact with our computers with our entire body seems uncanny, if not revolutionary. Reading about Myron Krueger’s work, Videoplace, which he developed between 1969 and 1975, stands out as an early example where participants’ silhouettes were digitized and used for interactive graphics, showing the potential of whole-body interactions with computers. This overcomes the common use of mouse and keyboards. It reminds me of the Apple Vision Pro and how we can interact with the digital space by just moving our hands around, and how physically turning can show a 360 view of our space.

The article also introduces Messa di Voce, a collaborative project incorporating whole-body vision-based interactions, speech analysis, and augmented reality to create a unique audiovisual performance. This shows the evolution of computer vision in the arts, combining different sensory inputs for creative expression.

David Rokeby’s Sorting Daemon and the Suicide Box by the Bureau of Inverse Technology delve into a rather darker side of computer vision, shedding light on issues of surveillance and profiling. Rokeby’s installation creates diagnostic portraits of social environments, reflecting concerns about automatic systems in the context of the “war on terrorism.” On the other hand, Suicide Box, which is near the Golden Gate Bridge, captures live data on suicides, giving birth to controversy of using technology in social and public settings.

Midterm Progress Check – Jihad Jammal


The core idea of my game reimagines the classic mechanics of the retro game Snake, introducing a playful twist where the protagonist is a dog on a mission to eat as much homework as possible. In this game, players navigate a dog around the screen, aiming to collect and consume homework pieces scattered across the play area. Each piece of homework the dog eats not only adds points to the player’s score but also visually enlarges the dog’s face, making the game increasingly challenging and humorous as the dog’s appearance grows comically large.

To add a layer of strategy and urgency, the game is set against a ticking clock. Players must race against time, strategizing to eat as much homework as they can before the timer expires. The score is a combination of two elements: the physical size of the dog’s face, which grows with each piece of homework eaten, and a numerical value that increases with the homework consumed. This dual scoring system provides immediate visual feedback and a quantifiable measure of success, engaging players in a quest to beat their own high scores or compete with others.

A highlight of some code that you’re particularly proud of:

function drawDog(x, y) {
  push(); // Start a new drawing state
  translate(x - width / 2, y - height / 2); // Center the drawing on the dog's position
  var colorW = color(255,255,255);
  var colorBL = color(0,0,0);
  var colorBR = color(160,82,45);
  var colorP = color(255,182,193);
  // Ears
    // Right ear
    ellipse(width/2, height/4, 150, 50);  

    // Left ear
    ellipse(width/2, height/4, 150, 50);
  // Base
  ellipse(width/2, height/2, 200, 200)
  // Mouth
  arc(50, 50, 80, 80, 0, HALF_PI + HALF_PI);
  // Tongue
  rect(width/2, height/2, 50, 35, 20)
  // Tongue detail
  ellipse(width/2, 277.5, 5, 25);
  // Nose
  triangle(30, 75, 58, 100, 86, 75);
  // Nose shine
  scale(0.5, 0.5);
  vertex(10, 20);
  vertex(35, 20);
  // Eyes
  rect(220, 160, 60, 60, 20, 30, 20, 40);
  ellipse(250, 190, 35, 35);
  ellipse(150, 190, 35, 35);


Embedded sketch:

Reflection and ideas for future work or improvements:

Progress on the game development is quite encouraging at this point. I’ve successfully tackled the challenge of scaling the dog’s head in a way that ensures all facial features remain proportionate, regardless of its size. This was a crucial step to maintain the visual consistency and appeal of the game, ensuring that as the dog “eats” more homework and its face grows, it still looks natural and retains the humorous charm intended for the game’s design.

The next significant hurdle I’m facing involves developing a robust logic system for the game. Specifically, I need to implement a mechanism where the growth of the dog’s head is directly tied to the action of consuming homework pieces (HW) within the game. This means creating a set of rules and conditions in the game’s code that accurately tracks each piece of homework the dog eats and translates that into proportional increases in the size of the dog’s head.

Week 5: Midterm Progress

Going into the midterm project I originally had the idea to make a two player game of Russian roulette, but eventually I changed my mind. I have now decided to make a two player, Mexican standoff game. Where there is a countdown and whoever presses the shoot button first wins. Player 1 will have a button on the left hand side of the keyboard like the letter ‘S’ and player 2 will have a button on the right hand side of the keyboard like the letter ‘L’ for example.

I spent most of my time working on the scene management. By that I mean the functionality around being able to switch to and from scenes. For example, going from the main menu to the tutorial screen or to the credits or game screen and back. I also decided for this project I would use visual studio code to program the code. It has worked perfectly up to this point where I have to now upload the code onto the website so that I can share it here. For some reason, as of writing this I am having the problem where whenever I run the code in the website editor the website decides to turn white. I thought this was a problem with chrome and maybe one of my extensions so I tried switching to Safari but had the same problem. Here is the sketch below. I managed to fix the issue and I explain the

I was having the issue of the website editor going blank, because one of my functions returns a console.error(). At the time when I had made the function return such a value I didn’t think it would be an issue in the first place because it would never happen, and it never did, but because a function could return such a value it crashed the editor. Note to self: don’t try to be fancy with the values you return

At the moment the program is very bare bones. In the future I plan to have the main title an image, and maybe the main menu background will be an animated one. Then for the game each player will be a pixelated version of a cowboy or something along those lines, and there will be some kind of background. I may also make the mexican standoff game a best of 5.

Lastly, thank you Pi for telling me about scene management, and thank you professor for helping with uploading the code from Visual Studio Code to the website editor.

Week 5 Reading Response: Computer Vision

I am not a programmer or a videographer, so I’ll mostly speak about the first topic, Computer Vision in Interactive Art.

I was really impressed by Krueger’s Videoplace. It seemed to be a highly interactive Computer Vision piece. I found it especially interesting that this project is actually quite old, older even than the computer mouse. This surprised me as I thought that computer vision, at least the kind that could track poses accurately, was relatively new. It’s pretty amazing that the piece was working even in 2006.

Also, the part about computer vision and interactive art based on it being a response to increasing surveillance really stood out to me. Art has often been a response to various kinds of troubles or challenges faced by society, and is often a means of coping with societal trauma. Therefore, it is no surprise that the increased surveillance following 9/11 and the War on Terror, especially machine-based surveillance, triggered an outpouring of interactive artpieces based on computer vision. Lozano-Hemmer’s Standards and Double Standards is probably the best example of this, as to me, it represents that surveillance makes people more distant from each other (represented by the “absent crowd”) while enforcing a sense of oppression and authority (represented by the belts).

Rokeby’s Sorting Daemon was another particularly interesting project, especially after I visited his website to understand how the composites were made. On the left side of the composite are the faces, sorted from dark skin to fair, left to right. The right side meanwhile captures details of their clothes, sorted into mosaics by similar color. I found it to be a rather fitting representation of the profiling of people, which is often racial and unfairly targets racial minorities and immigrants who appear more similar to the stereotypical “terrorist” or “criminal”. It is also a visual representation of the dehumanization of people into datapoints that are monitored by the state.

Overall, this was a very interesting reading about the history of Computer Vision-based art. While I regret not being able to understand the technical aspects better, I would say this was quite a well-written article, which simplified many complex concepts of this old, yet cutting-edge, field.

Week 5 Reading | To the Moon and Back from Our Eyes.

Around fifty-five years ago, Apollo 11 reached the moon and back to Earth. Interestingly, the computers used to guide the spacecraft only required 4 kilobytes of memory. While it may seem small by today’s standards, it was a super machine that allowed precise and complex calculations for the journey.

“That’s one small step for man, one giant leap for mankind.” -Armstrong

Levin presented us with findings over thirty years later on the advancements humanity has made regarding computers. With more capacity, they are now able to track things in real-time and output images that are not just static but interactive. This reminds me of the breakthrough that Apple made with its Apple Vision and Vision Pro. The device is a major display (no pun intended) of what computer vision has become. While it may seem lesser compared to our phones (with its low battery capacity and weight!), it also made me reimagine the future when these devices are common occurrences in daily lives.

Remember when the first iPhone was introduced by Steve Jobs: people made fun of touchscreens. Today, it is indistinguishable from our daily lives. Indeed, today Apple Vision is mostly perceived as redundant to our smartphones.  But unless someone took up the mantle and challenged the default, no invention would ever be made.


To the Moon and Back on 4KB of Memory – Metro Weekly

The Four Computers That Flew Humans To The Moon (

Levin, G. “Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice
Programmers”. Journal of Artificial Intelligence and Society, Vol. 20.4. Springer Verlag, 2006.

Week 5 Assignment: Midterm Progress Report

Organ Defenders (WIP)


For this project, I was inspired mostly by Namco’s Galaga (image attached) and other games in the shoot ’em up genre. In the game, there are waves of enemies that you have to shoot down to score points. Being shot by the enemy or colliding into them makes you lose a life. Finally, there are some enemies that have special attacks that don’t kill you outright but make it harder for you to survive the wave.

A game of Galaga. The player controls a spaceship that is trying to dodge attacks from enemy spaceships. The boss spaceship has a tractor beam that spreads out in front of itself towards the player.


As the Biology major of this class, I thought of combining the gameplay of Galaga with a concept based on our body’s immune system in order to make something new. Thus, Organ Defenders (would appreciate suggestions on the name) was born.


This can be divided into three aspects, the game design, the code structure, and the visual design.

Game Design: I mostly went with the tried and true format of Galaga. The player has four lives and can control a white blood cell in the x-axis at the bottom of the screen. The player will be able to shoot bullets of enzymes at the enemies to bring them down and score points.

Waves of bacteria and viruses keep generating at the top and moving downwards (I might change this to right-to-left later). I may give some of the bacteria the ability to shoot toxins later, but for now, colliding with a bacterium makes the player lose a life. Viruses won’t directly kill the player but will disable the gun control, thereby not being able to earn any points.

As mentioned before, score is earned based off of how many bacteria/viruses have been killed. If I have the time, I might create a hard mode, where the higher the number of bacteria/viruses that are allowed to leave the bottom of the screen, the higher the number of new bacteria that are generated at the top. This will attempt to simulate infection.

Additionally, I plan to include three different kinds of timed powerups that can also help the player in challenging situations. Again, the hard mode might include some kind of cost to use the powerups more than once, to prevent spamming. The powerups I am currently planning for will be Antibody Rush (freezes the bacteria/viruses in place), Cytokine Boost (the player will be able to shoot more projectiles per shot), and Complement Bomb (basically nukes everything on the screen).

Code Structure: I plan to have 4 classes: the white blood cell, bacteria, virus, and the bullet. Here’s an example of how the classes will look, using my Bacteria class.

class Bacteria {
  ) {
    this.x = initX;
    this.y = initY;
    this.r = radius
    this.moveY = speed;
    ellipse(this.x, this.y, 2 * this.r);
    this.y += this.moveY
    return dist(this.x, this.y, other.x, other.y) <= this.r + other.r
    return (this.y > height)

Visual Design: While it is a bit early to finalize the visual design before most of the gameplay is ready, I can still talk about it briefly. I plan to use Creative Commons-licensed sprites for the white blood cell, bacteria, and viruses. I might use spritesheets to show some animation, but I am not sure whether that will add to the game’s visual aspect as things might be going too fast anyway for a player to enjoy animations. At the most, I might include animations for when the white blood cell shoots a projectile.

Frightening Aspects / Challenges

There are quite a few aspects that seem daunting now:

  • Actually creating a desirable core gameplay loop, something that will encourage the player to keep playing
  • The powerups seem like a hassle to implement, especially the way I’m planning to implement them. Also, it will be challenging to show the timer of how much time is left before the next use of the projectile.
  • Timing of the animations will also need to be fine-tuned to avoid distracting the player and detracting from the game experience.
  • I also need to find a way to have the bacteria not clump together, which would unfairly make the player lose more lives. I tried for a bit to use while loops to keep regenerating random positions until there was a non-colliding one, but it didn’t seem to work properly.

Risk Prevention

  • I’ll have to work on extensive playtesting to resolve bugs. I also aim to have my roommates/friends playtest it to fine-tune the UI/UX.
  • Implementing the powerups will require me to learn some new skills.
  • I should have a core gameplay loop ready, along with visuals and SFX before I attempt to include the powerups, so that in the worst-case scenario, I still have a ready project.
  • Regarding the bacteria clumping together, I need to either find a way to unclump them or give the player i-frames (invincibility frames) upon losing a life. I might include the i-frames anyway, but will need to find a way to indicate that to the player (in fact, my prototype currently has half a second of i-frames, clearly not enough).
  • I should also make my code more responsive and check for any in-built functions I use that may respond unexpectedly on other systems.

Midterm Prototype

Finally, here’s the prototype. So far, only the player movements, the bacteria collisions, and the game over/game restart logic have been put in place.