Month: November 2022

Paint Area game

         This project is meant for all type of people, especially people who enjoys competition and gaming. Me and my partner researched how we could make a project that involves both Arduino and Processing. We were inspired by random games throughout the internet, and we combined the advantages of each one and created our own. Our definition of interaction made us brainstorm the design of the project for a reasonable amount of time. We wanted the users to interact with the screen more than just with buttons and clicking. We wanted them to feel like they were in the actual game.

         Our project’s goal is to create a game that involves the domination of the area. We wanted to create a 2 player game, where each one will control a “paintbrush”, and the goal is to paint as much area as they can in a specific amount of time. We also decided to include power-ups in order to make the game more interesting. In terms of interaction, we decided to create a “steering wheel”, where the users would feel as if they’re actually steering the paintbrush in the game.

         Our preparatory research and analysis impact/inspire our projects in many ways, including interaction, design, concept, and many more. As I said before, we were inspired by many games on the internet, and we take the good things from each one for our own project. Our project aligns with the term interaction because the users have to steer the steering wheel physically in order to move the paintbrush in the designated direction. The users input value by steering, and the input would interact back to the users by displaying the control that the users did. Most games similar to this were already created on the internet, but what they lack is the interaction that the game has with the users. However, our project would elevate what they had because we include more things into the game as well as making the game more interactive with the users.

Step 1.1: Design

I worked with Nuri for this recitation class. After discussing with each other, I represented Student B while she represented Student A. Although this step is quite simple, we still took some time since we are both unfamiliar with using cuttle. 

Step 1.2: Pattern design

Me and my partner spent most of the class’s time on this step. We couldn’t figure out how to make the pattern work correctly since some designs will result in laser cutting through everything. However, with the help of the professors and the learning assistants, we were able to finally complete our 2 designs on cuttle and proceed to print them.

Step 1.3: Export your design

This step was relatively simple, so we didn’t struggle that much with it. We exported our file as an SVG and then uploaded it into google drive as required.

Step 2: Laser cut

In this step, me and my partner went to the fabrication lab and laser cutter our design. The process itself was amazing to watch, and it didn’t take as much time as I thought it would. 

Step 3: Assemble 

After we printed our boards, we opened Arduino and follow the steps from the recitation guide. After that, we assemble the boards to the motor and the Arduino, and everything worked out as planned.

Task #1 Documentation

This task started off straightforwardly because we’ve done the hardware part so many times before. The code was also given to us so the first part started off pretty strong for me. However, I was struggling with the second part where I had to replicate Etch-A-Sketch. I went back to the code in order to understand what the process is, then I asked one of the Learning Assistants to help me solve the problem. After some tips and comprehension, I was finally able to grasp the concept and succeed in making the Etch-A-Sketch replica. The interaction was between the 2 potentiometer that controls the x and y axis, which would then output the relative position of those values on Processing.

Task #2 Documentation

Teammate: Stephen Li

This task was extremely hard for both of us. At first, we couldn’t figure out how to link Processing with Arduino since our first trial didn’t work at all. We couldn’t figure it out throughout the class and we had to work after the recitation ended. We decided to check the codes separately on Arduino and Processing, and both of them seemed to be working well independently. After some help from the Learning Assistant and our own trial and error, we were able to do what the task assigned. The interaction is the circle would hit the edge of the screen which would then output that to the motor to turn, as if it was hitting the circle back the other way.

B.

An interactive project that I found incredibly interesting is a project from Majeed Kazemitabaar on Youtube. He built an interactive glove that links to a TV screen where he can control it similar to a remote. He also used it to play video games in the video, which is awesome. I chose this project because it is also similar to the project I did during my midterm project, which was much simpler compared to this. This project not only incorporates finger tapping (which I did in my Midterm Project), but also finger speed, finger orientation, and finger bending. All of these detections lead to different outputs on the TV screen, thus increasing the interactivity between the user and the technology.

Another interactive project I found very intriguing is a project from the Arduino website. This project combines both Arduino and Processing, both of which we have already learned in class. This project creates art on a screen when we move objects in front of a sensor. The sensor would input the value of the distance between the object and the sensor, and the output would be converted into shapes and colors, which would be displayed on the screen based on that value. I want to do a project similar to this because it would challenge me to tackle both Arduino and Processing at the same time, which would eventually turn out to be a captivating experience for the user.

https://www.arduino.cc/education/interactive-art-project

C.

I believe that a successful interactive experience must include a unique interactivity between the user and the technology. The interactivity has to be something memorable that the user has not experienced on a daily basis. I also believe that a successful interactive experience should include the user learning something new from this interactivity, and not only just the purpose of the project but also something new that was created from the interaction. In the article “Art, Interaction, and Engagement”, Ernest Edmonds defined one type of interaction as Dynamic Interactive, which states that “the human ‘viewer’ has an active role in influencing the changes in the art object.”(Edmonds, 3). This supports my definition of a successful interactive experience because he also emphasizes the part where the user has a prominent role in shaping how the final output would end up based on their input.

https://drive.google.com/file/d/1YYyhVTtNTBXQP2dlK8vE_QRJnpmCGvTE/view

Recitation:

Code:

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}

void draw() {
  if (frameCount % 50 == 0) {
   fill(random(255), random(255), random(255));
  }
  rect(20, 20, 1004, 740, 20, 748, 1004, 748);
  fill(50);
  text("IMA",400,400);
  
  
  
  for (int y = 0; y < height; y = y+40) {
    for (int x = 0; x < width; x= x+40) {
      if (frameCount % 50 == 0) {
        fill(random(255), random(255), random(255));
        strokeWeight(10);
        textSize(120);
        text("IMA", random(1000), random(755));
      }
      }
    }
  }

 

In this recitation period, I learned how to create animations in processing. It was quite difficult to learn this art but it turned out as a great experience in the end.

Task #1: Add a Fixed Pattern

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}
void draw() {
  int r = int(random(0, 255));
  int g = int(random(0, 255));
  int b = int(random(0, 255));
  if (frameCount % 50 == 0) {
    background(r, g, b);

    for (int y = 0; y < height; y = y+40) {
      for (int x = 0; x < width; x= x+40) {
        fill(random(255));
        rect(x, y, 20, 20);
      }
    }

    fill(random(255), random(255), random(255));
    circle(random(1000), random(700), random(700));
    circle(random(1000), random(700), random(700));
    circle(random(1000), random(700), random(700));

    fill(random(255), random(255), random(255));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));
    rect(random(750), random(750), random(750), random(750), random(750), random(750), random(750), random(750));

    fill(random(255), random(255), random(255));
    triangle(random(200), random(150), random(200), random(150), random(200), random(150));
    triangle(random(1000), random(750), random(1000), random(750), random(1000), random(750));
    triangle(random(201, 500), random(150, 300), random(201, 500), random(150, 300), random(201, 500), random(150, 300));
    triangle(random(501, 700), random(301, 501), random(501, 700), random(301, 501), random(501, 700), random(301, 501));
    triangle(random(701, 1000), random(501, 751), random(701, 1000), random(501, 751), random(701, 1000), random(501, 751));
  }
}
void mousePressed() {
  fill(random(255), random(100), random(100));
  strokeWeight(10);
  textSize(120);
  text("IMA", random(1000), random(755));
}

With the help of Youtube videos, I was able to understand how to create patterns on processing.

Task #3: Make it interactive

Code:

void setup() {
  size(1024, 768);
  background(255);
  fill(102);
  strokeWeight(10);
}
void draw() {
  int r = int(random(0, 255));
  int g = int(random(0, 255));
  int b = int(random(0, 255));
  if (frameCount % 50 == 0) {
    background(r, g, b);
    
    fill(random(255), random(255), random(255));
    circle(random(1000),random(700),random(700));
    circle(random(1000),random(700),random(700));
    circle(random(1000),random(700),random(700));
    
    fill(random(255), random(255), random(255));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    rect(random(750),random(750),random(750),random(750),random(750),random(750),random(750),random(750));
    
    fill(random(255), random(255), random(255));
    triangle(random(200), random(150), random(200), random(150), random(200), random(150));
    triangle(random(1000), random(750), random(1000), random(750), random(1000), random(750));
    triangle(random(201, 500), random(150, 300), random(201, 500), random(150, 300), random(201, 500), random(150, 300));
    triangle(random(501, 700), random(301, 501), random(501, 700), random(301, 501), random(501, 700), random(301, 501));
    triangle(random(701, 1000), random(501, 751), random(701, 1000), random(501, 751), random(701, 1000), random(501, 751));
  }
}
void mousePressed() {
      fill(random(255),random(100),random(100));
      strokeWeight(10);
      textSize(120);
      text("IMA", random(1000), random(755));
}

I was able to learn how to use the void mousePressed() in this code, and it turned out to be extremely useful.