Author: Maryam Emaan Fiyaz

Her Code Got Humans on the Moon

Margaret Hamilton’s story is incredibly inspiring and shows the power of resilience and innovation. She didn’t just contribute to the Apollo moon landing; she redefined what software could be, pioneering a field that would become the backbone of modern technology. Her work at MIT’s Instrumentation Lab, where she developed error-detecting and recovery software for the Apollo missions, was groundbreaking. During the Apollo 11 landing, her code prevented mission failure when the guidance computer overloaded, proving the essential role of well-designed software in complex systems.

What’s especially cool is that Hamilton saw the potential of software when others didn’t. She pushed to make it a core part of the mission’s success, even coining the term “software engineering.” Her success in a male-dominated field makes her story even more remarkable, showing how powerful one person’s vision can be. Hamilton’s legacy is a reminder of how perseverance and challenging norms can lead to innovations that change the world. Her work inspires me to approach challenges with the same confidence and creativity.

Norman,“Emotion & Design: Attractive things work better”

Donald A. Norman’s “Emotion & Design: Attractive Things Work Better” presents a fascinating perspective on the link between aesthetics and functionality. Norman argues that attractive designs aren’t just visually pleasing but also improve usability and user experience. He explains that beautiful, well-designed products trigger positive emotions, which, in turn, make users more open to exploring and interacting with them. This positive emotional state even enhances cognitive abilities, helping people think more creatively and handle challenges more effectively. Norman’s insights challenge the traditional view that function alone is enough, showing that emotional responses play a vital role in how we perceive and use everyday objects.

This idea is compelling because it suggests that design impacts not only a product’s usability but also its psychological effect on users. Norman’s argument that beauty can make products “work better” reveals how critical emotional connections are in design. His work is a powerful reminder for designers to consider aesthetics as an essential part of the user experience, not just an afterthought. It’s inspiring to think of design as a bridge between function and emotion, enhancing both user satisfaction and product effectiveness.

Concept:

The game is an arena-style, two-player game where each player controls a snowball. The goal is to either knock the opponent’s snowball (represented by an emoji image) out of the arena or collect three coins. Which ever player gets to three points first wins. A scoreboard is displayed on screen to show each player’s current score and coin count.

Sketch:

User Interaction: 

• The game begins with an instruction screen, requiring user input to proceed.
• Player 1 controls their snowball using the WASD keys, while Player 2 uses the arrow keys.
• Players navigate the arena, collecting coins or attempting to knock their opponent out of bounds.
• The first player to collect three coins or knock their opponent out three times wins.
• Players can choose to start a new session after completing the game.
  

  Implementation: 

• The game has several classes, each of which contributes to different aspects of the experience:

  • Game: This class manages the overall state of the game, including showing screens, handling instructions, tracking game progress, and determining when a round or the game ends.
  • Player: The Player class handles all of the attributes and behavior of each player. This includes movement (based on keyboard input), collision detection, score tracking, and boundary constraints.
  • Arena: The Arena class defines the boundary within which players compete. It is used to detect if a player has fallen out of bounds.
  • Item: The Item class is used to create collectible items (coins). When a player collects an item, it increases their coin count.

  Key features incorporated into the game:

  • Object-Oriented Programming: The game is structured using classes such as Game, Player, Arena, and Item to ensure modular and reusable code.
  • Visuals: The game uses images for players, the background, and items (coins).
  • Sound: Sounds are used for collecting coins and when the game ends.
  • User Input: Player controls are managed using keyboard inputs (WASD and arrow keys).
  • Collision and Boundary Detection: Players can collide with each other, and boundary detection is used to check if players fall out of the arena.
    

    Key Challenges Faced: 

    One of the primary challenges faced during development was handling the collision physics between the players. The snowball collisions had to feel dynamic, but it was difficult to achieve perfect elasticity. The physics calculations were complex, especially considering that each player’s position and velocity had to be updated to reflect an elastic collision.

    Another challenge was optimizing the game so that it could run smoothly in p5.js. Initially, I wanted to incorporate more images and sounds, but p5.js struggled to handle all of the resources, leading to long loading times. Ultimately, I had to simplify the assets to ensure smooth gameplay.

Code That I Am Proud Of: 

I am particularly proud of the resolveCollision() function in the Player class, which handles the collision between players. The function calculates the angle and then applies new velocities to the players to simulate the effect of a collision. This code makes the game feel more dynamic and fun, as players can push each other around the arena.

resolveCollision(other) {
  let dx = other.x - this.x;
  let dy = other.y - this.y;
  let distance = Math.sqrt(dx * dx + dy * dy);

  if (distance < this.radius + other.radius) {
    let angle = Math.atan2(dy, dx);
    let v1 = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
    let v2 = Math.sqrt(other.vx * other.vx + other.vy * other.vy);

    let newVx1 = v2 * Math.cos(angle);
    let newVy1 = v2 * Math.sin(angle);
    let newVx2 = v1 * Math.cos(angle);
    let newVy2 = v1 * Math.sin(angle);

    this.vx = newVx1;
    this.vy = newVy1;
    other.vx = newVx2;
    other.vy = newVy2;

    let overlap = (this.radius + other.radius) - distance;
    let moveX = overlap * Math.cos(angle) / 2;
    let moveY = overlap * Math.sin(angle) / 2;
    this.x = this.x - moveX;
    this.y = this.y -moveY;
    other.x = other.x + moveX;
    other.y = other.y + moveY;
  }
}

This function might not achieve perfect elasticity, but it gives a satisfying collision effect, enhancing the overall player experience.

Reflection: 

Looking back, I am mostly satisfied with how the project turned out, especially given the challenges with collision detection and resource optimization. One thing I wish I could improve is the collision physics—ideally, the collisions would be perfectly elastic, allowing for even more realistic interactions between the players. However, achieving this in a way that felt right with p5.js was more challenging than expected. Despite these challenges, the game is enjoyable and provides a satisfying experience for both players.

Concept:

The game is a simplified and modified version of the mini game snowy spin in the steam game Pummal Party. The game is an arena game in which each player controls a snowball. To win the game, the players will try to knock other players’ snowballs out of the arena or collect coins. Each game will contain 3 rounds. The player who wins two rounds out of three wins the game. There will be a scoreboard displaying the current score and current coin number of each player. 

User Interaction :

1. The game starts with an instruction screen, waiting for user input to begin.
2. Each player controls their snowball using keyboard inputs:
   • Player 1: WASD keys
   • Player 2: Arrow keys
3. Players navigate the arena, collecting items and attempting to knock opponents out.
4. The game consists of 3 rounds, with the winner being the first to win 2 rounds.
5. After game completion, players can choose to start a new session.

Features:

• A snowball class:

Pressing the keyboard applies a force to the ball in the direction of the keyboard control. The ball will accelerate until it reaches maximum speed. When collision between the balls is detected, each ball will move according to the physics of the elastic collision. The ball can collect the items along the path of its movement. The ball will “fall” if the ball is out of the arena.

• A game class:

That will display the arena, the balls, and the items. The arena will be a perfect circle.

• A item class: 

Items are randomly generated around the arena every (possibly) 10 seconds. The players can collect items by moving their balls to the item. 

• Players win a round by knocking the other player out of the arena or collecting 3 gold coins. Players win a game by winning 2 rounds out of 3.

• Background music and/or sound effects of ball colliding and players collecting items 
• Power ups : 
• Increase / Decrease size of snowball 

  Increase / Decrease speed of snowball

  • Coins

Code Design:

1. Snowball Class:
   • Properties: position, velocity, size, player ID
   • Methods: move(), accelerate(), checkCollision(), collectItem()
2. Game Class:
   • Properties: arena, players, items, current round, scores
   • Methods: startGame(), updateGame(), checkWinCondition(), nextRound()
3. Item Class:
   • Properties: type, position, effect
   • Methods: spawn(), applyEffect()
4. Arena Class:
   • Properties: size, shape
   • Methods: draw(), checkBoundaries()
5. Main game loop:
   • handleInput()
   • updateGameState()
   • checkCollisions()
   • drawScreen()
   • playAudio()

Potenial Obstacles:

1. Collision detection and physics
2. Implementing smooth player controls

 

 

Computer Vision for Artists and Designers provides a comprehensive overview of the technology, its history, and its potential applications in the creative field. While the essay highlights the advancements in computer vision, it also acknowledges the limitations and challenges that still exist.

One of the key points emphasized in the essay is the difference between human and computer vision. Humans possess a unique ability to interpret visual information based on context, prior knowledge, and emotional cues. Computers, on the other hand, rely on algorithms and data to process and understand visual data. While computers can excel at specific tasks like object detection and tracking, they often struggle with more nuanced aspects of human perception.

The essay also discusses various techniques used in computer vision, such as object detection, object tracking, feature matching, and deep learning. These techniques have enabled significant progress in fields like autonomous vehicles, medical imaging, and surveillance. However, it is important to note that these techniques are still evolving and may have limitations in certain scenarios.

The intersection of computer vision and art raises interesting questions about the role of technology in creative expression. While computer vision can provide new tools and possibilities for artists, it is also important to consider the ethical implications of surveillance and data collection. Artists should be mindful of privacy concerns and strive to use technology in ways that enhance rather than exploit human creativity.

Concept Overview

The artwork is an interactive experience where users can input words that dynamically appear on the screen. Each word is assigned a color based on its length:

• Blue for words longer than 15 characters
• Pink for words longer than 10 characters
• Purple for words longer than 5 characters
• Dark Blue for words with 5 or fewer characters

The words move around the screen using Perlin noise, creating a smooth and visually appealing effect. A button allows users to stop the movement, freezing the words in their current positions.

Color Palette

Functions Used

• setup():  Initializes the input field, label, and button.
• newText(): Handles the user input, creates a new word object, and assigns it a random position and color based on length.
• draw(): Continuously updates the background and moves the words on the screen.
• Word class:  Defines the properties and methods for each word, including movement and styling.
• toggleMovement(): Toggles the movement of the words on and off.
• windowResized(): Adjusts the positioning of elements when the window is resized.

CODE

 

 

Challenges Encountered

• One major challenge was ensuring that words did not overlap when placed on the screen. I initially struggled to implement checks that would prevent new words from colliding with existing ones, especially near the input text box.
• Another challenge was optimizing the use of Perlin noise to create a natural movement without making it too erratic.

Improvements for Future Work

In future iterations of this project, I would like to implement a collision detection system that ensures newly placed words do not overlap with existing words or the input text box. This would enhance the overall user experience and visual organization of the artwork.

Don Norman’s “The Psychopathology of Everyday Things” presents compelling principles for effective design, emphasizing the importance of discoverability, understanding, and human-centered approaches. As I reflect on these concepts, I’m struck by how often I encounter poorly designed objects in my daily life.One item that particularly frustrates me is the standard TV remote control. Despite being a common household device, many remotes are poorly designed and frustrating to use. They often have far too many buttons, many of which are rarely used. Frequently used buttons like volume and channel controls are often not prominently placed. Using a remote in low light is challenging due to lack of illumination, and many buttons have cryptic labels or icons. Applying Norman’s principles, this device could be vastly improved by reducing the number of buttons, prioritizing essential functions, adding backlit buttons, and using clear, intuitive labeling. These changes would enhance both discoverability and understanding, ultimately improving the user experience.

When considering how Norman’s principles can be applied to interactive media, several key areas come to mind. Visibility and feedback are crucial in digital interfaces, where users need clear indications of what actions are possible and immediate responses to their inputs. For example, in a mobile app, important functions should be easily discoverable through prominent placement or intuitive icons. Feedback could be provided through animations or haptic responses, confirming user actions. The principle of constraints is particularly relevant in interactive media, where guiding users through complex processes is often necessary. This could be implemented through progressive disclosure of features or contextual help systems. Additionally, maintaining consistency across different sections of a digital product and adhering to established design patterns can significantly enhance usability. By focusing on these human-centered design principles, interactive media can become more intuitive, efficient, and enjoyable to use, ultimately leading to better user experiences and increased engagement.

Overall Concept

The goal of my artwork was to create a trippy, mesmerizing experience by combining a grid background with a ripple effect triggered by mouse clicks. The ripples grow from the point of the click, creating an expanding circle that contrasts with the static electricity-like grid in the background. The artwork plays with randomness in both the grid’s colors and the ripple’s growth, making each frame visually unique. By using Object-Oriented Programming (OOP), I was able to structure the code cleanly and efficiently manage multiple ripple effects simultaneously.

Code Breakdown

1. Object-Oriented Programming with the Rippler Class
   The ripple effect is generated using a class called Rippler. Each time the user clicks on the canvas, a new ripple is instantiated at the mouse position. The class allows each ripple to grow over time, giving the illusion of waves expanding across the grid.
2. Arrays for Storing Objects
   I used an array to store all the Rippler objects so that multiple ripples can be drawn and expanded at once. This approach also allows for scalable complexity, as the number of ripple effects grows depending on user interaction.
3. Grid Background Functionality
   I created a function, drawgridColors(), to generate a background grid. Each square in the grid is assigned a random color from a predefined set. The randomness, combined with the small size of each square, gives the grid a look similar to static electricity.

Favorite Part of the Project

My favorite part of this project was building the background and giving it a static electricity kind of look. Although it wasn’t too difficult, the way the grid feels alive with random colors constantly changing adds a nice touch. The following snippet was key to achieving this effect:

for (let i = 0; i < height / size; i++) {
  for (let j = 0; j < width / size; j++) {
    let colorIndex = int(random(possibleColors.length)); 
    let thisColor = possibleColors[colorIndex]; 
    fill(thisColor); 
    noStroke(); 
    rect(i * size, j * size, size, size); 
  }
}

I enjoyed how simple it was to achieve this effect by filling the grid squares with random colors, yet it visually complements the dynamic ripples on top.

Inspiration and Future Improvements

My inspiration for this artwork came from the desire to create something that would be visually captivating and somewhat hypnotic, giving a trippy experience for viewers. I wanted the ripples to feel as though they were interacting with the chaotic, staticky grid background.

For future improvements, I’d love to make the project more interactive. For instance, I could implement different types of ripple effects or allow the user to control the grid colors or the ripple speed through keyboard input. This would enhance the trippiness and interactivity of the piece.

Challenges and Problem-Solving

One challenge I ran into was ensuring the grid and the ripples didn’t conflict visually, especially since both involve overlapping elements. Adjusting the grid size and ripple speed helped balance the visuals.

Another issue was managing the frame rate. I needed the grid to update slowly while allowing the ripples to grow at a faster pace. By setting a lower FrameRate  and controlling the ripple speed manually in the Rippler class, I was able to solve this.

 

 

Based on Chris Crawford’s “The Art of Interactive Design,” a strongly interactive system should be responsive, intuitive, engaging, personalized, and provide meaningful feedback. It should react promptly to user input, be easy to understand and use, encourage active participation, adapt to individual preferences, and offer informative feedback.

To improve user interaction in my p5 sketches, I will incorporate dynamic elements, provide interactive controls, personalise experiences, provide meaningful feedback, and tell a story. By introducing elements that respond to user input, offering intuitive controls, allowing users to customize their experience, giving clear and informative feedback, and creating a narrative to guide the user’s experience, I can create more engaging and interactive p5 sketches.

Reas’s exploration of chance operations in art, particularly in digital art, is both inspiring and thought-provoking. His work, such as “Process 18” and the cancer cell artwork, demonstrates the potential of randomness to create visually engaging and conceptually interesting pieces.

While I appreciate the potential of randomness to spark creativity, I remain skeptical about its role in creating truly meaningful art. I believe that artistic expression should be more intentional and controlled to ensure that the work conveys a clear message or evokes a specific emotional response.

Furthermore, chance-based methods can have limitations, such as the potential for repetitive or uninteresting outcomes. It’s essential to use these techniques strategically and thoughtfully to avoid creating work that lacks depth or meaning.

In my own work, I plan to incorporate randomness in a controlled manner. For example, in my second assignment, shape spiral, I incorporated randomness into my code, by randomizing the color and the shape displayed.

Concept

For this piece, I was inspired by Casey Reas’ Eyeo talk on chance operations. I wanted to explore randomness by creating a dynamic, ever-evolving spiral pattern of shapes, where both the number of sides and the colors are randomized. The randomness adds an element of surprise, making the artwork feel more organic and unpredictable. I also referenced this guide for parts of the code, particularly for drawing the shapes using vertex points.

Code Highlight

One part of my code that I’m particularly proud of is how I used the random() function to generate shapes with random sides and colors. This randomness brings variety and excitement to the piece:

// Randomize the number of sides for the shape (between 3 and 7)
let numsides = floor(random(3, 8));

// Randomize the color of the shape 
let shapeColor = color(random(255), random(255), random(255));
fill(shapeColor);  

This part ensures that each shape in the spiral is unique, giving the piece a playful and dynamic feel.

Embedded Sketch

 

Reflection and Future Improvements

While I’m happy with how the randomization and spiral pattern turned out, there are several ways I could improve this piece. For example, I could make the sketch more interactive by allowing users to control certain parameters, such as the speed of the spiral or the size of the shapes. Another potential improvement would be to add sound elements that react to the shapes or colors, making the piece more immersive.