pcomp_midterm_How_ Human_Touch_Virtual_Space

pcomp midterm

Bubble Billiards

How can human touch the virtual space? It is question I asked myself for two years after I created an application named “Get & Put”, letting human become the courier of data transfer, to grab pictures and music from a touch screen and put them into another touchable devices.

Could I create something that is more visible for human to see themselves touching the virtual space? Can I break through the virtual world and the physical world and let people just put, fill or through something inside the screen?

Bubble Billiards is an interactive experience where the user can bridge the physical and virtual worlds. They can push a “real” glass rod into the screen to change the trajectory of bouncing virtual glass baubles.

The virtual space has two areas. Inside the interactive space, the baubles operate under true laws of momentum, but with added resistance, as if rolling through a physical space (and therefore slowing in speed due to friction). Outside the interactive space, the baubles aren’t constrained by any physical properties like friction and truly exhibit the properties of conservation of momentum.

For the midterm projects we were paired up with the fellow classmate, my partner is Christina B C. Our work has been separated into two parts:

  1. Coding and visual design.(Me)
  2. Physical installation.(Christina)


My work flow:

Firstly, I looked into the data sheet of the potentiometer.

* Size: 90 * 20mm
* Weight: 18g
* Voltage: 3.3V, 5V
* Port: Analog
* Resistance: 10K
* Platform: Arduino, MCU, ARM, raspberry pie
* 75mm slide quality appliances,  sports performance and stability along
* Dual Output, Dual linkage
* Analog output 0-VCC voltage signal

I drew the system diagram to sort out my ideas. I connect the potentiometer to Arduino, added a resistance to protect Arduino board. P5 editor acts as the server to connect the sketch, running in the browser or P5 sketch window, with the serial port on my computer. The potentiometer is connected with the analog input on my computer, input volts could be changed by the change of the valid resistance of the potentiometer. The handle of the potentiometer should be adhered a glass stick. The range motion of the handle should be as same as possible with the range motion of the glass sketch inside the screen.


Then I tested the resolution in practical by coding a very simple program, just using the potentiometer to control the x-coordinate of a white ball in P5.JS.

Untitled-1-01 IMG_3965

Then I am thinking about What will the virtual space looks like. I tried many possibilities. What is the meaning of put something into a screen?

wormhole-wide 1-wormhole-trip-pet-serrano

I asked a crap of talent from ITP about this question, and people inspired me a lot. Especially thanks to Hao’s great creativity that inspired me a lot and finally I realized that I am doing this is because something happens in the virtual world cannot happen in the real world. Finally, I decided to create a space based on the law of conservation of momentum.

I drew a glass stick in AI, and load an image in P5. The effect is really good, and I decided to build a space based on glass effect.


P5 is still with very few 3D api, so I decided  to create a “fake” 3D effect by drawing several circles as masks based on the same center but different diameter, and set the background with increasing scale by the increase of diameter in P5. Then put a PNG exported from Adobe Illustrator on the top of the circles drawn in P5 to show the shadow.


P5 Drawing


Adobe Illustrator drawing

Background picture is totally a hard choice, after more than 1o tryings, I decide to draw a big glass ball and set the container as the interactive area. I dig a hole on the right of the ball to reserve a space where the glass stick could access.


I surf on the internet and found a really good graphic design, and I put it in the center of the glass container and drew the whole background in photoshop.


Cristina who a strong sensibility of beauty and learning ability. She made the very beautiful installation that meet both needs of function and aesthetics. I was surprised that the glass cue she bought has the exact diameter with my running P5.JS and the container to hold the Arduino is very delicate!!

IMG_3966 IMG_3967

The potentiometer’s liner only support 6cm movement that is really an limitation to the user-friendly interaction. To get over with this limitation and to chase perfect, I added various physical motion model by creating a set of chain reaction among the glass balls to expand the interactive area, thus the interaction could always be continuos and users are satisfied due to they only need to do less to get more effect. For the physical motion part, I really appreciate my dear friend LightRabbit, a genius geek, whose kindly help and some part of the code support helped me taking the ideas to reality.


Arduino Code:

const int sliderInput = A0;
int sliderValue;

void setup() {

void loop() {
sliderValue = analogRead(A0);


p5 code:

<script src=”https://gist.github.com/muqniu/c32246e3b9608b790a94.js”></script>

2 Responses

Leave a Reply