IxD Assignment Process - Interactive Georgetown Tourist Map
Updated: Mar 19, 2021
Objective of the Project
The project is based on Sense of Place assignment for more in-depth research and prototype development in Unity 3D. The objective of this project is to make the target audience to experience the charm of Penang Georgetown, which is the combination of new and old.
Idea Genreation
The idea of Sense of Place assignment was abandoned because it was very unfriendly to users.
The user needs to move the model to obtain different animations. However, it is very unfriendly to user.
Based on the idea of Sense of Place assignment, I need to use projection mapping and animation but user friendly. So I imagine a place that allows users to experience the new and old George Town without moving. So I have an idea to gather all the new and old buildings together on a wall so that users can experience them without moving.
The idea was inspired by this project:
Process of The Project
First, this project was intended to use a projector and a wooden board full of graphics. The idea of the project is to touch one of the old and new building graphics on the wooden board to trigger the animation. The animation will be projected on the wooden board by a projector. When one of the architectural graphics is touched, some routes will be displayed to tell the user which graphics should be touched to trigger the animation. The animation is a vehicle moving from one building to another.
Another option of design but it need a long wall to execute it so it was abandoned.
After that, in order to make the project more real and interesting, I decided to display all the building patterns on a graph based on a real map, which became a tourist map.
Georgetown in Google Map:
Refined Design:
The refined design was planned on acrylic board
At the beginning, I just planned to draw the terrain outline of the Georgetown and the shape of the buildings, because I think there needs a lot of space for animation on this panel. Besides, I wanted to make the design of the project more beautiful, so I planned to use acrylic board as the panel for these graphics. However, this idea is impractical because the light projected by the projector cannot be projected on transparent material. In addition, I also found that there are too few elements on this panel, which looks boring, so I keep refining the design of the panel.
Finally, I decided to use wooden board as panel, and then kept refining the map design.
Added main road of the Georgetown in the panel, but it still looks few things.
Added more elements in the panel, but it still can be improved because there is still a lot of place.
In the last second version, because the art style of the seabirds in the upper and lower right corners is different from the main art style, they were removed.
Last version, seabirds were removed.
For the coding part, because of the Lidar execution exercises, I didn’t encounter many challenge in the coding part. There was a challenge encountered was the animation of the cursor. At the beginning I used sprite to make the cursor click and moving effect, but the outcome was not ideal, and there were many problems. After that, I chose to use particle system to make cursor effect. These were what I have experienced in Lidar execution exercise, so it is easier to make the cursor effect and it was more ideal.
In the process of using the laser cutting machine, I found that the dxf format file exported directly using the original file does not work perfectly because it will miss many paths in the PowerCut software. After that, I found a simple but not perfect solution, that is to use AI to export black and white photos and use PS to get the path, then import the path into AI, and finally export it into a dxf format file.
Exported directly from AI:
Export after obtaining the path from PS:
For the animation part, I used AE for production, export the png format photo and drag it directly into Unity will do. The biggest challenge of the animation which was develop the short animation to show the uniqueness of each place.
Project Mock-Up & Animation
These designs and animations will not be the final version.
Peer Review
After comments from peers and lecturers, I learned that the waves in this version look fake and the sound effects can be longer. Since the engraved board has not been engraved out yet, it is only projected on an blank wooden board. It also made me realize that projecting on a flat board makes this project look uncharacteristic. So I still need to add some features to the board to make this project more attractive.
Projection On The Engrave Board
When I projected on the engraving board for the first time, I tried to project all the details. The projected result did not look so good, and the interactive buildings graphics did not look obvious because the lines were too similar.
In the second version, I tried to remove all lines, except for the interactive buildings graphics . In the same time, I also thicked the line of the interactive building graphics so now it looks more obvious. Although I have thickened the wooden board of the building graphics, the effect is still not obvious. It will be thickened in the final version.
Final Artefact Photos
Final Outcome of The Project
Project Evalaution
After done the presentation of the project, I achieved some of my expectations, such as the projected effect on the wooden board. After listening to the advice given by the lecturer and my peers (layering the building), the projection effect is really better than my original idea. In addition, the sound effects of this project are also part of my satisfaction. Various sound effects are combined with animation to achieve a good effect. However, the wrong decision made in this presentation was not to prepare a speaker, because the sound effect from the computer's own speaker is too small. At the same time, I also found that a bright environment is more suitable for this project than a dark environment, because people can see more details of the tourist map. In this project, the wrong decision was that the size of the engraved wooden board was too small, although I always thought that the size was just right. But if the size of the engraved wooden board is larger, I think the projection effect will be better than this time. On the other hand, the details on the engraved wooden board were not dealt well, and some small details and elements lose many details because of the too much power of the laser. In addition, the choice of wood board for engraving was not good, because it is slightly curved, although it was sticked with transparent glue during presentation, it still cannot make the wood board appear completely straight. Yes, although this project is basically completed, there are still many areas that can be improved, for example, the animation can be richer and the edge light of the terrain. Of course, I also think that the details of the guide map on the engraved wooden board can be richer or more beautiful, but it takes more time to improve my aesthetics, skills, etc.
Reference
Pow, D., 2015. Storytelling through playful interactions. [online] Vimeo. Available at: <https://vimeo.com/121878247> [Accessed 10 January 2021].
Sound, A., 2018. Bicycle Sound Effects All Sounds. [online] YouTube. Available at: <https://www.youtube.com/watch?v=wuPinZeVgrM> [Accessed 26 January 2021].
Effect, S., 2016. Ferry SOUND Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=NZu3wmF3xDc> [Accessed 23 February 2021].
Sound, G., 2018. Sound Effect - Sea Sound of Wave. [online] YouTube. Available at: <https://www.youtube.com/watch?v=hSKI2GPtSQI> [Accessed 23 February 2021].
Sound, F., 2020. Seagull Beach Sound Effect | Free Sound Clips | Animal Sounds. [online] YouTube. Available at: <https://www.youtube.com/watch?v=_OdfxYjvPlE> [Accessed 23 February 2021].
Recorded, S., 2016. office ambience Sound Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=Qiz5uoPonYY> [Accessed 24 February 2021].
fxlibrary, S., 2014. Road Traffic Sound Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=-TPeFjgNPbo> [Accessed 24 February 2021].
Effects, S., 2017. Car horn sound effect (Copyright Free). [online] YouTube. Available at: <https://www.youtube.com/watch?v=FQc5zRy6wBU> [Accessed 24 February 2021].
Lyrmus, 2020. Zen Buddhist Temple Bell Sound Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=_IXHRGZlAmk> [Accessed 24 February 2021].
Berlin, A., 2020. Party Crowd - SOUND EFFECT - Party People Background Chatter SOUNDS. [online] YouTube. Available at: <https://www.youtube.com/watch?v=9qFW-aJ78EQ> [Accessed 1 March 2021].
Video, K., 2018. Pigeon Sound effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=ji4_L1aJzsc> [Accessed 1 March 2021].
Database, E., 2020. Bird Flying Away Sound Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=vqKG7t_GkvQ> [Accessed 1 March 2021].
Sound, A., 2018. Bus Sound Effects All Sounds. [online] YouTube. Available at: <https://www.youtube.com/watch?v=aT1Um8dY0gE> [Accessed 1 March 2021].
Library, A., 2014. Car Drive Off / Sound Effect. [online] YouTube. Available at: <https://www.youtube.com/watch?v=6DjtzOl4UkQ> [Accessed 1 March 2021].
FX, S., 2020. Hello There (Obi Wan) - Sound Effect (HD). [online] YouTube. Available at: <https://www.youtube.com/watch?v=-Rn3j2XQt4s> [Accessed 1 March 2021].
Beats, N., 2015. Cycle Horn Sound Effect | HD |. [online] YouTube. Available at: <https://www.youtube.com/watch?v=3HzVOCbaT3M> [Accessed 1 March 2021].
Effect, S., 2019. BEST camera Sound Effects. [online] Youtube.com. Available at: <https://www.youtube.com/watch?v=waiIOqCkIqg> [Accessed 15 March 2021].
Comments