Week 9 – Breathing Switch

For this week’s exercise, I decided to make a switch that will detect breathing.

The rudimentary mechanism that functions as a switch is two pieces of tin foil which are separated by a small gap. When a person breathes in, their chest expands, and the pieces of foil are separated. They connect when a person exhales.

The materials needed for this project are:

  • Breadboard
  • Arduino board
  • Tape
  • Jumper wires
  • Tin foil
  • 330-ohm resistor
  • 10K-ohm resistor
  • 1 LED light

Wires with tinfoil are stung around a person’s chest to connect around the chest. There is no danger to the subject as the voltage of the circuit is really low and cannot pass through a body.

/

When the circuit is closed, the Arduino detects the closure and sends a signal to an LED to light up.

The switch/sensor

The circuit:

Similar devices already exist in the medical field, and as a part of a lie detector machine.

While creating this project, it was really fun to think of the many potential real world applications that machines such as this, basically simple switches, have.

I ran into some problems with the sensor when I made this. It was really hard to make the sensor align with itself, and the shirt to which it was attached was flimsy and moved around, causing the sensor to go off at times it should not have. Ideally, the entire contraption would be accompanied by an elastic band which would go around the chest of a person to keep the sensors secure and aligned, or the sensor would be attached directly to the skin, via tape.

Midterm – Asteroids

Concept and Inspiration

The inspiration behind this code is to create a classic arcade-style game similar to Atari’s Asteroids, where players control a spaceship navigating through space, avoiding asteroids, and shooting them down to earn points. The game incorporates simple controls and mechanics to provide an engaging and challenging experience for players.

Full screen link: https://editor.p5js.org/is2431/full/MvWdoI5tz

How It Works

  • The game uses the p5.js library for rendering graphics and handling user input.
  • It defines classes for the spaceship, asteroids, and bullets, each with their own properties and behaviors.
  • The game initializes with a start screen where players can see the controls and start the game by pressing the Enter key.
  • During gameplay, players control the spaceship using the arrow keys to move and the spacebar to shoot bullets.
  • Asteroids move randomly across the screen, and the player’s objective is to shoot them down while avoiding collisions.
  • When all asteroids are destroyed, the player advances to the next level, where more asteroids are spawned.
  • The game ends when the player runs out of lives, and their score and highscore are displayed along with the option to restart.

Highlights of Code I Am Proud Of

One highlight of the code is the generation of asteroid shapes. The Asteroid class utilizes a combination of randomization and mathematical calculations to create visually appealing and diverse asteroid shapes. By varying the number of vertices, radius, and offsets, the code generates asteroids that have unique patterns, enhancing the overall visual aesthetics of the game.

// Asteroid class
class Asteroid {
  constructor(pos, r) {
    if (pos) {
      this.pos = pos.copy();
    } else {
      this.pos = createVector(random(width), random(height));
    }
    this.vel = p5.Vector.random2D();
    this.r = r || random(15, 50);
    this.total = floor(random(10, 20));
    this.offset = [];
    for (let i = 0; i < this.total; i++) {
      this.offset[i] = random(0, 15);
    }
  }

  update() {
    this.pos.add(this.vel);
  }

  edges() {
    if (this.pos.x > width + this.r) {
      this.pos.x = -this.r;
    } else if (this.pos.x < -this.r) {
      this.pos.x = width + this.r;
    }
    if (this.pos.y > height + this.r) {
      this.pos.y = -this.r;
    } else if (this.pos.y < -this.r) {
      this.pos.y = height + this.r;
    }
  }

  display() {
    push();
    translate(this.pos.x, this.pos.y);
    noFill();
    stroke(255);
    beginShape();
    for (let i = 0; i < this.total; i++) {
      let angle = map(i, 0, this.total, 0, TWO_PI);
      let r = this.r + this.offset[i];
      let x = r * cos(angle);
      let y = r * sin(angle);
      vertex(x, y);
    }
    endShape(CLOSE);
    pop();
  }

  breakup() {
    let newAsteroids = [];
    newAsteroids.push(new Asteroid(this.pos, this.r / 2));
    newAsteroids.push(new Asteroid(this.pos, this.r / 2));
    return newAsteroids;
  }
}

 

Challenges with the Project

  1. Collision Detection: Implementing accurate collision detection between the spaceship, bullets, and asteroids while ensuring smooth gameplay was a challenge, requiring careful consideration of position, size, and velocity.
  2. Game State Management: Managing different game states such as start, play, level complete, and game over required careful handling of state transitions and user input to ensure a seamless gaming experience.
  3. UI and Feedback: Designing clear and intuitive user interfaces, including start screens, game over screens, and score displays, posed challenges in terms of layout, readability, and responsiveness.

 

Future Improvements

There are many improvements I can make to the project. For example, the original Atari game had aliens which would shoot at the spaceship. There are other game mechanics I could have added like powerups.

Assignment 5 – Computer Vision and Art

The article provides a comprehensive overview of the history, techniques, and applications of computer vision in the interactive media arts. It is interesting to see how artists have used computer vision to create novel and expressive experiences, such as Myron Krueger’s Videoplace, Rafael Lozano-Hemmer’s Standards and Double Standards, and David Rokeby’s Sorting Daemon. The article also explains some of the basic algorithms and tools for implementing computer vision, such as frame differencing, background subtraction, brightness thresholding, and object tracking. I find these algorithms useful and inspiring for my own projects, as they enable me to detect and analyze the movements and gestures of people and objects in real time.

Messa di Voce by Golan Levin and Zachary Lieberman was very interesting to me. This is an audiovisual performance that uses computer vision to track the locations of the performers’ heads and analyze the sounds they produce. The system then generates graphics that are projected from the performers’ mouths, creating a dynamic and expressive dialogue between sound and image. I think this artwork is a creative and engaging example of how computer vision can augment and transform human communication and expression.

I found Cheese by Christian Möller pretty funny. This is an installation that uses computer vision to measure the sincerity of the smiles of six actresses. The system uses an emotion recognition algorithm to detect the changes in the facial expressions of the actresses, and alerts them when their smiles fall below a certain threshold. I think this artwork is a humorous and critical commentary on the social and cultural expectations of happiness and beauty, as well as the limitations and biases of computer vision.

Midterm Progress

Concept

My concept for the midterm project is to recreate and build upon the 1978 Atari game Asteroids. As an iconic arcade classic, Asteroids presents an exciting challenge for modern reinterpretation and expansion.

"Asteroids" by Atari: Classic Arcade Game Review - LevelSkip

Design

Here’s a breakdown of a possible architecture:

Main Class:
  • The main class serves as the entry point of the game and manages the overarching game loop. It initializes key components such as the player, asteroids, bullets, and handles user input and game state transitions. This class orchestrates the flow of the game, updating and rendering elements accordingly.
Player Class:
  • The player class encapsulates the behavior and attributes of the player’s spaceship. It includes properties such as position, velocity, rotation, and health. Methods within this class handle player movement, shooting bullets, and responding to collisions with asteroids or other game entities.
Asteroid Class:
  • The asteroid class represents the asteroids that populate the game world. Each asteroid object possesses properties such as position, size, velocity, and rotation. Methods within this class manage asteroid movement, splitting into smaller asteroids upon destruction, and rendering.
Bullet Class:
  • The bullet class defines the behavior and properties of the bullets fired by the player’s spaceship. It includes attributes such as position, velocity, and lifespan. Methods within this class handle bullet movement, collision detection with asteroids, and removal from the game world upon reaching the end of their lifespan or hitting a target.
Collision Detection:
  • A separate module or class is dedicated to collision detection algorithms. This component detects collisions between various game entities, such as player-asteroid collisions, bullet-asteroid collisions, and potentially asteroid-asteroid collisions if asteroids can collide with each other. Implementing efficient collision detection algorithms, such as bounding box or circle intersection tests, is crucial for optimizing game performance.
Game Manager Class:
  • The game manager class oversees high-level game logic and state management. It handles tasks such as initializing the game world, updating game entities, checking for win or loss conditions, and transitioning between different game states (e.g., main menu, gameplay, game over). This class facilitates modularization and separation of concerns, promoting code readability and maintainability.
User Interface (UI) Components:
  • UI elements such as score displays, health bars, and menu screens may be implemented as separate classes or modules. These components interact with the game manager and player classes to reflect changes in game state and provide feedback to the player.

Risk Management and Mitigation

One challenge lies in implementing the collision detection algorithms, especially considering the dynamic nature of objects in the game world. To mitigate this risk, I will allocate time to research and experiment with different collision detection techniques. By prototyping and testing these algorithms early on, I aim to identify the most effective approach and integrate it into the project.

Assignment 4 – UI/UX Reading

“Design of Everyday Things” presents a compelling exploration of the interdisciplinary nature of design and the challenges involved in creating successful products. For me, it emphasized the importance of considering various perspectives, goals, and priorities from different disciplines, such as marketing, engineering, manufacturing, and customer support. In the modern age, where industries increasingly rely on cross-functional collaboration to innovate and deliver products that meet diverse consumer needs, the point that the text makes shine. In today’s fast-paced market, where competition is fierce, understanding and integrating these varied viewpoints is crucial for achieving market success.
Don Norman highlights the significance of user experience and the formation of conceptual models in product design. He underscores the gap that often exists between the designer’s vision and the user’s perception, emphasizing the critical role of the system image in bridging this divide. In our modern digital landscape, where user-centered design principles are paramount, this notion holds particular relevance.
Norman stated many things which I found relevant to myself. One such idea was that designers will often take shortcuts when something is too complex. This reminded me of myself: I am lazy, and if there is a way to do something quicker without too much of a quality sacrifice, I will do it. Interestingly, I also remembered Japanese web design, and how it differs from Western websites. While her in the West, sites are usually as streamlined as possible, Eastern sites often feel cluttered to me, and present a lot of information all at once.

Assignment 4 – Matrix Letters

From this assignment, I took direct inspiration from the Matrix franchise to recreate their famous wall of green symbols.

18 ans plus tard, on connaît enfin la signification du code vert de la ...

At its core, the project consists of two main classes: MatrixSymbol and Stream.

    1. MatrixSymbol Class:
      • Each character falling down the screen is represented by an instance of the MatrixSymbol class.
      • The MatrixSymbol class is responsible for storing properties such as position (x, y), character value (value), speed (speed), and brightness (brightness).
      • Characters are randomly selected from a wide range of Unicode characters, including hiragana and kanji, providing diversity to the falling text effect.
      • The rain() method handles the downward movement of the symbol, ensuring it wraps back to the top of the screen when reaching the bottom.
    2. Stream Class:
        • A stream consists of multiple MatrixSymbol instances, forming a vertical column of falling text.
        • Each stream is generated with a random number of symbols (totalSymbols) and a random speed (speed).
        • The generateSymbols() method populates the stream with symbols, positioning them at random vertical offsets to create a staggered appearance.
        • The render() method displays and animates the symbols within the stream, applying color variation to enhance visual appeal.

      The brightness of each symbol is randomly adjusted, creating subtle variations in color and brightness, adding depth to the visual effect.
      Unicode Character Range: By utilizing a wide range of Unicode characters, including hiragana and kanji, I achieve a diverse selection of symbols.

Challenges:

Ensuring a balanced distribution of hiragana and kanji characters while maintaining randomness posed a challenge. Fine-tuning the character ranges was necessary to achieve a visually appealing mix.
As well, as the number of symbols and streams increases, performance may degrade. Thus it was important for me to write efficient code which would not suffer from performance degradation.

 

 

Assignment 3 – Reading on Interactivity

I found myself pleasantly surprised by the author’s voice throughout the text. This was definitely not something I expected from an academic text. The exploration of the concept of “interactivity” really got me thinking on if my understanding the idea with the text.

I was unsurprised that a fridge was considered interactive. I always assumed that there are definitely different levels to interactivity, and although a fridge would be on the lower spectrum of that, the fact that it is there, and you can do stuff with it make it, like anything else, interactive. Even a rock can be interactive if you put your mind (or muscle) to it.

In the end, I think I disagree with the author’s idea of what interactive is. I don’t think there needs to be two living things for interaction to take place. In fact, even a non-living thing can interact with something living, such as the case for a virus. Even more so, we see interaction between humans and AI on a level which the author’s definition does not account for.

In the end, perhaps the term “interactive” needs some reevaluation in today’s context. Maybe AI stands as the true form of non-human interaction, while everything else falls somewhere on a spectrum between participation and genuine engagement.

Assignment 3 – Fireworks

This project draws inspiration from the visual spectacle of fireworks displays, aiming to simulate the explosive bursts of color and light seen in real fireworks shows.

Overall Concept:
The artwork aims to simulate the vibrant and dynamic nature of fireworks displays. Each burst of particles represents a fireworks explosion, with colorful particles shooting outwards and leaving behind fading trails. The animation creates a mesmerizing display reminiscent of real fireworks shows.

Special Functions:

  1. setup(): Initializes the canvas and sets up the environment for drawing.
  2. draw(): Continuously updates and renders the scene, creating the effect of fireworks bursts.
  3. createParticles(): Generates new particles to simulate fireworks bursts.
  4. updateAndDisplayParticles(): Updates and displays the existing particles, including their movement and trails.
  5. createRandomVector(min, max): Helper function to create a random vector within a given range.
  6. createRandomColor(): Helper function to generate a random color for the particles.
  7. createRandomTrailColor(baseColor): Helper function to create a random trail color based on the base color of the particles.
  8. Particle class: Represents a single particle in the simulation. Includes methods for updating its position, displaying the particle, displaying its trail, and checking if it’s visible within the canvas.

Problems Encountered:

  • Ensuring smooth performance while maintaining a large number of particles.
  • Balancing the appearance of the particles and their trails to achieve a visually appealing effect without overwhelming the viewer.
  • Managing the lifespan of particles and their trails to prevent excessive resource consumption.

Assignment 2 – Reading Response

While watching Casey Reas’s video on chance operation, I found the idea of using chance operation to infuse randomness into an otherwise ridged practice of programing remarkable. Nature is the mother of randomness, so I found the idea of combining randomness and programing to create art compelling.

Casey’s quote, attributing machines as instruments of state control, resonated with me; this perspective was not something I had considered before. The utilization of randomness in creating art emerges as a reaction to the historical backdrop of the second World War. This transformation of machines from tools of control to instruments fostering unique, unpredictable artistic expressions intrigued me deeply. Thus, creating art using randomness is making something of an entirely different nature.

The concept of creating something of an entirely different nature through randomness in art challenges conventional notions. Chance operations in music redefine the boundaries of creativity, offering a departure from the controlled and predictable, emphasizing the individuality of each performance, both for the composer and the listener.

The notion of a book filled with a million random digits struck me as amusing, reflecting the technical constraints of the era it originated from. In those times, it was a necessity to have such a compilation for various applications. However, the landscape of randomness has evolved with the advent of modern mathematics, particularly through the development of pseudorandom functions. This progress has rendered the need for a physical book of a million random digits obsolete.

Amidst the evolution of generating randomness, there are also inventive methods that capture one’s imagination. Personally, I find Cloudflare’s lavalamp wall to be a fascinating and creative approach. The utilization of the unpredictable movements of liquid in lavalamps to generate random data adds a touch of artistry to the otherwise technical realm of randomness. The video highlighted how randomness could be harnessed to create art, but it’s equally fascinating to observe how art, in turn, contributes to the realm of randomness.

Assignment 2 – Rainbow Ripples

For this assignment, I had wanted to create something colorful. I began with a gradient of “pixels” whose color was mapped to their x and y location. This was not enough, so I decided to add a ripple effect. The ripples are their own class and are displayed above the pixel background. I made it so the ripples would have their color be the inverse of the color of the background pixels. The ripples appear based on a random interval and at random locations.

I am particularly proud of my creation of a dedicated class for the ripples, as well as the calculation that takes place within them. I ran into some issues with performance as if too many ripples appeared at once, the program would slow down. I did my best to optimize the calculations and remove any redundant math.

display() {
    for (let i = 0; i < pixelGrid.length; i++) {
      let pixelColor = pixelGrid[i];
      let px = (i % gridSizeX) * pixelSize;
      let py = Math.floor(i / gridSizeX) * pixelSize;
      let distance = dist(px, py, this.x, this.y);
      
      if (distance < this.radius) {
        let inverseColor = color(
          255 - red(pixelColor),
          255 - green(pixelColor),
          255 - blue(pixelColor)
        );
        fill(
          inverseColor.levels[0],
          inverseColor.levels[1],
          inverseColor.levels[2],
          this.alpha
        );
        square(px, py, pixelSize);
      }
    }

More work can certainly be done to further optimize the code, as I understand that drawing pixels on top of already existing pixels is slower than simply modifying their color for the ripples.