Making a Truly Synchronous Chat by Matching Word Bubbles

From the simple delivery of the letter by horse-back riding in ancient times, we know that people has demanded the synchronous information delivery between people.

However, as a social norm even if we are in the live chat with video and sound, we know that it is impossible to have the truly synchronous delivery of the information.

The maximum limit of this demand only  reach to the point where one start talking the other person has to stop in order to listen to other person.

So, here I wanted to experiment, what if we talk truly instantly by chatting with matching word bubbles.

Through out the experiment, I found that even if we have this matching system, one user waits until the other user  stops writing. It is just a matter of time human brain processing.

LINK TO THE WORK: https://dyk286.itp.io:8080/index3.html

1. BACKGROUND

We have a common sense in conversation that we keep ourselves quiet when the other person speaks. It is true that overlapping one’s voice over the other is rude. However, we have this social norm implemented in the chatting too. The chatting is synchronous platform and we can read the text as we are typing.  So I want to make synchronous text chatting.I wanted to make a new way of chatting that people keep talking and overlap their voices over the other.

2. DEVELOPMENT

I was introduced with the video and the audio which changed the thought process. Also in terms of data ownership the p2p ID generation is very clear, it is data-free(no data stored).

So, I worked on the css, html, javascript to make this project working. I used Tone.js to make sound just like other chatting webpage.  Here is the link it is working only when I run the server.js. As I am working on it I kept googling to get the answers that I want to have. As I am making this chatting, I changed it to refresh every 1minute. In this way it will make the users in the one starting point as time goes. It is the starting time of getting synchronous. So I tested the chatting with people.

3. User Test

First I wanted to have the functional completion. I chat with the friend in France and it proved the P2P is possible World-Wide and during this test I learned the lesson that in terms of video chatting, the video should go with the audio. However, in terms of drunken chat, the audio and video are constraints because it breaks the need of word bubble. So, I muted the audio and shrank the size of the video. I conceptualized it as an on-air kind sign of the broadcasting.

4. Design/Naming

I had a hard time struggling with the design and colors. At the end of the design, I made the design more seamless and made it more crisp by shadow. Also as I design the div I thought of the matching word bubbles as the fistbump. So I made a logo looks like a fist-bump.

5. Modification

I modified the design into something that I like not following Google’s material design because material design does not covey my philosophy, fun, human interactivity.

1. Proposal
   The original plan was to make a visualization of mathematical equation. If you are familiar with Maya there is phong function. The function that changes the surface of the object in 3D. However, the Phong is named after a mathematician whose name is Phong. So, what we see on the screen is often from the mathematical equation done by some mathematicians. So, my goal was to make a visual representation of the mathematical equation.
2. Average Equation
   So, I started with a simple equation using array. The reason that I thought of using array is that because the value that influence the visual got to be changing over time. So, I started with average equation. It was easy approach because the array can be divided by the length of the array. So, mouse X values are summed up in the array and the sum of mouseX is divided by the length of the array. I divided the windowwidth into two that if the mouse X is on the left side, it will be the negative value and if the mouse X is on the right side it would be positive value. In this way the visual would be able to increase and decrease its shape over time.
3. User Testing A
   I showed this to the class and classmates were perplexed by the complexity. They did not get the what the mouseX is doing and why the visual is keep changing. I needed to explain what the logic is behind and clarify the user interaction.
4. User Testing  B
   I simplified the visual and showed it to one of the ITPers and I got a suggestion of using a webcam. So, I created the webcam and mouseX interaction. However, even after, the mouse X was not responding fast enough. I needed something that the value changes dramatically. If you put your mouse on the right side for a long time then, you would be able to see the lines moving and moving objects over the webcam will change the movements of the lines. Also if you put your mouse on the left side for a long time then, you would be able to see the lines are diminishing. https://www.doyoki.com/project/icm/finalfin3/
5. Thanksgiving Break
   I was in the bed, dreamed that I was in the darkness and saw black ellipses moving. So, I woke up and I just opened up the laptop and started to make a black ellipse changing its radius. However, the ellipse was only getting big but small. So, I changed the if statement adding “c = -c;” Now, ellipse was changing big and small.
6. Exponential Equation
   So, I played more with ellipse making more like my dream. I needed an exponential equation. So, I changed the code from  “c = c d” to “c = c d*f.” The “f” is the counter in the for loop so it would change the value in more dramatic as:
   1 1 * 1 = 2
   2 2 * 2 = 6
   6 6 * 3 = 24
   And after changing the equation, when I looked at this sphere getting big and small, I felt like I was in the space approaching to and flying away from the star.
   
7. Final
   I added more colors, more ellipses later. And I eliminated the mouse and the webcam interaction because I wanted to eliminate user’s misunderstandings. Here is the final.
   https://www.doyoki.com/project/icm/finalfin2/
   And here is the visual interpretation of code. You can see the radius of the ellipses are changing in bigger scale.
   https://www.doyoki.com/project/icm/finalfin/
   And here is the code.
   https://gist.github.com/kdoodoo/45074466d268ed84d66a
8. Conclusion
   ICM got me a better understanding of the code. I was in the computer engineering major for the first two years of college and back then I enjoyed elective courses like design 101 more rather than doing the labs on C# and  C . ICM got me better that I like coding now. And I cannot believe there are only three semesters left at the ITP and it feels much different from the first semester of the 4 years of college. I am running out of time. ITP gotta be 4 year pr0gram.

The graphic is from the WEBGL of P5.JS. I made a music composed with FL Studio which is YES. The other is Grace’s recent music, You don’t own me. So, YES conveys my thought process well.

The music is continuously in loop. The musical sense is in a normal state that audience enjoys the music. Once the user is curious about the interaction, it might click. As the user click the mouse button, there is a transition to other view.

If that view is in temptation one will continuously click to explore as the the other music interferes the sense of normality.

And if one keeps clicking on the mouse the music will trans into abnormal state which will lose the sense of the music but it will be a noise.

As a result, I named the work, Anxiety Explosive.

Technical Note: I used the Tone.js, P5.js and WEBGL. The boxes are outcome of analyzer of the tone.js that the box’s XYZ dimensions are stretching and contracting and also it rotates related to the analyzer. Also, when the mouse is pressed, the camera is triggered related to mouse X and Y positions.

FULL SCREEN1

FULL SCREEN2

LINK TO THE INTERACTIVE MUSIC>>

I made this song which contains sad mood. From the song, I wanted to play with it and I made this.
And here is the code.

https://gist.github.com/kdoodoo/34622129d324d9a626e7

From the tone.js I played with the player because I had this mp3 file on my server and I combined the player with the javascript canvas. After making the canvas the mouse position is manipulating the parameters of the Tone. Player.