Week 13- Final Project User Testing

I had two of my friends try the project during user testing. While conducting the test, I connected the p5.js sketch to the Arduino, displayed the sketch in full screen, and left the users to determine how to interact with both the box and the screen. Even though they were mentioned in the instruction that was displayed on the screen, users were uncertain about interacting with the box and screen simultaneously. So I needed to explain that they would receive hints on the screen and input the code using the button and knob on the box.

About the guessing the code, they quickly understood how to use the hints to guess the three digits required to unlock the code. However, they found it confusing regarding how to backtrack and edit an entered code if they wanted to change one of the digits, which is not possible in the game. And that was missing in the instruction.

In this vide the user is trying to crack the code for the second time: https://youtube.com/shorts/YVequMRq7eI?feature=shared

After user testing, I decided to add instructions on how to enter the code and clarify that editing the already entered code was not an option. Also, I chose to include printed instructions on the box, indicating users should gather hints from the screen to input the digits accordingly.

Assignment 4: quotify

CONCEPT

For this assignment, I decided to go with the generative text theme. I chose a random quote generator “quotify” as a concept. I love quotes and the idea came to me from a mobile app I have (Motivation) that generates a random quote daily on my lockscreen, which makes my day. I found the csv. file in Github (link in references). As for the aesthetics, they are pretty simple as I used an aura background and a typewriter effect (following this Github  example). The concept is basically a random quote from the csv. file pops up because of this line: typeWriter(random(quotes), 0, 50, 190, 50)with a typewriter effect. Each time you click you get a new random quote.

INSTRUCTIONS:
  • CLICK ON THE SCREEN FOR A NEW QUOTE.
  • CLICK ON KEY “W” (W FOR WIN!) TO SAVE A QUOTE YOU LIKE AS A PNG IMAGE 🙂
SKETCH:

CODE I LIKE:
function typeWriter(f, n, x, y, s) {
  if (n < f.length) {
    background(bg);
    textSize(25);
    text(f.substring(0, n + 1) + "_", x, y, 400, 250);
    n++;
    //delay the next character's appearance by s milliseconds
    setTimeout(function () {
      typeWriter(f, n, x, y, s);
    }, s);
  } else {
    printing = false;
  }

I like this part because it is new and I have never used effects for my text in any previous assignment. Since the assignment is about text, I needed a cool element to go with my text, which is this effect this case. I find it cool because it is similar to the typewriter machine used in the past: it types letter by letter.

IDEAS AND REFLECTIONS:

This assignment was pretty straightforward and enjoyable. I loved the brainstorming part where I got to search for the csv. file and finally use one to generate a piece. Though I find this piece lacking the “wow” or unexpected element/design, it is still a minimalistic piece with its own aesthetic. If I could do something different, I would have opted for a data visualization concept because my STEM self loves working with data, but I will save it for another time.

csv. file source

 

Reading Reflection – Week 2

Randomness as an art concept

“Chaos is what existed before creation” says Casey Reas. But it wasn’t until the late 19th and early 20th centuries that chaos became a tool of art creation once again.

For me, the most important step on the way to transitioning into a new era of art was the creation of suprematism, one of the main developments in abstract art.

Kazimir Malevich: Study for Décor for Victory Over the Sun (1913)

"Study for Decor for Victory over the Sun" Kazimir Malevich, 1913

Kazimir Malevich: Suprematist Composition: Airplane Flying (1915)

"Airplane Flying" Kazimir Malevich, 1915

The most easily noticeable signs of suprematism are simplicity and reduction, and while trying to create some art in p5, I noticed that the most unexpectedly fabulous things are created when using the most primitive shapes. Therefore, I believe it’s not about the shapes; it’s about their order that creates a canvas.

Randomness in music

As a pianist, I want to shed light on the application of randomness in music. It’s called aleatoric music. It uses the principles of randomness and variance in creating music pieces.

But unlike digital art, which can be fully created by the principles of randomness, in music, the musician has control over the performance. Human nature still makes us more predictable; therefore, I believe it’s nearly impossible to achieve absolute randomness in action for humans.

If you want to read more, click the following link.

The Martian – Midterm Project

The Martian

Sketch link

To play the game in fullscreen click this link -> Click Here to Play the Game

The project code -> Code

Overall Concept

For this Midterm Project I created a game using everything I have learned so far in class. The game is be called “The Martian” and the objective of the game is to guide the Mars Rover through the treacherous terrain of Mars, collecting valuable resources and avoiding hostile alien spaceships and rocks on the surface. The player will have to navigate using keyboard and mouse as they progress through the game. In “The Martian” the player will experience the thrill of driving a Mars Rover on the surface of the red planet. With challenging terrain, hostile aliens, and valuable resources to collect, the game will offer hours of exciting gameplay. The use of p5.js will enable the creation of a visually stunning and engaging game.

The overall concept of this game is a space-themed adventure where the player takes on the role of a NASA satellite specialist who is tasked with rescuing the PERSEVERANCE probe from an alien threat. The game has two modes: collection mode and exploration mode.  Your primary objective is to protect it from any danger by avoiding all the obstacles and enemy UFOs. In pause mode, the obstacles and UFOs will not harm you.

Implementation and Design

How this project works

In the game you are a satellite specialist at NASA, and the probe PERSEVERANCE, is being chased by an alien! It’s your task to save it! Avoid the stones and enemy UFO’s to save it! You will have to use the Space and Down keys to control the rover. I also decided to implement two different modes to the game:

  1. In collection mode- Collecting a Uranium atom is worth 5 points and collecting a water is worth 10 points. While collecting points, remember to dodge the UFO’s and stones on the surface of the red planet.
  2. In exploration mode crossing certain distance automatically gives 1 point. All you have to do is to dodge the UFO’s and stones on the surface of the red planet.

Technical Design/Good technical decisions

The starting screen of the game has three buttons:

  1. Mode button in which you can choose between Collection and Exploration modes according to your preference.
  2. Start button to start the game.
  3. Rules button which gives precise instructions on how to play and control the game.

This creates a user friendly experience where users can easily manage the different aspects of the game from the main page.

The technical decision I am particularly proud of is implementing the two different modes of the game. I initially thought that it would be only Collection mode where you can earn points by collecting really scientifically valuable resources like Uranium atom and Water in Mars. But after I asked my friends for user testing one of them gave me a feedback that not every user wants to collect something to play the game. Considering this feedback I also realized that in the games like Geometry Dash the main goal was to survive not to collect the resources. And this fits the logic because whats the point of your resources if you are dead?! That way the Exploration mode was made.

Collection mode:

Exploration mode:

Code for the two modes:

switch (mode) {
      case "exploration" : score+=0.01;
                      score$=Math.round(score);
                      water.visible=false;
                      atom.visible=false;
                      break;
      case "collection" : water.velocityX=-4;
                          atom.velocityX=-4;
                          if(rover.isTouching(water)) {
                              score+=10;
                              score$=score;
                              water.x=width+Math.round(random(1000,1400));
                              water.y=Math.round(random(rover.y,height-300));
                              jump.play();
                          }
                          if(rover.isTouching(atom)) {
                              score+=5;
                              score$=score;
                              atom.x=width+Math.round(random(299,499));
                              atom.y=Math.round(random(rover.y,height-300));
                              jump.play();
                          }
                          water.visible=true;
                          atom.visible=true;
                          break;
  }

Another technical design I am proud of is the collision detection algorithm/logic. The idea is to detect the collision between Mars Rover and other objects like valuable resources and hostile alien spaceships or rocks. I  came up with an algorithm to distinguish between these various collisions with different objects. Because if the Mars Rover collides with valuable resources the Score should increase and if it collides with the rock or alien spaceship it should end the game and display the restart button.

case "collection" : water.velocityX=-4;
                    atom.velocityX=-4;
                    if(rover.isTouching(water)) {
                        score+=10;
                        score$=score;
                        water.x=width+Math.round(random(1000,1400));
                        water.y=Math.round(random(rover.y,height-300));
                        jump.play();
                    }
                    if(rover.isTouching(atom)) {
                        score+=5;
                        score$=score;
                        atom.x=width+Math.round(random(299,499));
                        atom.y=Math.round(random(rover.y,height-300));
                        jump.play();
                    }
                    water.visible=true;
                    atom.visible=true;
                    break;

else if(touches[0].y<restart.position.y+50&&touches[0].y>restart.position.y-50) {
    if(touches[0].x<restart.position.x+50&&touches[0].x>restart.position.x-50) {
        state="start";
        rover.visible=true;

        water.x=width+Math.round(random(1000,1400));
        water.y=Math.round(random(rover.y,height-300));

        atom.x=width+Math.round(random(299,499));
        atom.y=Math.round(random(rover.y,height-300));

        score=0;

        switchPBtn.visible=false;
        restart.visible=false;
        ufo$.destroyEach();

        click.play();

        frameCount=0;
    }
}
if(water.x==0) {
           water.x=width+Math.round(random(1000,1400));
           water.y=Math.round(random(rover.y,height-300));
       }
if(atom.x==0) {
           atom.x=width+Math.round(random(299,499));
           atom.y=Math.round(random(rover.y,height-300));
       }

Good Game Design

I paid particular attention to my game design elements and UI interface to create the best possible user experience.

Uranium Atom Resource
Water Resouce

 

Mars Rock
Alien Spaceship

For the User Interface elements and buttons I utilized internet and created some of them using Photoshop tool.

Rules Button
Pause Button
Selection Circle

I am proud of my Pause functionality which not a lot of games of these type have. I think it is essential for the user to have an access to Pause button as he can be busy with other important matter and it would be pity to lose your progress just because of that. Code for Pause Logis:

else if(state=="pause") {

       sd=0;

       rover.velocityY=0;

       atom.velocityX=0;
       water.velocityX=0;
       stone.velocityX=0;
       ufo$.setVelocityXEach(0);

       textSize(20);
       textFont(font);
       fill(rgb(40,99, 235));
       text("Score- " + score$,width/2-30,100);

       restart.visible=true;
       switchPBtn.visible=true;
       switchBtn.visible=false;

       block[0].velocityX=0;
       block[1].velocityX=0;
       block[2].velocityX=0;
       block[3].velocityX=0;
       block[4].velocityX=0;

       block$.velocityXEach=0;
       block$.destroyEach();

       ufo$.velocityXEach=0;
       
       if(touches.length>0) {
           if(touches[0].y<switchPBtn.position.y+50&&touches[0].y>switchPBtn.position.y-50) {
               if(touches[0].x<switchPBtn.position.x+50&&touches[0].x>switchPBtn.position.x-50) {
                   switchPBtn.visible=!true;
                   switchBtn.visible=false;
                   restart.visible=false;

                   block[0].velocityX=-4;
                   block[1].velocityX=-4;
                   block[2].velocityX=-4;
                   block[3].velocityX=-4;
                   block[4].velocityX=-4;

                   click.play();

                   block$.velocityXEach=-4;

                   sd=2;
                   //alert("UP");
               }
           }
           else if(touches[0].y<restart.position.y+50&&touches[0].y>restart.position.y-50) {
               if(touches[0].x<restart.position.x+50&&touches[0].x>restart.position.x-50) {
                   state="start";
                   rover.visible=true;

                   water.x=width+Math.round(random(1000,1400));
                   water.y=Math.round(random(rover.y,height-300));

                   atom.x=width+Math.round(random(299,499));
                   atom.y=Math.round(random(rover.y,height-300));

                   score=0;

                   switchPBtn.visible=false;
                   restart.visible=false;
                   ufo$.destroyEach();

                   click.play();

                   frameCount=0;
               }
           }
       }

Potential Improvements and Challenges

Possible future improvements/ideas enhancing the game’s overall experience:

  • Power-ups can be added to the game to give the player temporary advantages such as invincibility or increased speed. This will make the game more engaging and provide players with a sense of accomplishment.
  • Multiple levels can be included in the game to provide players with different challenges as they progress. Each level can have its own unique obstacles and enemy UFOs, making the game more varied and exciting.
  • Including a high score system in the game can add a sense of competition, encouraging players to try and beat each other’s scores. This will also give players a reason to keep playing and trying to improve their skills.

Challenges

  •  Because I didn’t have any previous background in using sound and animation libraries I have spent quite some time figuring out ways of implementation and tested them extensively.
  • As mentioned in Midterm Progress post  for me the most frightening  or complex part of this midterm project was to implement a collision detection algorithm. I also have to somehow come up with an algorithm to distinguish between these various collisions with different objects. Because if the Mars Rover collides with valuable resources the Score should increase and if it collides with the rock or alien spaceship it should end the game and display the restart button. Luckily it was easier than I expected.
  • Putting different screen views into action and moving between them was a bit challenging for me. Particularly, finding my way back to the Main Page from The End screen without refreshing the sketch took some time to figure out. Eventually, I created a straightforward system that relied on flags to accomplish this.

 

Assignment 1 Self-Portrait

Concept

For my self-portrait I decided to attempt to draw myself doing something that I love: going on walks to distract myself from the real world and think about life. I was pretty ambitious at first considering this is my first time learning this type of material and my first time coding. At first, I imagined my drawing to be very complex. I wanted to try and incorporate a lot of movement to capture the act of walking, detail in terms of shapes and the setting, and a lot of color. I imagined incorporating nature, interaction, and even aspects of Chicago such as the skyline since that’s where I am from and walking around Chicago is one of my favorite things to do. Sadly, all of that gradually changed as I began to work on the drawing, and the drawing became much more simpler than I imagined.

Code Highlight

Using the p5.js references I was able to create my code and I was also able to learn how to use rotation and translation for a “moving” arm which is shown here.

//arm
  
  fill(210, 180, 140);
  rotate(radians(20));
  translate(90, -50);
  rect(110, 290, 50, 10,10);

 

Embedded Sketch

Reflection & Future Directions

Though I like the outcome of my drawing, I think it could have used more movement considering my goal was to capture the act of walking. Even though it does look like a simple drawing, it was still rather difficult for me and it took me a lot of time to grasp the basics of the principles that we have learned so far.  I definitely learned of at least one approach that I should not take to complete these assignments. In the future, I want to play around with more functions and find a way to make things easier for myself, possible take more time to watch tutorials and try different codes for the same outcome to find what best works for me. Overall, I did enjoy the challenge and I am excited to continue learning as well as challenging myself. I would possibly like to in the end, try and recreate this assignment with the initial image that I had for it.