Author: Maryam Almatrooshi

The reading “Her Code Got Humans on the Moon—And Invented Software Itself” delves into the life of Margaret Hamilton and how she invented software at a time when women were not seen in this type of field. Reflecting back, I was quite surprised how Robert McMillan, a male writer, wrote this pro-feminist reading. If a female wrote this, there might have been a suspicion of biasness. I particularly remember when McMillan mentions how Hamilton often brought her daughter Lauren to work. This made my appreciation for Hamilton increase tenfold since women were already seen less in the workplace, let alone women who were also mothers. One part that slightly annoyed me was when they weren’t listening to Hamilton’s advice on what to do with the error in the program. I believe there may have been misogynistic behavior in play here as they didn’t want to believe a woman would point out their mistakes. This reading also made me contemplate how I used to focus only on the end result and not on the painstaking process that brought the result. I used to focus on how the first man landed on the moon and not who was the reason he was able to land on the moon. I now question several incidents where I only knew the end result, like the discovery of gravity, the creation of vaccines, and several other phenomena where the creators were not credited.

The reading “Attractive Things Work Better” delves into the role our emotions play in our cognitive function and problem-solving abilities. It argues how humans are able to use machines and other systems more accurately if they are attractive to the eye. While I believe something attractive certainly creates a better mood which enables people to solve things more easily, I don’t believe that this works in every scenario. For instance, they probably failed to take into account that some people may already be in a bad mood or a good mood before using the machines. They could also already be accustomed to the machines or just using them for the first time. Similarly, certain gadgets like mobile phones will probably not impact someone’s mood in itself, but rather only from the content displayed on their screens. I remember this reading particularly talked about the Mini Cooper which is a popular car and they associated it with putting people in a good mood. However, it failed to take into account that while this car may look appealing to some, it may not be for others as everyone has different tastes. As a result, several factors are in play here rather than just the aesthetic appeal of the devices and gadgets.

These readings delve into the discovery of systems or thoughts that would change the way we view the world. Hamilton discovered software engineering and was the reason humans were able to land on the moon. Similarly, Masaaki Kurosu and Kaori Kashimura discovered the impact of emotions on functionality. Both these readings also reveal how there is always going to be someone who doesn’t believe in your theory. You just have to prove them wrong.

Concept and Artistic Vision

I’ve always been captivated by the world of arcade games, especially those that revolve around cars and racing. My love for these games and my fascination with car races reached a peak this year when I watched the exhilarating “Gran Turismo” movie. When it came time to choose a topic for my midterm project, my passion for cars led me to one clear path: creating a car-related game.

Drawing from my experience in an “Introduction to Computer Science” course during my freshman year, where I had to create a game using Python’s Processing library, I decided to explore the world of programming languages more deeply. However, I quickly realized that working with JavaScript, especially in the context of p5.js, was a different ballgame altogether. My quest for inspiration led me to various online car racing codes, but none of them truly excited me. This realization prompted me to embark on a journey to create something truly unique and personal, drawing on my own ideas and designs. Below is an image of my old car game project using Python:

Coding Translation, Logic, and Planning

As I delved into writing the code for my car game, I drew on the knowledge I gained in my class. I leveraged concepts such as shapes, loops, functions, arrays, generative text, loading images, and audio, and even delved into computer vision using the webcam. The experience was a blend of creativity and coding, and I began by sketching my final draft to visualize each aspect of the game. Here’s a glimpse of my sketch:

To truly make my game unique, I decided to create my own designs for every element. I used a familiar tool, “Scratch,” which I had used during my high school years, to sketch my own cars, roads, titles, and more. Here are some of my sketches and how they look in the game:

With all the designs in place, I embedded them into the code and used arrays to store them efficiently. One feature I’m incredibly proud of is the ability to take a picture of the player and place it in the top left corner of the game. This concept was inspired by my experience with arcade games that would capture a photo of the player’s face and display it in the game, making it clear who was in control. This added an engaging and visually fascinating element to the game.

Gameplay and Features

The game starts with a set of basic instructions on how to play. Players use the arrow keys to control their car. The objective is to avoid collisions, as any contact with another object or car leads to a game over. Additionally, players must manage their fuel levels, as running out of fuel also results in a game over.

There are three exciting levels to the game, each offering a unique experience:

1. Easy Mode: This is the regular mode where the game is a continuous loop, and it doesn’t end until the player loses.
2. Hard Mode: In this mode, I’ve introduced a unique twist. The car moves backward, and the gameplay occurs in the dark, adding an extra layer of challenge and excitement.
3. Race Mode: This is a newly added feature where players have a target to reach. It’s not an infinite or continuous loop; instead, the goal is to reach a score of 100 to win the game. It’s an engaging mode that introduces a winning target to the gameplay.

Here is my Final Project Embedded Sketch

Edit Link

Parts to be Proud Of and Overcoming Challenges

One element of my code that I’m particularly proud of is the intricate logic for bot generation, movement, and collision detection. The player’s car movement and its interactions with the street and gasoline collection also added a layer of excitement to the project. Here’s a snippet of the code that demonstrates this achievement:

//Cars
function bots() {
  // Set the initial position of the bot randomly within the canvas.
  this.pos = createVector(random(0, width), random(-size * 10, -size * 100));
  // Set the size of the bot (width and height).
  this.r = createVector(size * 5, size * 8.5);
  // Set the initial sprite for animation.
  this.sprite = 0;
  // Set a timer for sprite animation.
  this.time = 0;
  // Set a random color for the car.
  this.c = createVector(
    floor(random(0, 2) * 175),
    floor(random(0, 2) * 175),
    floor(random(0, 2) * 175)
  );

...

    // Check for collision with the player.
    if (
      p.pos.x - p.r.x / 2 < this.pos.x + this.r.x / 2 &&
      p.pos.x + p.r.x / 2 > this.pos.x - this.r.x / 2 &&
      p.pos.y - p.r.y / 2 < this.pos.y + this.r.y / 2 &&
      p.pos.y + p.r.y / 2 > this.pos.y - this.r.y / 2
    ) {
      // Play a sound when a collision occurs and set the screen to 2.

      songs[1].play();
      screen = 2;
    }
  };
}

...

// Gasoline object constructor function.
function Gas() {
  // Set the initial position of the gasoline randomly within the canvas.
  this.pos = createVector(random(0, width), random(-100, -2000));
  // Set the size of the gasoline (width and height).
  this.r = createVector(30, 40);

  // Render function for drawing the gasoline on the canvas.
  this.render = function () {
    push();
    translate(this.pos.x, this.pos.y);
    image(botsIMG[2], -this.r.x / 2, -this.r.y / 2, this.r.x, this.r.y);
    pop();
  };

  // Update function for updating the gasoline's position and behavior.
  this.update = function () {
    //Mode = 1
    if (mode == 1) {
      //Move
      this.pos.y -= vel / 100;
      if (this.pos.y + this.r.y / 2 < 0) {
        this.pos = createVector(
          random(0, width),
          random(width + 100, width + 2000)
        );
      }
    } else {
      //Mode = 0
      //Move
      this.pos.y += vel / 100;
    // Reset the gasoline's position if it goes off the screen vertically.
      if (this.pos.y - this.r.y / 2 > width) {
        this.pos = createVector(random(0, width), random(-100, -2000));
      }
    }

    // Check for collision with the player.
    if (
      p.pos.x - p.r.x / 2 < this.pos.x + this.r.x / 2 &&
      p.pos.x + p.r.x / 2 > this.pos.x - this.r.x / 2 &&
      p.pos.y - p.r.y / 2 < this.pos.y + this.r.y / 2 &&
      p.pos.y + p.r.y / 2 > this.pos.y - this.r.y / 2
    ) {
            // Play a sound, increase the gas, and reset the gasoline's position.

      songs[0].play();
      gas += 100;
      this.pos = createVector(random(0, width), random(-100, -2000));
    }

// Declare global variables to hold video capture and image data
let video;
var img;

//Picture setup
function pictureSetup() {
  video = createCapture(VIDEO); // Create a video capture element and assign it to the 'video' variable

  video.size(size *40, size *40);
  video.hide();
}
// Capture a snapshot from the webcam and assign it to the 'img' variable
function picture() {
  //Set image webcam
  img = video.get();
}

What’s New!

Enhanced Menu Section

Since the first draft, I’ve implemented several exciting features to enhance the gameplay. The first notable change is in the game’s menu section. In the initial version, the game started with a simple spacebar press. Now, when you launch the game, you’re greeted with a pixelated title, instructions, and a sleek “Start” clickable button. All the text elements were crafted using a pixel font, giving the game a retro aesthetic.

Enhanced Car Controls

Once you’re in the game, you’ll notice significant improvements in the player’s car control. Your car can now move in various angles when turning left or right, offering a more immersive driving experience. You also have the freedom to move forward and backward, giving you complete control of your vehicle.

Here’s a code snippet showcasing how the player’s car rotates as you turn left and right:

// Function to handle player movement based on keyboard input.
this.move = function() {
  // LEFT
  if (keyIsDown(LEFT_ARROW)) {
    this.pos.x -= this.vel;
    if (this.a > -0.3) {
      this.a -= 0.05; // Adjust rotation speed here.
    }
  } else
  // RIGHT
  if (keyIsDown(RIGHT_ARROW)) {
    this.pos.x += this.vel;
    if (this.a < 0.3) {
      this.a += 0.05; // Adjust rotation speed here.
    }
  } else {
    // If the player isn't turning left or right, set the angle to 0.
    this.a = 0;
  }
}

Redesigned Bot Cars

I decided to revamp the bot cars and made slight design changes, all achieved using a pixel art style created with the help of the “Scratch” platform. These unique car designs add character to the game and create a visually appealing racing environment.

Fuel Management

One of the exciting new features I’ve introduced is fuel management. As you play, you must keep an eye on your fuel level. Collecting randomly placed fuel pickups in the game replenishes your fuel. If you neglect to refuel your car, the game ends. This adds an extra layer of challenge and strategy to the gameplay.

Improved Game Over Options

When you want your racing adventure to end, you now have two options to start over. Clicking the “Menu” button takes you back to the main menu, eliminating the need to crash into another car to restart the game. However, if you prefer the classic way, colliding with another car still ends the game, displaying your score and a “Game Over” message right after it.

Unique Self-Crafted Pixel Art

I’ve infused a touch of creativity into every detail of my game, meticulously crafting all the visuals using the Scratch platform. From the charming car designs to the captivating game titles, I’ve poured my artistic flair into each element. These pixel art creations add a unique and nostalgic appeal to the game, promising players an engaging and visually delightful experience. Below, you’ll find a selection of these original designs that contribute to the game’s distinct charm.

Edit Link

Concept and User Interaction

Concept: The inspiration for my current project stems from a previous experience in an “Introduction to Computer Science” course, where I was tasked with creating a game using the Processing library in Python. This immersive experience not only kindled my passion for game development but also became the driving force behind my current endeavor. Inspired by this journey, I set out to create an entertaining 2D car racing game called “Street Crash”. The core idea is quite straightforward: players take the wheel of a virtual car and must deftly navigate it along a bustling road while skillfully avoiding collisions with other cars. The final goal is to achieve the greatest possible score while retaining control and avoiding accidents.

User Interaction: I’ve given considerable thought to the user experience in my game. I created an intuitive interaction approach to ensure that players find the game accessible and entertaining. This is how it works:

• Player Control: Players can easily steer their car using the arrow keys. The left arrow key initiates a left turn, while the right arrow key guides the car to the right.
• Game Start: A simple and universally recognized action ‘pressing the spacebar’ kickstarts the game. This design choice makes it easy for players to begin their adventure.
• Game Restart: After a game over, players can swiftly get back into the action by pressing the spacebar again.

Classes and Functions

• Player Class (player): This class takes care of everything related to the player’s car, including its position and movement. Here’s a snippet of the code:

function player() {
  // Define properties and methods for the player's car
  this.pos = createVector(width / 2, height - 100);
  this.r = createVector(40, 60);

  // Render the player's car
  this.render = function () {
    // Drawing code for the player's car
    // ...
  };

  // Update the player's car position
  this.update = function () {
    // Logic for updating player's car position
    // ...
  };
}

• Street Class (street): This class represents the road that the player’s car travels on, including its movement.
• Cars Class (cars): This class manages the spawning, movement, and collision detection of other cars on the road.
• Keys Function: The keys function responds to arrow key input for controlling the player’s car.

Embedded Sketch

Tackling Complexity: Collision Detection

The collision detection system is without a doubt one of the most complex aspects of this project. It is critical to the game’s fairness and enjoyment that collisions are detected and handled reliably. To reduce the risk associated with this complexity, I’ve carefully implemented the collision detection algorithm. This method determines if the player’s car and other cars cross on both the X and Y axes, taking into account the cars’ size. In the event of a collision, the game ends, and the player is given the option to restart.

Edit Link

The article “Computer Vision in Interactive Art: A Survey,” by Golan Levin, provides a comprehensive exploration of the use of computer vision in interactive art. Levin’s article is a rich source of insights into the intersection of art, technology, and computer vision.

One crucial key takeaway, from this reading is that computer vision algorithms are not one-size-fits-all solutions. They heavily depend on the context and specific assumptions about the real-world video scenes they analyze. This resonates with my understanding of technology in art emphasizing the need for artists and designers to consider the conditions and limitations of their chosen environment carefully. The article highlights the significance of optimizing these factors to enhance the effectiveness of computer vision systems. It’s fascinating to observe how approaches, like using materials or specialized lenses can improve tracking and detection reliability.

Moreover, the article discusses how computer vision is becoming more accessible through user-authoring tools and multimedia environments such as Processing, Director, and Max/MSP/Jitter. These tools empower artists and designers to experiment with machine vision techniques if they have limited programming experience. This aligns with my belief that technology should be available to an audience encouraging creativity and innovation.

However, concerns are raised in the article regarding biases in computer vision algorithms, particularly identity recognition or gesture analysis. As these algorithms become increasingly intertwined with facets of our existence it is crucial to thoroughly analyze and address the ethical implications to avoid any unforeseen outcomes. 

Concept

I was inspired by my love for the beach and how it resonates peace and calmness within me. So, I decided to create a digital representation of a tranquil beach scene at night. The idea was to capture the essence of the ocean waves, a crescent moon, and embed generative text that represents the soothing and rhythmic nature of the waves. For the generative text, I chose lyrics from the song ‘Waves’ by Mr. Probz, as it perfectly encapsulates the feeling of being by the ocean, and it’s a song that holds personal significance to me.

Highlight of the Code

One particular aspect of the code that I’m particularly proud of is how I created the wave-like motion for the generative text. Specifically, the following block of code:

let waveOffset = sin(frameCount * waveSpeed) * waveAmplitude;
  xPosition += direction * 1; // here we can adjust the speed (horizontally)

  // Reverse direction when text goes off-canvas
  if (
    xPosition > width + textWidth(myString) ||
    xPosition < -textWidth(myString)
  ) {
    direction *= -1;
  }

  // Draw the characters of myString with wave motion
  for (let i = 0; i < myString.length; i++) {
    let myChar = myString.charAt(i);
    
    // Calculate the horizontal position for each character
    let x = xPosition + textWidth(myChar) * i;
    
    // Display each character of myString with vertical wave-like motion
    text(myChar, x, yPosition + waveOffset);

This code combines the use of “sin()” to create a smooth wave effect and dynamic movement of the generative text as it moves horizontally across the canvas. It seamlessly simulates the rise and fall of ocean waves, adding a captivating visual element to the scene.

Reflection/Improvements

Creating this beach scene with generative text has been an engaging journey where I combined my passion for art and coding to express a personal connection with nature and music. For future improvements, I envision extending the project by incorporating interactive elements, different times of day, realistic sound with the song ‘Waves’ playing, and user customization of lyrics. These improvements would create a more immersive and user-friendly experience, making the artwork more fascinating and interactive for viewers.

Edit Link

Update: 2 October 2023

I wanted to share an update on this assignment! As mentioned in my class presentation, I was initially working on creating a digital representation of a tranquil beach scene with generative text that captures the soothing essence of ocean waves. However, due to time constraints, I was unable to achieve the exact wave-like motion I had envisioned for the generative text before the submission deadline.

But, I didn’t give up on my assignment. I continued to work on it, digging deeper into the code and experimenting with different techniques. After some additional research and coding, I finally figured out how to make the generative text move in a wavelike motion, just as I had initially planned.

Initially, the text was moving as a straight sentence going up and down in motion. However, with the new update, I have successfully implemented the wave-like motion, simulating the rise and fall of ocean waves. I’m incredibly proud of how it looks now, and I believe it truly captures the essence of the beach scene I aimed to create.

here is a snippet of the edited code:

// Draw the characters of myString with wave motion
for (let i = 0; i < myString.length; i++) {
  let myChar = myString.charAt(i);
  
  // Calculate the horizontal position for each character
  let x = xPosition + textWidth(myChar) * i;
  
  // Calculate the vertical position with wave-like motion
  let y = sin(frameCount* waveSpeed + i * waveAmplitude + waveOffset) * 5; 
  
  // Display each character with vertical wave-like motion
  text(myChar, x, yPosition + y * 3);
  
  // Display each character of myString with vertical wave-like motion
}

Here is the final result:

Don Norman’s first chapter, “The Design of Everyday Things,” sheds light on the complicated world of design and its tremendous impact on our daily lives. As I reflect on the reading, several key points and questions come to mind.

The importance of user-centered design is emphasized by Norman. He contends that excellent design should prioritize the wants and expectations of users, which makes perfect sense. However, this raises a question: How often do designers genuinely consider the end users when creating products? This might be a huge difficulty in a world where firms may prioritize money or aesthetics over usability.

The example of the refrigerator’s temperature controls struck a chord with me. It made me think about how frequently I’ve faced similar problems with common things, leaving me upset due to a lack of clear design. This experience has made me more appreciative of well-designed products and less forgiving of those who prioritize aesthetics over usability.

Norman’s idea of conceptual models and their misalignment with the system image is compelling. Users clearly form mental models of how things work based on their interactions and experiences. However, usability challenges arise when these models clash with the actual workings of a product. This approach has made me realize how important it is for designers and users to communicate clearly and consistently.

In terms of bias, while Norman appears to advocate for user-centered design, it does not appear to be inherently biased. Instead, it appears as a call for a more balanced and thoughtful approach to design.

Based on the content from “The Art of Interactive Design” by Chris Crawford, the author examines the concept of interactivity and its definition. He argues that interactivity should be characterized as a conversation between two actors who alternately listen, think, and talk. He emphasizes the significance of all three components (hearing, thinking, and speaking) in the interactive process, implying that excellent interactivity requires each person to perform these processes effectively. The author also distinguishes between interactivity and reaction, emphasizing that true interactivity requires two actors to engage in a cyclic process.

Reflecting on the reading, I find the author’s definition of interaction to be both interesting and useful. His emphasis on the three fundamental components of interactivity – hearing, thinking, and speaking – aligns with the notion that effective communication requires engagement from all parties involved. This perspective aligns with what I believe that meaningful interactions, whether in human-to-human or human-computer interfaces, require a reciprocal exchange of information and ideas. The author’s difference between interactivity and reactivity raises concerns about the depth and quality of interactions in various circumstances, leading me to investigate how genuine interactivity may be achieved.

In terms of bias, the author does not appear to be biased in this work. He expresses his concepts and ideas clearly and uses examples to back up his point. The reading did not greatly alter my opinions, but it did emphasize the significance of addressing all aspects of interaction, especially in design and communication. It makes me think about the function of interactivity in many technical and communication contexts, as well as how it may be enhanced for better user experiences. The reading also raised concerns regarding the practical application of interactivity and the difficulties that come with building truly interactive systems.

Concept

The concept behind “Collecting Falling Bricks” was to recreate a nostalgic gaming experience from my youth where players control a vibrant block using the right and left arrow keys. The game revolves around the simple yet addictive task of collecting falling grey bricks. As you collect these bricks, your score gradually increases, prominently displayed on the canvas’s top left corner. The game is designed to be endless, allowing players to collect as many bricks as they desire without facing a game-over scenario.

Highlight of the Code

One of the code highlights that I’m particularly proud of is the implementation of the continuous gameplay loop. This loop ensures that new falling bricks are introduced at regular intervals, maintaining an engaging pace and preventing the game from becoming too static. Below is a snippet of the code responsible for this:

// Continuous gameplay loop
setInterval(() => {
  objects.push(new FallingObject());
}, 1000);

Reflection/Improvements

Creating this interactive game art was an exciting journey for me as I combined my creativity and coding skills. For future work, I envision adding a new layer of challenge to the game. Instead of an endless loop, I plan to implement a game-over mechanism that will test players’ skills and add excitement to the gameplay. When a player misses collecting a brick, they would start the game anew, providing a sense of accomplishment and motivation to improve their score.

Edit Link

The video explores the idea of randomness as a key component of computer programming and generative art. It uses a variety of illustrations to emphasize how randomness has the creative capacity to turn ordered systems into chaotic but visually appealing compositions. One of the standout demonstrations in the video is the progression from an ordered grid to increasing levels of deviation. This progression clearly shows how adding randomness can disrupt a well-defined pattern and eventually result in what appears to be chaos. This exploration raises questions about the delicate balance between order and chaos in artistic creation. It makes people stop and think about how controlled randomness can be used to create aesthetically appealing and unpredictable results. Additionally, the presentation highlights the significance of symmetry in understanding random patterns. By adding symmetry to a seemingly random grid of squares, the video reveals how our brains are wired to recognize familiar shapes and patterns even within randomness. This finding emphasizes how human perception and randomness interact deeply in art and design.

Regarding bias, it’s essential to note that the presentation seems to be focused on showcasing the creative potential of randomness rather than advocating for a particular viewpoint or agenda. The author appears to be impartial in their exploration of randomness as a creative force in generative art. As for changing beliefs, this presentation reinforces the idea that randomness can be a valuable tool for creativity, challenging the notion that art and computing must always follow rigid, predefined patterns. It prompts questions about the balance between structure and randomness in artistic expression and how these concepts can be leveraged in various creative processes. Personally, I think it’s fascinating how randomness can make art more interesting and exciting. It’s a reminder that not everything has to be perfectly planned, and sometimes, a little randomness can make things better.