alt interface

Adding an alternative interface that would recontextualize the experience of interacting with a previous Code 2 project. Uses the DOM and JavaScript event handlers.
The alternate interface sort of turns the 空 interactive type into a meditative mobile app, playing with device orientation sensors.

This project does not work on desktop and works best in it's own page on mobile. May or may not work on Andriod devices.
→ link to page
→ link to code

Any movement or interaction with the mobile device will trigger something on the page, ie unrest. Cease/acknowledge interactions with the device, leaving the device alone, to return to tranquility and a white page.

Design Process

I chose to create an alt interface for my 空 interactive type project because I couldn't really think of anything meaningful to add to the other two(experimental camera & digital divination) in terms of interface that would recontextualize.
My initial idea for this project was completely different. I wanted to give more control of the interactions and things to the user, diverging from the original project. After conversations in class I ended up going towards recontextualizing my project via mobile things instead, and playing more into the serene feel of the original project and the meaning of the word.

In working out my concept for mobile things, I wanted to create a space that was busy and intrusive, surrounding the word '空' to contrast, and then to allow the user to clear the distractions by closing things or dragging them away and then to reveal the '空' as a meditative process.
I immediately realized that you need permissions to gain access to mobile sensors and interactions on Apple devices running iOS 13 and up. I followed this video to figure that out. I also realized that I wouldn't have the time to figure out a lot of the thing I initially wanted to do, so I narrowed my focus to using orientation sensors and pop ups, along with adding some additional information about the experience.

I only have access to Apple devices in my immediate vicinity, so I was only able to test it for iOS. I asked a friend with a Google phone and it worked for them, but it did not work for my other friend with a Samsung.

Reflection

This project was incredibly difficult to come up with an idea for. I was really stuck in a rigid mindset about the existing interfaces for my experimental camera and digital divination projects, and I thought about what to do with those two for a long time before finally moving on to the interactive type project as a possible option. And even with the interactive type, I was really fixated on the "recontextualization" aspect of this project and thought I needed to completely reimagine and create a completely different atmosphere from the initial project. Talking to Xin helped a lot to refresh my mind.
I think there's a lot I could probably add to this existing project to elevate it into something more complete, and I need to work out the problems with Android, but for now I could consider this to be at a satisfactory level.

Credits

This project uses the fonts Averta & 方正黑体, and uses code from this video for iOS 13+ device orientation access.