Motion
Interplay
Poster
The brief of this project is to create an interactive screen-based experience utilizing the different skill sets we learned during our first year of CiD class. The aim is to create a playful yet straightforward interaction that can engage the users in various ways and also sum up all the various coding techniques we acquired in class. Among the different interaction inputs we learned, our group decided to use the mouse and keyboard interaction. Using these two functions, our group will create a “Motion Interplay Poster.”
From the time we ride the lift of our apartment to the moment we walk through the MRT station, we pass by numerous posters in our daily life. However, among them, the images and information that last in our minds aren’t a lot; in other words, many of these posters aren’t creating enough “interaction” with the viewers. The ordinary paper posters could be efficient in delivering information to the viewer, but sometimes they lack “interactivity,” which plays a significant role in catching the viewers’ interest. From this initial idea, our group brainstormed in what ways we could increase the interactivity in posters. For a solution, we derived from designing a “Motion Interplay Poster,” which is a visual display that includes motion play that the viewers can try out. Our coding will work on a 3D space and utilize Mouse and Keyboard interaction as well as orbit control.
Keywords
User Interactivity, Keyboard/mouse Interaction, 3D, Orbit Control, Moving Poster
“Design is not just what it looks like and feels like. Design is how it works”
– Steve Jobs.
Issues encountered
Our biggest challenge was navigating the entire code in a 3D space. Since our previous coding works, we usually handled 2D interactions, initially learning to build up the 3D space was whole new learning for our group. The earlier tutorials from CiD classes, along with related Youtube videos, were very helpful. We also did not hesitate to get help from the lecturers to learn new functions and use them in the further development of our code. Another issue we had was learning how to apply the orbit control in our codes.
Achievements
Although initially, we had a hard time understanding the 3D coding, once we understood the concept, we were able to transfer out all the visuals in our minds into the digital space. We did not stop just creating one Motion Interplay Poster, but we made our second design to provide multiple examples for the viewers. One of the issues that we faced while creating our code was handling the orbit control function. Throughout our development, we were able to master this function and utilize it appropriately in our final works.
The sketch
The following sketch was created using the creative coding environment p5js(1), p5js(2) and is called Motion Interplay Poster, its original source can be found here(sketch 1) and here(sketch 2). We are presenting two different kinds of Motion Interplay Posters. In both posters, users can interact with the poster by pressing on other keyboard buttons to activate various motion interactions on the screen (instructions are shown on the poster screen). The users can also experience mouse interaction by dragging the mouse to activate orbit control.
Feedback we received
Our initial design did not include any of the instructional statements. This caused the users to not understand how best to interact with the design as a whole. Taking the feedback into consideration, we added in simple instructions that would not overwhelm the user or interfere with the outlook of the design itself. It worked and had helped guide the user. With this we hope that one day without our presence, the instructions would hold the test of time and really aid in allowing for smooth user interactions.
Reflection
Although we faced some issues in the process, we were able to create two Motion Interplay Posters that could be used for various areas. To use our time wisely, each team member divided the roles into one person working on creating individual coding designs and website and the other two people combining and developing each of the two posters by utilizing those codes. The current design only includes interactive images and shapes; however, we think this idea can be used in real life when related texts are added along with the visuals. This kind of visuals could also be a great learning and teaching tool , especially when explaining a difficult information. As a whole, this project was a meaningful experience for our group as we acquired the skills to plan out a coding interaction idea and embodied them into an actual screen-based interaction display.