Ever since the pandemic has started, I haven’t got much chance to go out and meet with my friends yet, neither have I went back to Shanghai (and possibly won’t until next year). So, I created “ROOM WITH A VIEW” – a sharing tool for people to share the views from their windows (or from any other places people would like to share) with their friends and families in virtual apartment cells.
Each user gets assigned to an apartment cell with their local time and time zone displayed at the sides of the room. Users can share their live stream videos via this pixelated window to others. The wall colors of the rooms are mapped to the local time zones of each user. Besides from the live stream, users could also move around the touch screen to animate the clouds ☁️
The app works by using firebase (an online database service) to store drawings and associate them with the user (each user signs in anonymously and is given an id tag). Each request is also stored in this database. Each time the drawings are updated or the user switches from their drawing board to their canvas, the program checks the creator of said drawing and only draws the drawing on the canvas if it was not created by said user.
Overall, making this app was very challenging. I think I could have simplified my idea a lot more and gotten a much more successful outcome. Though the app does generally what it is supposed to do this comes at the expense of nice UI and presentation.
TRON RACER is a networked game in which players can leave trails as obstacles which deduct opponents’ lives. ( APP | CODE )
TRON RACER was definitely a challenging project to complete. I was inspired by the light bikes (original, legacy) from TRON. From getting the interaction of tilting to behave correctly, to making the global and client view's look aesthetic and accurate, there were plenty of programatic roadblocks. Since it is a game, the interaction is active and synchronous. However, establishing equal synchronicity was quite interesting because certain devices have higher frame rates, which allows more distance to be covered in the same amount of time as a device with a slower frame rate. To compensate this, I learned how to update the clients based on time rather than based on frame rates. As it is now, I enjoy the aesthetic of playing TRON RACER, but there are still some bugs with some client devices appearing too zoomed in.
Documentation
Initial SketchesPrototype of describing phone orientation as motionGlobal View.Client View
Sweetmail is a messaging platform similar to email but more intimate. It runs on voice commands, as there is something special about speaking the words “I Love You” or any other expression of affection in comparison to typing the words. It is designed to be used asynchronously among however many people find this platform meaningful. This allows for you to express your affection whenever you feel it, to whomever you feel it towards.
I think the use of voice recognition is inconvenient and obtuse to many, but implementing typing on mobile websites was even more inconvenient and obtuse. I would also have been unable to use Lingdong’s p5.hershey.js. The inaccuracies of speech recognition are much like natural communication in relationships. Holding ourselves to perfect transmission of our ideas is unrealistic and can be overwhelming.
Letters are stored using lowdb and users are only shown the letters written to them. I’ve written a letter to everyone in this class using their course nicknames. If you have an odd spelling or the program isn’t recognizing your username, try spelling it letter by letter.
Shake2Break is a quick competitive phone shaking game that could be used to solve a minor dispute by deciding the rank/order of people. (2 players required to play)
Project Reflection:
This project was a nice opportunity for me to learn how to implement client data / server data in server.js, as well as how to utilize sensor data from a mobile device. Although I was initially intimidated by the idea of using server.js and mobile sensor data (as I’ve never used nor seen a code for either of them before), I found implementing server.js and manipulating mobile sensor data very interesting and fun to play with. Since it’s my first time using those, I wanted to begin with a project that is simple yet to the point: an active synchronous shaking game. The server requires two players synchronously present to begin the game. Once there are two players, the competition begins, where each player can shake their mobile device back and forth to engage with the accelerometer inside the device, specifically the accelerometer data along the z-axis.
Demo Video:
Demo Video with Animation Intro:
Game Start:
Each shake is counted only when the player shook the phone “hard enough” (i.e. the acceleration in the z-axis is greater than 70). The circle’s radius is drawn in the intention of helping the player visualize the acceleration of the phone.
There are 10 rounds of 10 counts to fulfill (hence total of 100 shakes), and the progress of the player is both numerically and visually (filling up the square) represented.
As a player, you could see both your progress (indicated as “ME” on the top left corner), as well as that of the opponent’s.
Mid-game:
(Shaking each phone very hard…)
Game End:
Once the player reaches 100 shakes, the rank is assigned and shown based on who has reached 100 counts first.
This project is ...This app targets couples who are thinking of getting a dog, and I was inspired by my own concerns over couples adopting / purchasing dogs in the midst of covid loneliness. I am afraid that a lot of pets will be abandoned once the virus is no longer present, and people's lives will be back to normal. A lot of people have no real idea of the work behind taking care of a dog, so I wanted to have this experience simulation that let a couple recognize if they are both ready for the responsibility.
My Reflection on this Project
I had a lot of fun making this project, and creating the assets for the interface, also the exposure to backend server and database was much appreciated. I always wanted to explore backend but procrastinated to do so until this project asked me to! Overall I'm pretty happy with how it turned out given the time constraint of the project.
My project touches on mainly touches on the following theme: Asynchronous vs. synchronous:Do the two people collaborate simultaneously, or at different times? By design, it is most likely that people will be collaborating asynchronously in this app, remembering about their digital pet at different times throughout the day. The record keeping feature highlights how many times did they each individually contribute to the well-being of the digital pet.
Snail Mail allows users to deliver messages one character at a time, once an hour.
My project is definitely a critical reflection about communication, specifically texting. When approaching this project, I thought about how I could change text messaging to make messages more meaningful. I consume so much media that I sometimes forget what a text says immediately after sending/reading it. Originally, I planned on making a messaging app that allows users to send only one message per 24 hours. Additionally, I wanted users to wait 24 hours to see their message. I simplified the execution of this concept while focusing on making texts more precious/rare and text messaging more archaic.
Under the current texting system, many people fixate over the time it takes someone to respond to their message or the amount of texts someone sends them and try to extract meaning from those behaviors. I wanted to create a simpler form of texting with less fixation.
Other sketches are in the form of written notes, here are some:
messages slowly revealed over 24 hours (simple animation, e.g. text fade in)
reward users for waiting 24 hours to open the message
record voice memos that are delivered years later
Snail Mail (Currently set to deliver once every 2 minutes and only works on my laptop)
A garden gnome hangout! This idea was inspired by my very own friend’s obsession with gnomes, especially in the Animal Crossing: New Horizons game. I dedicate this to her.
I wanted this project to be synchronous in that you can immediately interact with those who are also on the app alongside you in real-time. It should be able to function remotely as its purpose is to be able to interact with people across the world; however, I did put a limit to only 3 people(likely to change). I would like to have this as a concept of safely saying hello to anonymous people, but that is all they can do… hang out with each other. In this way, with a smaller group, I believe a sense of curious intimacy can happen rather than a large group of users. All users have equal roles which is just dragging their finger around the grass acknowledging the presence of each other.
This project is a collaborative pixel environment, where two users get assigned a role of black or white pixels and together they make small drawings or icons.
I actually really enjoyed making this game, my original idea was somewhat more simple and straightforward, it was more about drawing and erasing the lines people make. In this version, I implemented a way for two users to alter the same space simultaneously in different ways. I was primarily concerned with the idea of collaborative drawing and a relatively limited set of tools — In essence, both players can attempt to make compelling images just by using their color, but when they are connected, they are able to push it and collaborate to make something interesting. I especially payed attention to the third design issue listed in the deliverable — Equal roles vs. complementary roles— because to me, the idea of two people assigning each other tasks and roles to make something is interesting. Naturally, both colors will have different functions. Often, white is relegated as the background and black as the foreground… but what if the prompt wants the user to draw a night sky? Or a blank notebook page? This project is ultimately about the communication and problem solving these two parties use to reach their ultimate goal, especially when most of the prompts are abstract or have different interpretations.
Overall, this project was surprisingly difficult to make, but really rewarding and fun. The actual game was easy, but there were a lot of weird things about using UUIDs that made it funky (mostly just in trying to continuously update the same data from two different places). There are a few minor things about the interface that were not relevant to put on the video. I made a little help pop up, and a way of saving the images locally. These things aren’t really important, but I thought were worth mentioning.
I think the weakest part of my project is my documentation, I don’t have the best camera equipment so I spent most of my time trying to set up a way of filming myself without a tripod. I should’ve spent more time thinking about alternatives rather than brute-forcing it. For that reason, I am going to try to re-shoot my video in a way that get gets the message across in a more creative manner.
I personally have been having a lot of fun playing this game with my friends, we actually have made a lot of small drawings together and it has been a fun way to get connected over this shared language of pixels. And while the images in the videos are somewhat ugly, there is a lot of possibility to make compelling icons together:
Some drawings I did with friends (screenshots showing the interface):
Some extra doodles (saved using the save button):
(This is Benford)
Finally:
PROCESS:
MINOR EDIT: I added quotation marks after the prompt: ex. Draw “Rejection”
Kindle (Soli Candle) simulates and resembles a calm and gentle candle, one that is tranquil and contains energy like a little heartbeat. The candle flame behaves like a regular candle, where it swings and sways with forces and wind that act upon it. A swiping gesture with your left hand or right hand will disturb the candle, and will sway in the direction temporarily, then falls back in place. A tap gesture puts the candle out or ignites the candle if the candle flame is out. There’s also an “up-swipe” feature that allows the user to turn the calm candle flame into a powerful fire-beam generator, creating a colorful blaze that also spouts out a little smoke from the overheating.
