Week 10 | Beyond Ideas

I started picking up my first console when I was around four years old. It was Nintendo’s Gameboy Advance console. To this day, I still remember my first time inserting the cartridges, booting up the machine, and blasting hours and hours into Pokémon FireRed. The feeling of being immersed into an alternate world despite it being on a screen a few inches wide, and with few buttons to press, still blows my mind.

Nintendo-Game-Boy-Advance-Purple-FL

Gameboy Advance. Nintendo.

Even if it’s just 8 buttons, the console opened a rift to a new reality

Igoe clarifies that interactivity should be a gateway to endless possibilities rather than a fixated destination. Similarly, the console’s interactiveness only goes as far as the buttons and screen, yet game developers utilize those mechanics to propel the user one step closer to experiencing the Kanto Region (Pokémon FireRed’s world).

Video games, to me, are a new type of art–a premature one that is. Unlike paintings, books, or movies, it is a medium of art that takes shape by the user, rather than the author. Plus, because of how young they are, there is still room for the medium to grow.

I was thinking about how physical computing machines mentioned in Igoe’s post are not commercialized. Because these are new ideas, they still require rigorous testing and adjustments to fit our society. Yet, video game console challenges this idea. Floor dances, gloves, VR headsets, all these new devices are the pillars of future technologies. Hence, is it not better for us to embrace it as soon as possible?

Week 10 | The Knob and The Bob

Throughout the Eid break, I tried to review the concepts that we have gone through so far. My goal for this assignment is not to create fancy circuitry but rather to design something from the back of my mind and understand what it does, how, and why.

I spent quite a time figuring out TinkerCAD, which is a program that really helps me to visualize and simulate my board before physically building it. I found this YouTube playlist that taught the program really well.

Concept

I want to light up two lights with a button and a knob. Because the knob is an analog input, there is a value that can be used there. So, I decided to make one LED blink in a specific amount of time decided by the knob, whereas the other LED is a simple on-off.

Schematic
How it Works

The code is separated for both green and blue LED.

In the code, I made a variable called sensorValue, which reads the signal from the knob. These values are then used to create blinking effect using delay for the blue light.

// Read Potentiometer Value
  sensorValue = analogRead(A0);
  // Turn the LED On
  digitalWrite(LED_BUILTIN, HIGH);
  // Pause program for <sensorValue> miliseconds
  delay(sensorValue); // Wait for sensorValue millisecond(s)
  // Turn the LED Off
  digitalWrite(LED_BUILTIN, LOW);
  // Pause program for <sensorValue> miliseconds
  delay(sensorValue); // Wait for sensorValue millisecond(s)
Demo
End Remarks

I am really proud of this whole assignment. It is not perfect, as in the video, the green LED sometimes does not turn off despite the button being pressed.

Nevertheless, while it may seem simple in the beginning, I was very confused by the whole arrangement of things. But, I did my best to actually sit down, take my time, and learn how these components work and interact with each other and reinforce my knowledge on Arduino itself.

Week 9 | Blinking Light

I was quite busy this week with assignments from other classes that took more time than I had anticipated. Alas, I was quite idea-blocked on what to do for this unusual switch assignment.

Originally, I wanted to see if I could use sound sensors to turn on / off LEDs. However, the IM Lab does not have a sound sensor as of yet. So, I opted for photoresistors.

Exploring the examples provided by Arduino IDE, I found out the fading feature of LED. While it is not an inbuilt feature, by adding delays per update to the LED, we can simulate fading lights.

So, I figured what if I could combine both photoresistors’ outputs with fading light? Well, this is what I made:

I wanted to have some kind of if statements that go beyond what I have here. In my head, I wanted it so that each certain range of photoresistor would give different signals to the light: blinking, full on, full off, etc. However, they are more difficult to implement than I had imagined them.

//PIN NUMBERS
const int ledPin = 9;
const int ldrPin = A0;
int brightness = 0;  // how bright the LED is
int fadeAmount = 5;  // how many points to fade the LED by

void setup() {
  pinMode(ledPin, OUTPUT); // The input from LDR will be returned to LEd
  pinMode(ldrPin, INPUT); // This is the input, if we obstruct, it will return a signal 
}

void loop() {
  int ldrStatus = analogRead(ldrPin);
  Serial.println(int(ldrStatus));

  analogWrite(ledPin, brightness); //TURN ON LED 

  brightness = brightness + fadeAmount; // Change LED Brightness

  if ((ldrStatus <= 600) && (brightness <= 0 || brightness >= 255)){
    fadeAmount = -fadeAmount;
  }

  delay(30);
}

For future projects, I hope I have more time and energy to explore the technicalities of Arduino itself. Maybe I could pair the light with an alarm? So that when the sun is up, I can have strobing lights burning into my eyes. It is 2 AM right now, and I am exhausted 🙁

Resources:

The Basics of Arduino: Adjusting LED Brightness (deviceplus.com)

How to Use a Photoresistor (or Photocell) – Arduino Tutorial : 4 Steps (with Pictures) – Instructables

Week 8a | The Cost of Beauty

Can we make beautiful and functional things? Should functionality precede aesthetics? These are the questions that Norman tries to tackle in his article by also incorporating human responses–emotions in object designs.

Really Cool, Weird, Fun, Unusual, Innovative and Awesome Chairs 2024

The Chair Institute

I presented the image above because it is ‘catchy’. In my opinion, the chair above is a redundant object. Most people would agree that a chair’s sole purpose is to provide seating. A well-designed chair, instead, would give a comfortable seating experience for the user. It is made out of hard material, unadjustable, and unwelcoming. The chair above lacks those usabilities.

Aesthetics matter. It influences the user’s reaction, hence, its experience with the object.

I reflect the P01 feature within the spacecraft. NASA thought that such a feature was redundant. Why would you add a button that would never be pressed? (Spoiler: it backfired). Redundant features, if done correctly, would heighten the design. Think about the chairs you would encounter in the library. They are amazing. The chairs have adjustable armrests, heights, recline, and even headrests. These features and adjustability are the perfect pieces that create comfort for any user, in any kind of situation, whether they require focus, or just to nap after work. Would I still use them if they don’t have these features? I doubt it at all.

Midterm | Pyro Dancer Release

Game Description

Pyro Dancer is an endless-runner 2D game with heavy inspirations from notable titles, such as Castlevania and Metroid inspire the game. Paired with 8-bit sound and theme by Haynes, Pyro Dancer tries to mimic the retro feel of older games.

TOP |Castlevania -Grimoire of Souls- Official Website | KONAMI

Castlevania.

The player assumes the role of a knight, invading the evil castle. Upon entering the castle, he is greeted by dozens of fireballs. To win the game, the player must dodge the fireball and achieve 500 score points. If the player runs out of health points before reaching the score, they will die.

Development Process.

Knight Sprite

Sketches, Ideas, Drawings!

The game uses sprites, images, and the p5 Play library. All assets used are linked in this document, please refer to it for further information.  The library is extensively used to allow better control over the sprites and performance.

In the beginning, I sketched, drew, and created a map of my code. Generally, it is split into three parts: a) Hero class, which functions as a class that generates every component of the player’s character.

class Hero {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    //HEALTH
    this.heroHealth = 100;
    this.healthbar;
    //HERO
    this.hero;
    //BARRIER
    this.barrier;
    this.barrier2;
    this.barrierX = this.x;
  }

b) Fireball class, which serves as the group to generate, spawn, and display the fireball obstacles.

class Fireballs {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.amount;
    this.fireballs = new Group();
    this.fireball;
    this.fireballAni;
  }

c) Main sketch, which encompasses both previous classes and displays the game properly. In this file, many functions initialize, check, and update the game. The game itself is split into three parts: The main menu, the Game Screen, and the Victory / Death Screen.

Main Screen

Game Screen

Death Screen

Challenges & Difficulties

Figuring out how the sprite system works in the p5 Play library was quite a challenge, however, it helped me a ton when configuring the fireball and character. But because of the way they draw sprites, this also made a huge problem when it comes to display updates.

I tried to code the game to allow fullscreen mode, but it never really worked properly. However, the game is coded so that it fits any kind of display resolution, but a manual refresh is needed to properly display the elements inside. I suspect this is mostly because of how spaghettified my code has become to the point that I could not re-arrange ways to update the display.

Conclusion

I truly enjoyed the process of making games with p5 js. It is not the best tool to make one, but it does have some unique capabilities that are interesting to explore. However, at some point, I became frustrated and named a function psychopathically:

function butcherSprites() {
  //remove all sprites
  player.hero.remove();
  obstacle.fireballs.removeAll();
  player.healthbar.opacity = 0;
  homeButton.opacity = 1;
}
Try out the game here!

p5.js Web Editor | Pyro Dancer – Release (p5js.org) [Display with Code]

Pyro Dancer – Release (p5js.org) [Windowed Fullscreen]

Week 5 Reading | To the Moon and Back from Our Eyes.

Around fifty-five years ago, Apollo 11 reached the moon and back to Earth. Interestingly, the computers used to guide the spacecraft only required 4 kilobytes of memory. While it may seem small by today’s standards, it was a super machine that allowed precise and complex calculations for the journey.

“That’s one small step for man, one giant leap for mankind.” -Armstrong

Levin presented us with findings over thirty years later on the advancements humanity has made regarding computers. With more capacity, they are now able to track things in real-time and output images that are not just static but interactive. This reminds me of the breakthrough that Apple made with its Apple Vision and Vision Pro. The device is a major display (no pun intended) of what computer vision has become. While it may seem lesser compared to our phones (with its low battery capacity and weight!), it also made me reimagine the future when these devices are common occurrences in daily lives.

Remember when the first iPhone was introduced by Steve Jobs: people made fun of touchscreens. Today, it is indistinguishable from our daily lives. Indeed, today Apple Vision is mostly perceived as redundant to our smartphones.  But unless someone took up the mantle and challenged the default, no invention would ever be made.

References

To the Moon and Back on 4KB of Memory – Metro Weekly

The Four Computers That Flew Humans To The Moon (youtube.com)

Levin, G. “Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice
Programmers”. Journal of Artificial Intelligence and Society, Vol. 20.4. Springer Verlag, 2006.

Midterm | Pyro Dancer

For the midterm, I plan to make a game called Pyro Dancer. It is a single-player endless runner game, where players assume the role of a knight trying to save the princess. Previous notable titles, such as Castlevania and Metroid inspire the game.

Concept

Pyro Dancer uses pixel art as its main artistic choice. I believe that this is the element that captures the experience and feeling of playing similar titles. Paired with 8-bit sound and theme by Haynes, Pyro Dancer tries to mimic the retro feel of older games.

Knight Sprite

Sketches, Ideas, Drawings!

As the name suggests, Pyro Dancer will feature a knight running through a supervillain castle (unknown for now) to save the princess. However, he is greeted by dozens of fireballs in the process.

Gameplay

Players will have to dodge the fireballs by going up or down. They also have the choice to speed up their running by pressing the D key. As the score increases, so does the difficulty.

Above a certain score, players will be greeted by stationary monsters that instantly kill them upon touching. This would balance out the difficulty and create varied gameplay, as dodging only fireballs would be boring!

To win the game, players must reach a score of 1000 and proceed to the boss battle. (It is still in development, and I am unsure whether I will have the time to code it!)

Development Process

While trying to program the game, I ran across a dilemma.

I could program things from scratch, but it will take more time and the chances of running into bugs is higher.

Or, I could use some external libraries to help me develop the game, where I could devote my time and energy to create a better game instead.

I used an external Javascript library called p5 Play to help me develop the game. The library introduces a sprite class that allows me to easily manage the characters, obstacles, and even the game environment with a built-in physics engine.

Asset-wise, I have compiled a lot of the resources in this document. Please refer to it for the assets that I use.

Programming-wise, I have laid down the basics and finished testing the library itself.

Main Menu Screen (Still in Development)


Debugging Game Screen

Hence, I only need to clean up the code and mash them all together plus adding some sound effects to make sure they are neatly packed as a game.

Concerns & Optimisms

Because of how busy and tight the deadlines are, I am concerned that I might not be able to play test the game extensively. By the end product, there might be a lot of bugs or unexpected exploits (could be a feature/mechanic too!) that would go unnoticed. However, I am optimistic that I will be able to deliver an enjoyable game in the end.

For some reason,  I could not import the p5 sketches into this WordPress without it spiraling out of control. I am posting my reference links below instead!

References

p5.js Web Editor | Pyro Dancer – Main Menu Cleaned (p5js.org)

p5.js Web Editor | Pyro Dancer – Game Screen (p5js.org)

p5.js Web Editor | Pyro Dancer – Knight Animation copy (p5js.org)

p5.js Web Editor | Pyro Dancer – Tutorial Screen (p5js.org)

Week 4 Readings – Norman Doors

Ah yes, should I pull or should I push this door? From the image, we can already tell that something is off with the door. The sign says to pull the door, yet the handle is flat. These doors are commonly referred to as Norman Doors, introduced by Donald A. Norman in his book we read this week.

When designing something, it is always best to remember the target audience. Most object designs require human senses as an input to be used. While this does sound able-ist, we should also ask ourselves the question: How would this object be used for those who require more assistance? 

People will always seek the path of least resistance. An intuitive design is always good. We can measure how good a design is by simply using our senses. If it feels ‘natural’ to use, as if it is part of our body, it means the object is well designed. Otherwise, if we stop to think about how to use the object, that means it is redundant.

I believe that the concept of affordances Norman wants us to embed in our minds is this: As a designer, we need to put ourselves in the shoes of the audience. Designers can impact the lives of its users, be it for good, or for the worse. Being able to distinguish the holes or problems in the experience of our design is an important aspect to always remember.

Week 4 Assignment – What da Names?

In week 4, we learned how to display text by loading custom fonts and manipulating CSV (Comma-Separated Values) files to visualize the contents.

I was originally working on some cool stuff (yes, very cool) by randomizing texts and using custom fonts for them. It was inspired by Typefaces of Toronto, an Instagram page that finds out the fonts used in facilities within the Toronto city. During this I found out that p5js have some limitations, that is the editor can only load specific font file types (such as those from Google Fonts) and not crazy ones like from Da Font.

However, I wanted to go even beyond just displaying text and wanted to manipulate data as well. So I tried to import some data sets from Kaggle and expected to play around with it. But for some reason, these data were not read properly by p5. I tried workarounds to see if appending them to a list would work but I could not get it to display properly and got errors regarding readableStream instead.

In the end, I opted for ChatGPT to help me generate a .csv file with this prompt:

Generate a CSV file. 50 rows, with three columns: name, year, count, for 50 random names within the year 2010 – 2024, in a random quantity between 1 – 5000, no spaces

After some workaround, here is the result that I came up with:

The result is a simple data showcase of Name, with Year in behind it, and the Quantity information under it. I utilized push() and pop() for the texts so that they are separate permutable objects. You can click to refresh the canvas.

//QUANTITY
  push();
  textSize(21);
  countMsg = "In that year, there are " + str(count[myNum - 2]) + " babies.";
  text(str(countMsg), width/2, height/2 + 50);
  pop();

While coding, I also noticed that I needed to subtract the list index by 2 for it to show properly. I am still figuring out why this is the case, but I assume it is because I loaded the header (index[0]), so the program treated it by skipping to the next index immediately.

Overall, it is a fun project. Had I not encountered many problems and gotten sick over the weekend I might have created something much more appealing. But for now, this is the very best I can do with my time.

References

Browse Fonts – Google Fonts

ChatGPT (openai.com)

 

 

Week 3 Reflection – Finding Interactivity

I thought the author was crazy. The use of informal words and phrases jumped me out of my seat (not literally), but it allowed me to picture Crawford as an author because of how expressive the whole chapter is.

Defining interactivity is hard. There is no absolute correct definition for the word that matches its meaning. Beyond his definition that interactivity is a cyclic process where two actors alternately listen, think, and speak, I believe sense is also an important process to add to the definition.

Most stuff that we call ‘interactive’, even in the lower degrees (based on Crawford’s degrees of interactivity), requires human sensory input. Without haptic feedback, some interactivity is gone. Think about phones, computers, or even toys, they require humans to touch, move, and (sometimes) break them for it to be interactive. Although this sounds very ableist, I believe that our senses count as much as the three actions to experience interactivity that Crawford seeks. That human sensory is important to add to the definition of “What is interactive?