Reading Response 8A

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

My personal view of design when it comes to applications/ websites goes deep into the particular balance of design and practicality and I think the author does an amazing job with explaining that concept. I believe the whole conceot of desin is completely objective where it depends on a person’s preference. One recent debate I have seen spread throughout social media is whether makeup brands fit their brand’s aesthetic or not on their website. The main brand that is talked about is Ariana Grande’s R.E.M. Beauty where many people argue that the website lacks aesthetic, whereas it is compared to other beauty brands like Apothecary 87 and KKW Beauty. This just shows the importance of design and how its existence is crucial.

Midterm Project – NewJeans’ Escape

Concept

Something I always love talking about is my obsession with music. I love collecting cassette tapes, vinyl records, and CDs. I ensure everyone knows about this because I find it so cool. Among the thousands of artists I listen to, only a couple stick out, and among these artists is NewJeans, a group that is made up of 5 members. in 2023’s July, NewJeans made a comeback after almost six months of releasing no music. With that came my all-time favorite music video of theirs, where they collaborated with Cartoon Network’s PowerPuffGirls, called NewJeans by NewJeans. This song is a testament to the creativity and unique musical style that NewJeans is known for. Its distinctive arrangement and innovative lyrics, along with the exciting collaboration, made “New Jeans” another successful hit for the group.

In this music video, there’s a particular scene where the girls are turned into a video game. When I heard that I would be able to make a game-like sketch for my midterm project, my mind immediately went to that scene. Of course, at first, I wanted to make more of something that resembles one of my favorite arcade games, Dance Dance Revolution, but after I spent countless hours trying my hardest to make it work, I just stumbled into too many obstacles that made me realize that I would not have the time to figure it out. So, I went back to my previous idea: To use the concept from the music video. However, I wanted to get creative with the structure of it. I decided to go with a “Choose your Character” title screen, which seemed to be the most crucial part for me. Then for the actual playing part, I wanted their song to be a part of it, so I made it so that the player could win solely by surviving the flying obstacles for the entirety of the song.

Check out the music video!!

 

This is the part of the music video I was inspired by:


Design

Since the character designs were already avaliable, I did not have a hard time picking the character design. However, I could not find a high quality PNG of the charactes so I had to retrce it but it was not challenging at all.

Challenges

Putting NewJeans’ Escape together forced me to face many challenges:
  1. The “Choose Your Character” Disaster: This was primarily the most significant part of the whole game for me. I was really passionate about this, and I would not continue if it had not worked. After countless hours of searching online and watching useless YouTube videos, I turned to ChatGPT, who taught me to use an Index, which I am very, very proud of myself for getting the hang of. I used the mouseClicked(); function to check the position of the mouse and which character it corresponds to and I stored that character into a variable i named “characterIndex” which displays in the ‘play’ state and once the player chooses the character, the game state will change to ‘play’.

I’m very proud of myself for getting it figured out.

// Function to handle mouse clicks
function mouseClicked() {
  if (gameState === "start") {
    // Check if mouse click is on a character
    for (let i = 0; i < 5; i++) {
      if (mouseX > (width / 5) * i && mouseX < (width / 5) * (i + 1)) {
        characterIndex = i; // Set selected character
        gameState = "play"; // Change game state to play
        break;
      }
    }
  }

 

2. The Time Loss Incident: “I just wanted a timer to be displayed at the top right of the screen. Is that too much to ask?” said Rashed as he was on the brink of quitting. Having a timer that would countdown with the song, for some reason, was not cooperating with what I wanted to do. I wanted to directly connect it to the music to have it automatically calculate when the music would start and countdown till its end, but I could not figure it out. I decided to code the timer separately instead of figuring that out and that’s what I did. It turns out this was the most straightforward way, and I wish I had thought of this before where I had two variables, “timeLeft” and “long duration,” which both equal 108 (The duration of the song in seconds), and had them decrease by the current time of the song.

Very proud of myself for not giving up.

// Display remaining time
timeLeft = songDuration - song.currentTime();
let minutes = Math.floor(timeLeft / 60);
let seconds = Math.floor(timeLeft % 60);
let timeString = nf(minutes, 2) + ":" + nf(seconds, 2);
textAlign(RIGHT);
text("Time: " + timeString, width - 10, 30);

 

3. The Collision Colliding Collision: The only thing I wanted was for when the objects hit the player, lives would decrease, but in so many tries, for some reason, it would not work well. No matter hoe many times I try, nothing would work. until I found the miracle of the dist(); function. The function calculates the distance between two points. The coordinates(obj.x + 75, obj.y + 50) represent the center of the current object (adjusted for its size, this was torture). The coordinates(80, characterY + 30) represent the center of the character (adjusted for its size, torture part. 2). This means that if the distance is less than 30 pixels (which represents a collision radius), it means the object and the character have collided.

 

objects.push(createObject());
 }
 for (let obj of objects) {
 obj.x -= objectSpeed; // Move object from right to left
 // Draw the object (evil bunny)
 image(evilBunny, obj.x, obj.y, 150, 100);

 // Check collision with character
 if (dist(obj.x + 75, obj.y + 50, 80, characterY + 30) < 30) { 
   lives--; // If collision happens, decrease lives
   objects.splice(objects.indexOf(obj), 1); // Remove object

 

The Game

FullScreen Link

 

Overall

I am very, very proud of myself and very happy with how this turned out. I hope to continue working on my skills, and one day, I could code a rhythm game.

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:

Reading Reflection #4

Don Norman presents a key idea in “The Design of Everyday Things,” which is feedback in design. According to Norman, feedback is a means of informing the user of the outcomes of an action. He uses commonplace examples to demonstrate this, such as sitting at a traffic light without seeing any indication that the system has spotted your automobile, or pushing buttons on an elevator without knowing if the elevator is on its way. This idea emphasizes how crucial it is to provide users with prompt, understandable feedback so they may be assured that their action has been recorded and is being handled. Ineffective feedback can cause consumers to feel doubtful, angry, or confused, which can make them dislike the system or product.

When I think about it, this idea has really changed the way I think about user interface and design. I can think of several instances where I kept pressing buttons on gadgets or user interfaces and got no reaction. I’ve always found this experience disconcerting because I’m not sure if my activities were acknowledged. I completely agree with Norman’s assessment on the importance of receiving feedback that is both clear and fast. It draws attention to a prevalent problem found in many designs and emphasizes how crucial it is to include transparent feedback methods in order to increase usability and user happiness. This understanding highlights the vital role feedback plays in enabling successful human-machine interactions, and it motivates me to examine designs more closely, both those I work with on a daily basis and those I might develop.

Assignment #4 – New Jeans by NewJeans

For this assignment, I wanted to do something involving my favorite musical band called NewJeans. I decided to use my favorite quote of theirs “New hair, New tee, NewJeans. You and me.” Which they repeat twice. The repetition of the phrase “New hair New tee / NewJeans” is followed by “You & me”, suggesting that the speaker is extending an invitation to the listener to join them in this journey of transformation and self-discovery. I decided to put my everlasting love for musical games into use; I wanted to create something simple. I wanted simply a phrase where I could play the song and click on this at the same time.

For my code, I faced issues with getting the phrase to repeat after it’s done, but chatGPT helped me figure that out by using % in the mouseClicked(); function.

function mouseClicked() {
    currentIndex = (currentIndex + 1) % phrases.length;
}

 

Reflection:

I am honestly very proud of this piece but I would like to someday develop a rhythm game that I could play using my favorite songs.

Assignment #3 – The Inescapable Prison pt.2

For this assignment, I wanted to further the idea I had for assignment #2, where I made (what I called) a inescapable prison and I wanted to further the exploration of how I would like to imagine the person who would stuck in it look like. I wanted the concept of how the harder the person would try to escape, the worse the prison got. I wanted to make it tortuous in a way. So I started experimenting with the push(); and pop(); functions and decided that it would look appealing to have the person gain speed, which is a concept I have implemented on the prison walls.

 

 

I think the most difficult part of making this was understanding how each function worked. However, I am proud of myself for figuring out how the pop and push mechanism worked because I had an issue with both of them and I was doing something very wrong with the arrays. I did end up only using one but at least I understand how they both could be implemented.

 // Add Square at the end of array every time mouse is pressed
  squares.push(interactiveSquare);
}
// Keyboard pressed = make the end of array fast
function keyPressed() {
  squares.push(interactiveSquare);
}

Reflection:

I would love to experiment with different shapes. I honestly considered making it Super Mario-related by having the rectangle be a Mario power star and have it make that effect, exactly how it is in the game but I wanted to make this one more. I will try to make the star in my free time.

 

Assignment #2 – The Inescapable Prison

Doing this assignment, I did not have something in mind and I just wanted to explore and play around with creations I could make. Eventually, I ended up using a loop to make lines, which formed a rather interesting shape. I decided to go with that, but I did not want to submit a random creation of complex lines, so I started exploring what I could do to make something out of these lines. After experimenting with movement, I decided to go with an inescapable prison where the harder the person tries to escape, the faster the movement gets.

 

This is my very first time experimenting with an interactive element. It was very simple to apply. However, I am very proud of myself for adding that element.

I am proud of everything on the canvas. I did have to search up how I could have the background change colors and that took a whilr to figure out. While this creation is not perfect, I still deeply love it.

//   Lines
  for (let x = 0; x <= width; x += 50) {
    for (let y = 0; y <= height; y += 50) {
      line(lineX, y, x, lineY);
    }
  }
  //Speed up when mouse is pressed
  if (mouseIsPressed) {
    lineSpeedX = lineSpeedX + 1;
    lineSpeedY = lineSpeedY + 1;
  }
  // Move the lines horizontally and vertically
  lineX += lineSpeedX;
  lineY += lineSpeedY;

  // Reverse direction when hitting the canvas edges and change colors
  if (lineX > width || lineX < 0) {
    lineSpeedX *= -1;
    stroke(random(255), random(255), random(255));
  }
  if (lineY > height || lineY < 0) {
    lineSpeedY *= -1;
    stroke(random(255), random(255), random(255));
  }
}

Reflection:

I had so much fun playing around with code and discovering new ways to implement interaction with creations. I am excited to delve deeper and to find out what this course has in store for me.

Assignment #2 – Casey Reas Talk

When we hear the word “Chaos” our minds automatically think of destruction and overall something negative. Casey Reas explored the meaning of this word and it reshaped my mind in terms of its meaning. Reas included many applications of “chaos” in beautiful pieces of art and explored how chaotic nature could be.

One concept that really stuck with me was the concept of randomness. Casey Reas’s talk opened my eyes on the ways in which the idea of randomness is perceived in art. I genuinely believe that randomness is sometimes important and Reas highlights that at one point.

Another concept that stuck out for me was the part where he talked about combining art with biology. Being a Psychology major student, I am very interested in one’s mind and knowing that it is possible to merge both of my interests into one made my day. I am truly satisfied after watching this talk.

Assignment #1 – Self Portrait | Rashed Alshamsi

For this assignment, I did not want to recreate an image of myself, but I also wanted to add elements of my personality. One thing everyone knows about me is my ongoing passion for music; I collect vinyl records, CDs, and Cassettes. I cannot go anywhere without my headphones and I thought it would be a great idea to include that particular element as well as my ongoing love for music in my self-portrait.

I was particularly proud of the animated musical notes. Originally, I was not planning on animating them but I wanted to challenge myself to try and play around with creating variables and the “If()” function. I initially knew how to animate them but I did not know how to have them bouncing back and forth in the same location. I resorted to YouTube and watched a tutorial on how to animate in P5.js https://youtu.be/s2PZvaP4dSg?si=Q81GurZ6GAjqfVSs . Even after watching the video, I did not know how I could animate multiple variables at the same time that could move altogether. I then realized I could add the condition that if the variable “MusicNoteY1” would exceed a certain point, it would have the variable “ySpeed” equal negative “ySpeed” which would make it move in the opposite direction. Then I had all other music note variables move in their own value + ySpeed which had them all move together.

//Variables
let MusicNoteY1 = 130
let MusicNoteY2 = 70
let MusicNoteY3 = 120
let MusicNoteY4 = 60
let MusicNoteY5 = 81
let MusicNoteY6 = 69
let MusicNoteY7 = 55
let MusicNoteY8 = 70
let MusicNoteY9 = 395
let MusicNoteY10 = 335
let MusicNoteY11 = 330
let MusicNoteY12 = 350
let MusicNoteY13 = 360
let MusicNoteY14 = 341
let ySpeed = 2

function setup() {
  
  createCanvas(500, 500);
}
function draw() {
  background(104,191,255);
  
  //Grass
  noStroke();
  fill(157,231,121)
  arc(250, 500, 700, 250, PI,0,OPEN)
  
  print(mouseX + "," + mouseY);
  
  //Musical Note
  fill('black')
  ellipse(40,MusicNoteY1, 35,25);
  rect(48,MusicNoteY2, 10,60);
  ellipse(92,MusicNoteY3, 35,25);
  rect(100,MusicNoteY4, 10,60);
  quad(48,MusicNoteY5,48,MusicNoteY6,110, MusicNoteY7,110,MusicNoteY8)
  ellipse(442,MusicNoteY9, 35,25);
  rect(450,MusicNoteY10, 10,60);
  quad(450,MusicNoteY11, 450, MusicNoteY12, 474, MusicNoteY13,477,MusicNoteY14);
  MusicNoteY1 = MusicNoteY1 + ySpeed
  MusicNoteY2 = MusicNoteY2 + ySpeed
  MusicNoteY3 = MusicNoteY3 + ySpeed
  MusicNoteY4 = MusicNoteY4 + ySpeed
  MusicNoteY5 = MusicNoteY5 + ySpeed
  MusicNoteY6 = MusicNoteY6 + ySpeed
  MusicNoteY7 = MusicNoteY7 + ySpeed
  MusicNoteY8 = MusicNoteY8 + ySpeed
  MusicNoteY9 = MusicNoteY9 + ySpeed
  MusicNoteY10 = MusicNoteY10 + ySpeed
  MusicNoteY11 = MusicNoteY11 + ySpeed
  MusicNoteY12 = MusicNoteY12 + ySpeed
  MusicNoteY13 = MusicNoteY13 + ySpeed
  MusicNoteY14 = MusicNoteY14 + ySpeed
  
  if (MusicNoteY1 > 180) {
  ySpeed = -ySpeed;  
  }
  if (MusicNoteY1 < 100) {
    ySpeed = -ySpeed;
  }

I am looking forward to adding an interactive element to my work in the future.