Week 8 – Response

Maragret Hamilton’s Story

I think it’s really empowering to see historical figures (that not much of the public knows about) having made impact that, again, we sometimes don’t know well about or take for granted in some way.

I think as a person studying computer science, the question of what fields will rise and fall, and what impact I will be able to make in different fields is always daunting as much as it is exciting. It might be because I am still a student, but the decision to go into a field that’s not perferred or considered prospective would not have been easy. I think the burden would have also come from the fact that once such big projects go wrong, they may lose both a lot of money and individuals. Becoming pioneers under these pressure, and leading future generations follow the way is definitely ( in my opinion) something all future programmers dream of.

Emotions & Design

I’m very excited that this topic has been raised again. I remember that in one of the readings from the first half of the course, there was a question of how designs need to consider both the funcitons and the attractiveness.

I remember this as the discussion I had with my group in class was really interesting. It is without doubt that finding the right balance between function and design is important. However, it also becomes a question whether this applies to all cases.

For instance, maybe if it’s something that’s not that frequently used. Maybe in that case, it’s more important for the product to merge into the design of its environment and not be considered as a hideous object.

Or, in other cases, it might be that something is for such private use that there is no need for it to be attractive. Maybe people don’t care about how something looks, if they are just going to use it at homes, on their own.

I think it really shows that yes, it’s important to find a balance, but this question is even harder as ‘the right balance’ differs by every situation.

Switches

Concept

When I thought about a LED lighting up, I wondered what connotations or messages it could give. The red and blue lights are commonly used to let people know if something’s good to go or not. With this, I thought about simple ways to connect LED lights and safety.

 

Approach

I found a safety vest that had velcros on them. When one wears the vest, they need to close the velcros, which means the two sides will meet. This is the exact concept of switches, so I decided to use this action.

When you wear the safety vest, the blue light will turn on, signalling that you’re good to go outside and have fun! (or work, to be realistic)

Expansion

I only used blue light to show that things are good to go. I think a good feature to add is the red light, that shows that the vest is not worn properly. This action would be eliminating contact, so I would need to think about how I would use this action as a switch (as it’ll be different from the blue light’s logic).

Midterm Project

Full Link to the Project: https://editor.p5js.org/MayaLeeeeee/sketches/-N67RBhJJ

Project: Hey, Breathe

*** The project is shown cut-off due to the layout of the Intro to IM page.

Concept)
The overall concept was to create an interactive game, where the movement of the player would depend on the voice of them. I initially planned to use both pitch and volume for the movement. (Higher pitch would move the character up, lower pitch would move the character down; higher volume would make the character move faster,  lower volume would make the character move slower).

However, as I continued with my work, I had to change that. Although playing with the pitch of sound was interesting (the playing of the game was really funny), it was absolutely impossible to play the game. The pitch changed so much that the character couldn’t stay still and it continuously spiked up and came down. I tried to manipulate it, but there was not much I can do to lower the sensitivity etc.

So, I changed the up and down movement to arrow keys. However, I did keep the idea of the input sound’s volume deciding how fast the character is moving. I wanted the character’s x position to stay still, so this eventually became the speed of the map moving.

Methods)
Basically, I have 3 elements in my game: character, obstacles, and collectibles. The red circle is the player, the black box the obstacles, and the green circles the collectibles. For the obstacles and the collectibles, I had to find a way to keep track of their locations, so that I can check if the player has hit the obstacle or has collected the collectible. I do so by using an array.

for (let i = obstacles.length - 1; i >= 0; i--) {
    obstacles[i].move(characterSpeed);
    obstacles[i].show();
    if (gameStart && character.hits(obstacles[i])) { //check if it hits obstacles
      console.log("Game Over");
      isGameOver = true;
      song.play(); //sound effect for when game over
    }
    if (obstacles[i] && obstacles[i].offscreen()) { //if offscreen, delete the obstacle from array
      obstacles.splice(i, 1);
    }
  }

I push a new obstacle/collectible into the corresponding array. I also use splice when I check if there’s anything off screen. I check the locations of obstacles and collectibles, see if they’re off screen, and if so, delete them from the array by using splice.

Future Improvements)
There is a bug where if the volume of the input sound is too big, the player passes right through the obstacles and doesn’t end the game. I am guessing that the speed of movement is quicker than the speed of checking (or something like that), and the program is not perfectly checking all the obstacles etc.

*** sound used: https://freesound.org/people/MATRIXXX_/sounds/345666/

Week 5 – Midterm Progress

Concept)
Looking around, I see that most people on campus are worn out both mentally and physically. Many students have hit a point where they are so stressed, but don’t even have time to manage and relieve stress. From this, I started thinking that I want to do something with ‘screaming,’ as it’s a good means of letting out stress and frustration.

I believe there are a few games that use volume or pitch of sound as a way to move around characters. Below is one of the game I have used as a reference.

Most games, I found out, use either volume or pitch of input sounds, not both. Based on this, I decided to use both factors. I plan to use the volume as the speed of the character and the pitch as the location (up and down) of the character. With these controls, the player will have to navigate through a certain map, collecting coins. (Below is a reference of what I’m thinking of.)

Programming Ideas)
There should be functions that create the map with collectables. There should also be a function that takes the input sound and translates it to the player(character)’s location and moving speed. There should also be something that keeps track of the contact of player and the wall, and another that keeps track of the scores.

Getting sound input and translating it to the player’s position and its moving speed would involve interactivity.

Complex Parts)
I think the hardest part would be figuring out how I’m going to translate the volume and the pitch of the user’s sound. It can’t be too sensitive as the game will be come frustrating, but it also can’t be too hard to move the user around.

I also think figuring out when the player has contacted a wall (which should end the game) would be a challenge.

Reducing Risks)
I think I’ll work on two parts separately: the movement of the user using sound and the moving map. I will first work on the movement of the user, testing out different volumes and pitches of the user. If I feel like the sensitivity is just right, I will move on to work separately on the map.

I will have to figure out the shape of the maps and how I want to generate it. I will also think about how to randomly place collectibles. When both parts are done, I can combine the two projects to create a full game.

 

Week 5 – Reading Reflection

The study that was given as our reading covers how the technology of computer vision started and how it evolved through different usages of different artists and fields. I think most of the readers would have expected how computer vision’s utility is limitless- we’ve already seen so many works that use computer vision that suggests potentials of further development and extension.

The reading gave a good reminder that as much as using computer vision can lead to fascinating works, it holds lots of limitations and needs careful considerations in order to maintain good accuracy. The fact that how precisely the technology can work depends on our decisions is another charm of it in my opinion.

I also like how the work Suicide Box sparks questions. I understand that there can be different views (especially ethical) on the approach. I wouldn’t say a certain side is more ‘correct’ than the other. However, I do want to say that the sole fact that it sparked questions and discussions about an issue that people tended to walk away from and ignore is a significance on its own.

Week 4 – Production

When I thought about text, I naturally pictured something with many writings. I felt like the continuous popping up of texts seem very similar to overthinking and graffiti. I decided to link these two concepts (overthinking and graffiti) and create a design that shows how continuous thinking of positives and negatives end up blurring what was originally there, just like a wall covered with graffitis.

Below is my work. The intention was to show how different thoughts, both negative and positive, fill up our mind so quickly. I wanted to deliver the message that at some point, we just have to stop thinking and turn off our minds. To show that, I make the screen black and show “stop overthinking” after a certain number of counts.

The code I want to highlight is where I use even and odd numbers to decide the colour of the text I’m displaying. Of course, it’s not something fancy, but it’s just a way I used to make deciding colours more simple. For this, I just had to make sure that positive and negative words are in order in my array.

while (i < 6) {
      if (i % 2 == 0)
         fill(0, 102, 153);
      else
        fill(205, 92, 92);
      text(messages[i], random(-10, 600), random(125, 600));
      i = i + 1;
}

 

Week 4 – Reading Reflection

The reading, from the very start, drew me in with the example of the door. C2 of our campus has 2 doors on the sides (not the automatic doors in the very center) and I remember a friend who always pushed the wrong side of the door and so “nothing happened.” As a side note, she never figured it out (and rather gave up on using the doors) until she graduated last term.

It was interesting that design can have effect on people’s daily lives because I actually always thought designs are affected by human thoughts and behaviours. Looking at art and design as a way of showcasing how people think, I considered them as a one way thing, where people give inspiration to designs. For me, it was a very new way think that design has impact on people, and people give (or should give) feedback- impacting the design- and the (new) design impacting people, and on and on.

It does throw a question, however, in terms of how the feedbacks would be collected. I think normal users of designs still mostly focus on the aesthetics of designs more than the easy utility of it. (For instance, if something’s beautiful, we tend to think that its job is done as it is, even when it can be easier to use, or more effective serving its purpose.) So, I think the first step to being able to effectively gather feedback and provide some sort of guideline to designers would be the recognition of necessary standards of designs.

Reading Reflection – Week 2

As a programmer, something ‘random’ happening in code is the worst nightmare. So, for me, the topic of randomness in computer science or coding itself was quite new. Usually, what programmers are obsessed about, is solving why ‘random’ and unexpected things are happening in their projects. So, at the beginning of the video, I was very confused in terms of how randomness can be used in coding.

After the talk, I came to the realization that even with randomness, we’re not just counting on pure luck- we are actively engaged in ‘designing’ with randomness, employing it as a tool to manipulate and shape outcomes according to our intentions. I appreciate how he nuances randomness/chance can be carefully calculated and determined, all while retaining the capacity to yield surprising results.

One question that comes to mind is whether our utilization of randomness can be regarded as an inherently random process as well. Although we don’t have access to the specific codes of the projects shown, it seems like we are trying to use randomness and make it behave in a way that we desired. I am uncertain whether, even in this context, randomness can be construed as entirely uncontrolled or arbitrary.

Week 2 HW) Loops

My project actually started from something very different from how it ended. I was trying many different things- things as simple as printing smiley faces where the mouse is clicked. Looking at the subject, I thought ‘what would happen if I use a loop for this project?’

The first step was increasing the x and y positions by 1. When I did this, everything looked the same (as expected). So I added random values to the x and y positions, which made things a bit more dynamic. At this stage, the random number was set once and the same value was added over time. (For instance, the variable tempX, which is a random value I’m referring to, would be initialized and set once, and never be changed. So, the circles were moving in a uniform way, with only the speed of movement different.) So, I added more lines to continuously  reset the random value that’s being added to x and y position, which gave the result we are seeing.

while(x + tempX < 401 && x + tempX >= 0 && y + tempY < 401 && y + tempY >= 0){
    tempX = random(-5, 5);
    tempY = random(-5, 5);
    x = x + tempX;
    y = y + tempY;
    drawSmile(x, y);
  }

The code I want to emphasize is the part where I reassign random numbers over and over, in order to create the dynamics here.

I think the project can be improved by maybe manipulating the frequency of redrawing, or drawing multiple types of random shapes, rather than just having circles every time. I also think it might be cool if I can limit the drawing to a certain area, and use the rest of the space with other types of media.

Week 1 HW) Self-Portrait

For me, while it may sound funny, getting the ‘artistic part’ of the project right was the biggest challenge. I had the picture of myself in my head, but I lack the ability of expressing that artistically (both by hand-drawing or code). Accepting the self I am, I decided to try to draw as many things in the portrait so that it would be good practice for me to try drawing different things.

The concept was to show how the sun in Abu Dhabi gives all of us a tan as time goes by. I wanted to make it interactive, so I made the skin colour change depending on the position of the user’s mouse.

//Outside (red part)
beginShape();
noStroke();
vertex(p1.x, p1.y);
bezierVertex(p1.x, p1.y, 310, 36, p2.x, p2.y);
bezierVertex(p2.x, p2.y, 345, 76, p3.x, p3.y);
bezierVertex(p3.x, p3.y, 360, 100, p4.x, p4.y);
bezierVertex(p4.x, p4.y, 320, 134, p5.x, p5.y);
bezierVertex(p5.x, p5.y, 295, 145, p6.x, p6.y);
bezierVertex(p6.x, p6.y, 245, 70, p7.x - 10, p7.y);
bezierVertex(p7.x, p7.y, 235, 80, p8.x, p8.y);
bezierVertex(p8.x, p8.y, 275, 50, p1.x, p1.y);
fill(250, 95, 85);
endShape();

As for the code, I want to highlight more on the trouble I had as there’s nothing too complicated in my project. The outside layer of the sun is drawn by bezierVertex()- I had to put in multiple different coordinates until it seemed okay. I personally thought this was a very inefficient way of doing it. Also, it was hard to exactly get it drawn how I wanted it to be. I spent quite a lot of time looking for different methods, but wasn’t able to find one. I would love to see if anybody has suggestions regarding this.

I think for my future projects, I would try to draw a grid by hand and figure out the aesthetics first. I saw a few people’s blog posts and saw how the image they wanted to draw was set first and the code specifically followed how each elements were drawn (the angles, the coordinates, etc). I think maybe if I take that step, the aesthetics could be better.