Week 10 Reading Response – Saeed Lootah

I found both articles very interesting and it was fun reading both, maybe that was partly because they were written by the same person. In any case, starting with the “shut up, and listen” article; I have always found the interpretation of art to be a tricky subject. Mainly because I don’t believe that many of the interpretations that people see in the artwork were thought up by the artist him or herself. Often I get annoyed by some of the interpretations that people come up with since I feel it is so far from the original art but recently that has been less the case. The reason is, and also this is what I kept thinking about while reading the article, is that I have recently begun to think of art being able to stand on its own. What do I mean by that? Well, I mean that an artist isn’t really the creator of the artwork, but rather he is more a spectator. I say this because of one main reason (there are others but I can’t describe or explain it in detail and with clarity), an artist does not really come up with the idea of the artwork out of nowhere, he can say what “inspired” him but I believe inspiration are only things that resemble the idea not that the inspiration was the source of the idea. In thinking about this I searched to see if there were any quotes or artists that were quoted as saying something that fits/resembles my opinion.

“I saw the angel in the marble and carved until I set him free.” – Michelangelo┬á

“I never know what I’m going to put on the canvas. The canvas paints itself. I’m just the middleman.” – Peter Max

Of course not every artist or person is of the same opinion, but had it not been for the article I just read I would have never thought deeply about this.

As for the other article; I didn’t have thoughts or ideas that were as philosophical. As I was reading I realized that this article would be a great help for when we make the musical instruments using the Arduino’s after the Eid break. I also thought of how facial recognition could be used nowadays. Since the article was made in 2012 facial recognition was not nearly as advanced or reliable so the closest thing to that was the video tracking and the other things that were mentioned. Just something to think about.

Week 9 – Saeed Lootah

Before this assignment I spent a lot of time trying to brainstorm different ideas, I wasn’t really sure what to do until the last minute to be honest. Some of my ideas were if you say a specific word the switch triggers, or if you’re nodding off or maybe just a sound trigger, but none of those ideas seemed very original or interesting. Thankfully I ended up coming up with an idea I feel is far more unique.

When thinking about different limbs (other than my hands) and which I could move to cause the switch to turn on I eventually landed on my ear. Unlike most people I have the ability to slightly move my left ear. Not enough to be very noticeable but enough to have two contacts connect or disconnect.

The plan was to connect one wire to my glasses and one wire to the side of my head. I chose to do this because I noticed that when I do move my ear it also moves my glasses. Therefore, the switch would be turned on when I don’t move my ear as the glasses would be in its normal position, and the switch would be turned off once I move my ear.

Above is the finished product when it is not attached to me. The red wire on the bottom left is what I attach to my head with electrical tape and it is supposed to touch the copper contact that you can see on my glasses. You may also notice that on the breadboard there are two LEDs, one red, one blue. The red LED turns on when current is flowing between the contacts. Then the blue LED is connected to the Arduino. When the current is flowing a signal is sent to the Arduino, then the output is sent to the blue LED. I made it such that the blue LED flickers when current isn’t flowing, i.e. when I move my ear.

Making this was very tedious especially getting the wire on my head to stick and also because sometimes I had to take my glasses off while working on the project. Fortunately while writing this my glasses are on but I didn’t attach the red wire. Unfortunately, when I do attach the red wire it is slightly uncomfortable so I’ve decided to keep it disconnected until the last moment. There are also other problems with my design: The wires easily move around, I rely heavily on electrical tape to keep everything in place, and to make sure everything works I have to adjust my glasses as well since if they move then the switch no longer works, also the wires are messy. Since this is only a prototype problems are expected. Regardless I’m surprised at how well it works, for people who don’t realize I’m moving my ear it looks like I’m using my mind alone to control the light.

Thank you Aadhar the lab assistant for helping me with getting wires of the right length and finding electrical tape. And, thank you ChatGPT for writing the flicker code.

 

Code:

 

// PINS //
const int powerPin = 2;
const int outputPin = 3;
// ---------- //

// GLOBAL VAR //
int val = 0;
int outputVal = 0;
bool flicker = false;
// unsigned long time;
unsigned long previousMillis = 0;   // ChatGPT
const long interval = 200;
// ---------- //

void setup() {
  // note to self, returns either HIGH or LOW
  pinMode(powerPin, INPUT);
  pinMode(outputPin, OUTPUT);

  
  // Serial.begin(1000); // Begins serial communication with my computer

}

void loop() {
  // DIGITAL READ //
  val = digitalRead(powerPin);
  digitalWrite(outputPin, outputVal);
  // // ---------- //

  // time = millis();
  unsigned long currentMillis = millis(); // get the current time

  // Test
  // if(val == LOW) {
  //   outputVal = LOW;
  // } else {
  //   outputVal = HIGH;
  // }

// turn on later 
  if (currentMillis - previousMillis >= interval) {
      // save the last time you blinked the LED
      previousMillis = currentMillis;
      flicker = !flicker;
  }

  if(flicker && val == HIGH) {
    outputVal = HIGH;
  } else {
    outputVal = LOW;
  }

  // Serial.println();
}

 

Week 8a Reading Response

Now after having read both articles I realize how little beauty is appreciated in how productive it will make us. What I mean is that most people, myself included wouldn’t have thought that by getting a nicer looking laptop or by being in a more aesthetically appealing place that we could be more productive. However, not necessarily productive in general. The first author emphasized that positive affect (the experience of positive emotions, or feelings) could allow for broadened thinking, and make people more willing to disregard minor difficulties, and that positive affect is linked with a more aesthetically appealing design. That is not to say that all designs should focus on aesthetics. In a rocket or a plane for example, it is important that the design focus more on function so as to make it as easy as possible to complete simple tasks and not be distracted.

In the reading about the Apollo program I found it interesting how those in charge felt that because they had because “they were trained to be perfect” it meant that they wouldn’t make any mistakes. I wasn’t sure why they would think that. Personally, I don’t believe that they believed that they were perfect, instead I think those in charge thought that it would just be very unlikely that a mistake would happen, and maybe they just didn’t want to deal with adding any redundancies/error detection. Ultimately, the problem was that human-centered design wasn’t taken seriously.

As I was reading both articles I thought about the things I use around me. I’m not sure if this relates but I found that I am more willing to use something if its aesthetically appealing or just made me feel good in general. I’ll give an example: I was more willing to write notes or draw after buying a pen which feels nice to write with or if the notebook I’m using looks nice. Or, its easier for me to write code/debug if the environment around me makes me feel better. For example, being in bed is more comfortable than being in a public environment in my opinion.

Midterm – Saeed Lootah

For the midterm I wanted to do some kind of video game. I felt that it would be more fun and ironically more interactive than an interactive artwork. Originally I was stuck on the idea of Russian Roulette but that lead me to the idea of a Mexican Standoff. The premise of the game is that two players are facing each other and after a countdown they each have to shoot before the other player does. Furthermore, I wanted to prevent people from just holding down the shoot key so I made it so that if you shoot too early you fail.

I wanted the player to first see a main menu before they start the game. I was inspired by some of the previous works of students on their midterm and wanted something similar but also unique to my game. However, before I could start making it I had to find out how to do so. In class, I don’t remember which one exactly since it was a while ago now, I asked Pi about something to do with different pages/menus and he told me about a scene management class. That is a function or part of the code dedicated towards picking different menus. This ingenious solution was what I needed, and for that reason I put Pi in the credits menu for my game. Furthermore, Pi told me about game state machines and more about states in general in games, that concept helped me a lot during the creation of my project. I was proud of the code I made for the scene management class but not as proud as the code I made for the gameplay. A lot of work went into making the actual game itself and I wish I could show more of what I did without it being too boring but in any case; below is what I am most happy with.

function countdownFunctionality() {
  // frame rate is 60
    gameStarted = true;
    let x = 1;
    let xSecond = 60 * x; 
  
    let firstSecond =   initialFrameCount + xSecond * 1;
    let secondSecond =  initialFrameCount + xSecond * 2;
    let thirdSecond =   initialFrameCount + xSecond * (3+randomNumber)
  
    if(!(tooSoon1 || tooSoon2)) {
        // TODO sounds
      if(frameCount < firstSecond) {
        countDownDraw(3);
      }
  
      if(frameCount > firstSecond && frameCount < secondSecond) {
        countDownDraw(2);
      }
  
      if(frameCount > secondSecond && frameCount < thirdSecond) {
        countDownDraw(1);
      }
  
      if(frameCount > thirdSecond) {
        countDownDraw(4);
        player1.update();
        player2.update();
        fire = true;
      }
    }
  
  
  }

Above is the code for the countdown. I needed something that would (obviously) act like a normal countdown, going from 3 to 1 then to the words fire, but I also needed to have the program be able to detect a player firing at any point during the countdown. This meant I could not stop the program completely but still needed a way to add a delay. I chose to do this through essentially counting frames. Where when the function is called the frameCount at the time is kept and then the 1st, 2nd, 3rd, and final seconds are kept as a number which the frameCount has to be greater than for the appropriate icon to show. Then at the end of the code you can see the line “fire = true”. Fire is a boolean variable that was initialized outside the function and it is used to keep track of the states of the game, like Pi taught me ­čÖé When it is true the players are allowed to shoot.

There are also a lot of general things about my code that I’m happy about. Primarily the way that I organized the code. I created a separate javascript file for each menu as well as the scene management class. This made things easier to navigate. Furthermore, going into this project I decided to use visual studio code instead of the website editor, I wasn’t sure how to at first but after some figuring things out I learned I had to use extensions, I found the specific extensions then spent a while learning how to use the extensions in the first place.

While the program works now, there are A LOT of things I would change. I added a lot of files thinking and sometimes trying to add them but eventually giving up because I ran into some kind of bug. If you end up going through the files you will notice this, and if you go through the comments you will notice that I wanted to add some extra features. I originally wanted to add a best of five game-mode but because of time constraints I had to give up on it for this project but maybe next time. Another thing I wish I could get to work, and there is still time is music that plays specific to the play menu and not just the main menu music which plays all the time. I haven’t been able to figure it out just yet because I was experiencing some bugs but I unfortunately cannot put aside time to do it at the moment, perhaps in the future, maybe even before class. Anyways, that’s all I have to say about this project. I’m happy with it overall, it is the most effort I’ve put into a coding project and the most lines of code that I’ve ever written, and I think it shows. I hope people have fun playing it.

P.S. The credits to all the people that have helped me and all of the people that made the sprites, images, etc. are in the credits section which you can find from the main menu.

 

 

6th March 2024:
Fixed a bug where if player 2 shoots too soon then player 1 does as well it shows that player 1 shot too soon and not player 2.

Week 5: Midterm Progress

Going into the midterm project I originally had the idea to make a two player game of Russian roulette, but eventually I changed my mind. I have now decided to make a two player, Mexican standoff game. Where there is a countdown and whoever presses the shoot button first wins. Player 1 will have a button on the left hand side of the keyboard like the letter ‘S’ and player 2 will have a button on the right hand side of the keyboard like the letter ‘L’ for example.

I spent most of my time working on the scene management. By that I mean the functionality around being able to switch to and from scenes. For example, going from the main menu to the tutorial screen or to the credits or game screen and back. I also decided for this project I would use visual studio code to program the code. It has worked perfectly up to this point where I have to now upload the code onto the website so that I can share it here. For some reason, as of writing this I am having the problem where whenever I run the code in the website editor the website decides to turn white. I thought this was a problem with chrome and maybe one of my extensions so I tried switching to Safari but had the same problem. Here is the sketch below. I managed to fix the issue and I explain the

I was having the issue of the website editor going blank, because one of my functions returns a console.error(). At the time when I had made the function return such a value I didn’t think it would be an issue in the first place because it would never happen, and it never did, but because a function could return such a value it crashed the editor. Note to self: don’t try to be fancy with the values you return

At the moment the program is very bare bones. In the future I plan to have the main title an image, and maybe the main menu background will be an animated one. Then for the game each player will be a pixelated version of a cowboy or something along those lines, and there will be some kind of background. I may also make the mexican standoff game a best of 5.

Lastly, thank you Pi for telling me about scene management, and thank you professor for helping with uploading the code from Visual Studio Code to the website editor.

Week 5 Reading Response – Saeed Lootah

I found the article to be very interesting, before reading I had a very primitive idea as to how a computer can recognize objects in a video or anything else to do with a computer processing a video. But, as I was reading I was reminded of examples of “computer vision” as the author put it. On the way to the Intro to IM class there is a screen and camera, and displayed on the screen is whatever is in front of the camera but the brightness of (nearly) every pixel is represented as a character. The end result is a black and white image but with characters to represent the brightness of most of the pixels. I was also reminded of a time where during the thunderstorm which had happened recently I met someone as I was walking to D2 who was having trouble photographing a lightning strike. In my head I thought that he could have benefited from some kind of program which could do all the work for him. I thought about it, and the idea I came up with was if the camera was recording all the time but deleting footage older than 30 seconds (to save space) then if the camera detects a spike in brightness it saves the last 30 seconds plus some footage after the lightning strike (this could be done by delaying the time between detecting the spike and saving the footage). Of course I don’t really know how to implement it but in theory it could work… I think.

I also learned a lot from the article. There were techniques mentioned, most of which which I would never be able to come up with myself. “Frame differencing,” “background subtraction,” and “brightness thresholding.” While I do not have a great idea of how to implement these techniques I think the most valuable thing I took away from the article were the names as I could always search them up and learn more afterwards. Fortunately they also linked some processing programs at the bottom that I could use to learn more.

Lastly, I noticed that the article was somewhat outdated. It was released in 2006. I felt it was worth mentioning because at the time machine learning was no where near as advanced as it is today so I would have liked to have learned more about how machine learning could be used to improve “computer vision.”

 

Week 4 Reading Response – Saeed Lootah

I personally have not always thought much about the appliances or objects we always interact with even though I sometimes get annoyed by them so when going through the chapter I began to think more about the things I use on a day-to-day basis. Moreover, the beginning of the chapter outlines a philosophy which I have started hearing more of today: Human Centered Design. In my last semester I believe it came up in one of my classes, I am personally surprised that it didn’t exist until recently because I always imagined that designers (anyone that designed anything to be specific) always had the person at the center but what’s new is that designers are accounting for the worst possible mistakes or misunderstandings to best “foolproof” their work.

By the end of the chapter I began to think about two things. How have designers or the discipline of design in general changed since this book has been published. I ask this because as I’m reading it sometimes feel obvious and maybe thats because it has become more ingrained into the culture or perhaps it’s obvious when its spelled out. Then my second thought was about a recent product. The Apple vision pro, which I’m sure almost everyone has heard of by this point, uses the senses in a way which comes naturally to people whereas before with other virtual reality headsets people would have to be taught or spend more effort learning. It made me consider how sometimes a designer might approach a problem from the perspective of how can we make it with the tools we have already or some designers might approach a problem with the perspective of what tools do we have to make the product we should. Maybe I didn’t explain myself very well but thats what came to mind.

 

 

Assignment 4 – Saeed Lootah

Going into this project I originally had no idea what I was going to do. With the previous projects it was easy to come up with ideas but when it came to typography I didn’t know how I was going to make it aesthetic. I could have done data visualization but I couldn’t think of any data or statistics that mattered to me. In any case, the first idea that came to mind was to first try and make a bouncing ball which goes across the screen, then to make it about typography I would have said ball go to a certain point on the screen to spell out a word. It was a simple idea but as you will see down the line I added a few small details to make it more appealing.

I began first with creating the bouncing circle as you can see below

 

For some reason it has decided to fall through the bottom of the screen, but I promise when I first made it it worked fine :). In doing this simple animation I learned a lot. I had taken a lot of inspiration from my previous assignment where I wanted to make circles that went around. In that previous assignment I wanted to use vectors originally but didn’t know how to. However, after showcasing it in class my professor as well as Pi explained to me how to use the vector to add a new position. It was done by adding the vectors x or y value to the x or y value of the circle. You can see this in more detail in the code below.

update() {
    
    angleMode(DEGREES);
    
    this.posX = this.posX + this.v0.x;
    this.posY = this.posY + this.v0.y;
    
   // theres a problem where when it hits the corner it decides to go in a straight line into the next corner. Not sure why this happens, I think its to do with the if statements, but its rare enough where debugging isn't worth it (at least by my standards).
    
    // overarching if statement, if false then it goes into other if statements to see which part is false
    
    if(!(this.posY < height && this.posY > 0 && this.posX > 0 && this.posX < width)) {
      
        if(this.posX > 0 && this.posX < width) {
        // top and bottom
        if(this.posY < 0) {
          // top reflect
          print("reflect top");
          this.v0 = p5.Vector.reflect(this.v0, this.upVector);
        }

        if(this.posY > height) {
          //bottom reflect
          print("reflect bot");
          this.v0 = p5.Vector.reflect(this.v0, this.downVector);
        }
      } else {
        // left and right
        if(this.posX <= 0) {
          // left reflect
          print("reflect left");
          this.v0 = p5.Vector.reflect(this.v0, this.leftVector);
        }

        if(this.posX >= width) {
          // right reflect
          print("reflect right");
          this.v0 = p5.Vector.reflect(this.v0, this.rightVector);
        }
      }
    
    }
    
    // noise for the heading
    
    
  }

The specific line where I do the adding of the vectors x and y component is at the top. Afterwards I made a lot of if statements and created some other vectors from which the object could reflect off. The reason I did this with vectors again was because there was a method that already existed which I could use instead of doing math. By the time I had gotten all of this to work I was very happy with how it turned out. You’ll see with the bottom comment that I at one point was going to add noise to make the direction slightly random, but it didn’t work out unfortunately. I may work on this for the next assignment just as I worked on vectors for this assignment.

Then after that, I made another sketch. The plan for this other sketch was to just make the points surrounding text. Up to this point I had only ever done it once in class and that wasn’t enough for me to really understand how it works.

 

Its a very basic sketch, and that was kind of the point. It took me a while to make it and that was mainly because I was trying to center it. The way I did it was by subtracting half of the width of the text to the x position of the text since by default it’s drawn from the bottom left of the text (as far as I know, it may be top left but it doesn’t matter for centering). The problem was getting the width, for some reason textWidth() wasn’t working so I had to use the textBounds() function which is part of the font class which already comes with p5js. After all that I was finally ready to make the final project.

Also I should mention, my original plan was to make the text in arabic but I saw a stack-overflow post which said p5js isn’t great at doing right to left text and so I decided not to in order to save time.

By this point, my plan was that I would have all of these bouncing circles, one for each point in the text and then when the user holds down a button each button would return to it’s appropriate point on the text. Because I had done a lot of work before this working on separate features I was struggling with I could bring it all together and in theory it would mean that I wouldn’t have to spend as much time. I put the text sketch into a function, and since I had made the bouncing circle in a class I copied that too. In hindsight, I could have made the bouncing circle its own class to see how that would work and to learn a bit more but I, again, my try to do that for the next assignment.

Below is the finished product (press left click)

The text can be changed

Week 3 Reading Response – Saeed Lootah

When first going through the article I enjoyed the authors’ style of writing. Even though his style may not have to do with interactivity I found it interesting how he it seemed he was at times angry or fed-up with the current state of things surrounding the word interactivity. This may show that he is biased in that he starts off by feeling annoyed rather than objectively considering how the word interactivity is being used already as he only starts by mentioning advertisements, then throughout the text mentions more real-world scenarios (like reading, or dancing) but I wish I could have seen more mention of how interactivity is used in academia as words are often loosely used/defined in normal conversation.

In any case he makes a compelling alternative to how the word interactivity should be used. For example interactivity should be more than just being true or false but should consider how interactive something is. Then also mentioning what qualities are needed for something to be highly interactive. Listening, thinking, and speaking. The only problem I see is that I believe how interactive something is, is subjective, but whether or not something is interactive is objective. The author believes that if one of the qualities are missing then it cannot be considered highly interactive but people can play games against someone else who is reacting to their moves (which makes it interactive) but not speak at all for example and still find it highly interactive since it is based on emotions rather than logic alone. One of the interesting things I found towards the end is that a good interactive designer should have a good understanding of both the backend and the frontend of a product. Backend in this case meaning the algorithms, and frontend the general appearance.

Assignment 3 – Saeed Lootah

When starting this assignment I set the goal of creating classes which behaved differently to each other. In my previous assignment I had a similar goal but wasn’t able to achieve it so I thought I would try again. When it came to the code I took inspiration from the car sketch, where the location of each car was stored as posX and posY. I also wanted to make something similar to what some of my other classmates were making without looking at their code and spending as much time figuring it out myself. I tried to replicate Snehil’s design with the use of what looked like snakes but I wanted a different color scheme. I found Darko’s color scheme more appealing. Then lastly, I wanted to make a class which I could easily repurpose or re-use if I wanted to make shapes which could move around almost randomly.

class snake {
  
  constructor(posX, posY, radius, magnitude, coefficient) {
    
    this.posX = posX;               // x-position of the shape
    this.posY = posY;               // y-position of the shape
    this.radius = radius;           // radius of the circle, could be changed if the shape is different
    this.magnitude = magnitude;     // magnitude refers to the amount the shape moves every frame
    this.coefficient = coefficient; // coefficient is the number that multiplies the frameCount in the noise function, I prefer it when it is the same for all snakes but it is a variable that can be changed regardless
    
  }
  
  // This class sets a new posX and posY based on a randomly generated heading
  update() {
    // update random heading
    
    let noiseRandom = noise(this.coefficient * frameCount);
    
    angleMode(RADIANS);
    
    let randomHeading = map(noiseRandom, 0, 1, -2*PI, 2*PI); //random heading
    
    // setting new posX, and posY based on the magnitude
    
    this.posX = this.posX + cos(randomHeading) * this.magnitude;
    this.posY = this.posY + sin(randomHeading) * this.magnitude;
    
    // The reason I used sin and cos is because setting the new values is similar to a right angle triangle: The magnitude can be represented as the hypotenuse, and the random heading an angle, then the adjacent value is the change in x, the opposite value is the change in y, then add said changes to the posX and posY respectively. Of course to calculate the new aformentioned values the formula sin(randomHeading) = x / magnitude has to be rearranged, and the same for cosine. 

  }
  
  // this class just draws the shape, it could really be anything, it could even be modified to be a rectangle or an ellipse or anything else you can think of.
  drawShape() {
    
    circle(this.posX,this.posY,this.radius);
    
  }
  
}

Above is the entire class which I named snake. I only used 2 functions not including the constructor which was update and drawShape. the update function’s purpose was to create a new heading, and update the posX and posY variables based on the heading and the magnitude inputed when creating the class. I tried to explain how it’s done but I feel the long comment does not do it justice. Before I explain, originally I tried to use vectors and the translate method. What I realized was that the translate function could also move other shapes on the screen, and instead of trial and error-ing my way around, I decided to use posX and posY like what I remembered from the car-sketch.

To do this I thought of a right angled triangle and using the trigonometric equations to find what the new coordinates for the shape would be.

While the math isn’t very complicated I felt it was worth explaining and documenting regardless. The hypotenuse is in this case the magnitude, the adjacent side (see left triangle) is the change in x, and the opposite side (left triangle) is the change in y, and theta is the randomHeading variable I generated in the update function. I knew the equations sin and cosine could be used as they had all the variables I needed and so by rearranging for x and y respectively, then adding the new values I got to the pre-existing posX and posY variables I could get the new posX and posY variables. This was the main problem I had, and it was what took me the most time to figure out since at the beginning I chose not to look directly into the code of others and to use what I knew already or what I remembered from class.

Below is the finished product:

Click to reset the circles.