Final Project Progress – Sarah & Ons

For this week, we decided to focus on the Processing side of things, since Arduino will only play a basic role in our project (control x and y positions using potentiometers).

research

When the two users’ paths meet on the screen in an area where they have something in common, a blooming effect gets triggered. (PS: Determining a commonality is done through comparing the answers to questions that are collected at the beginning of the program).
This is the part we needed to do the most research on. We wanted to get some inspiration to figure out what the blooming effect should look like, and how it should work.
We found two concepts that seemed interesting to us so far, and messed around with the code so that it would fit our project a bit better:

• • • • The first one draws fireworks, which we thought would be cool as it can represent a spark between the users if they have something in common. However, in the case that we end up choosing this effect, we are still trying to figure out how to make the fireworks stay displayed on the screen properly after the “animation” bit of it is over.

• • • • The second one is represented by the blooming of a flower.
        We added the option to add the number of “petals” so that we can see how different it would make the sketch look. We were also thinking of using this functionality to go along with how similar the answers of the users are.
        The possible answers for each of our questions are going to be: 1, 2, 3, 4, which signify how much you agree or disagree with the question. So we thought that the number of petals could increase the more the answers of the users are closer together.
        You can visualize this through this video:

What we got done

• • • • The first thing we wanted to make sure would work properly is the trace the users would leave when moving around the screen. In our final project, each user will have two potentiometers, one would control the x-position, the other will control the y-position, This allows them to move around and “draw” freely on the screen. Since hooking this up to Arduino will be fairly easy, for now, we are just using 4 keys on the keyboard to simulate this for each user.
        We wanted the current position of the user to be represented by a point that is fully opaque, and the trail it leaves behind it to be a bit more transparent.
        This took a lot of time for us to figure out but the solution turned out to be quite simple. All we needed to do was draw a black rectangle with the screen dimensions, that had a really low alpha value (3 in our case) each frame, i.e., in the draw loop.

      • The second thing we did was try to detect collisions between the traces of the two users. We did this by turning the screen into a grid. Every time a user crosses a square on the grid, a boolean for that user turns to True. If both the booleans for both users become True, then a collision is detected. For now, we are representing the collision by a big dot. But this will later be replaced by the blooming effect we mentioned earlier.
        To fix: One issue we still have with this, however, is that if the user’s path is between two squares of the grid (each half in a different square), two dots may be displayed to represent one collision. We are working on fixing this.

• • • • Finally, we also started working on our Question class. This will be a “template” for all of the questions we are going to include in the beginning of our program. We started to think about all of the variables that the class should have.
        Here is the current code for it, it’s just a start as most of our work on it was brainstorming and discussion:

class Question{
  //variables to store input answers
  int user1Answer;
  int user2Answer; 
  //question location (corresponding to area on screen)
  int x,y;
  //question box dimensions (it could be something that we design and upload to processing(?))
  int w,h; 
  
  String questionText; 
  
  boolean user1Answered;
  boolean user2Answered;
  
  boolean sameAnswer; 
  
  
  
  void displayQuestion(){
   rect(x,y,w,h);
   text(questionText,x+w/2, y+h/2);
   //rect();
   //rect();
   //rect();
   //rect();
  }
}