Author: Ivan Sidorenko

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.

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.

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.

“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.

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

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

1. 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.

 

 

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.

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.

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.

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.

My initial idea was to make a simple self-portrait however after playing around with the options p5 provides, I settled on using 3D shapes to complete my project.

I quickly realized that making a human head would look very odd and uncanny in 3D, so instead I chose to make an animal, specifically a chimp, as it was easier to abstract it into basic shapes.

Most of the structure is composed of ellipsoids. Ellipsoids offered me the most amount of options. Alternatively, I considered using custom geometry however that proved too difficult to create. I also considered using Bezier curves for certain shapes, but the same issue of complexity, as well as their limitation of being exclusively a plane discouraged me from pursuing that route.  To shorten the code, I encapsulated the process of drawing an ellipsoid into it’s own function.

  // Function to draw ellipsoid with specified colors
  function drawEllipsoid(rx, ry, rz, fillColor, translateParams) {
    fill(fillColor);
    push();
    translate(...translateParams);
    ellipsoid(rx, ry, rz);
    pop();
  }

I am happy that I was able to add directional lighting. Without the lighting, I had to display the wireframe of the shapes which made the project look unpolished.

There are many improvements I can make, like tweaking the proportions of the shapes. I really wanted to add a texture file for the fur of the monkey, but I couldn’t figure out how to make it compatible with an online compiler.