Key concepts and intentions

The project creates an experience that allows people to interact with one another by writing down their messages, folding into paper boats, and floating and receiving the virtual paper boats on the sea. In this project, people are a functionary and participatory part of the interaction itself, which in turn provokes a strong emotional and spiritual experience. Audio is used to enhance the experience as well.

Homepage: 1 line description + 1 button to start

Add info on paper + 1 button to fold

Folding + floating animation

Clicking on boats + a pop-up window displaying the info contained

Production decisions

Client 1

Detect user IP and click on a paper to "stamp/record user's location to the paper according to IP (stamp pattern/logo)
Fold a paper boat (animation)
Float the paper boat on the sea
Send the paper boat info to the server

Server

Receive the boat information
Some logic to "send" the paper boat around (i.e., when the next user asks for a boat, randomly or selectively send the info of a boat)
Send the client a boat information

Client 2, 3, etc (except for Client 1)

Do all the things that Client 1 does

Below is catching a boat from other clients

Receive a boat's information from the server (except for the info that the client just sent)
Display the paper with all the locations it has recorded (i.e., all IPs recorded)
Detect user IP and click on the paper to "stamp"/record user's location to paper based on IP (if applicable)
Fold, float, and send info to the server again

//Thanks to YG for the support of production planning

Major challenges and solutions

Fold page

Folding animation automatically plays after clicking the button

onclick="show();"

Automatically jump to the Float page after the animation ends

'ended'

Float page

Load .glb 3D models into Three.js

Add boat into Three.js scene when users fold the paper boat

for loop + Class

Use raycaster to locate the boat position, add click event

Relevant references and resources

References

Built models

Animation and audio

Next steps

The project incorporates NeDB, Node.js, Three.js, and p5.js. A physics library would be applied as a next step. In addition to typing in the virtual form, users will write with a real pen and paper. These data will be uploaded in real-time to the virtual paper on the web page. Each boat will then be associated with a specific data string.

One more thing I would like to mention is in most cases, the deployed project fails to store the user's input to the database in real-time. However, I just noticed that the deployed database has new data stored on Line 14 and Line 16, but is missing a piece of data that existed prior to the deployment. I am not quite sure if this is caused by Glitch, and so far no solution has been found. Hopefully, someone will get it fixed in the future!

🎬 Video Documentation
✏️ Doc Documentation
👩‍💻 Presentation Slides
🔛 Deployed Project
💻 Project Code

🎫 Exhibited at ITP/IMA Winter Show 2021 & YORB Gallery
🙌 Made at NYU's IMA Low Res program with Yutian Wang