Experiential Design / Projects
30.3.2022 - 10.7.2022 (Week 1 - 15)
Lew Se Win / 0347637 / Bachelor
of Design (Hons) in Creative Media
Experiential Design
Project 1:
Experience Design Individual Proposal
Project 2: Creative Experience Design Project Prototype
Final Project: Completed Experience
LECTURES
Week 5
Mr. Razif started to teach us about Unity and Vuforia. Firstly, Mr. Razif
showed us how to set up the camera and insert the image target. After that,
he showed us how to insert objects, buttons, and some simple
interactions.
Week 7
Mr. Razif asked us to join a talk given by Carine Chang about Design
Thinking and UX. After that, we resume class to learn more about Unity
taught by Mr. Razif. Besides, this week Razif also teach us AR Ground
Plane and Mid Air (Markerless).
Week 12
This week, Mr. Razif start to teach us about coding. We learned some simple
scripts.
- Common Data Type
- int - integar
- float - decimal
- bool - boolean (true, false)
- string - characters/ word/ sentences
Week 13
Mr. Razif taught us how to link various screens and build our app to phone.
INSTRUCTIONS
Week 4 - Project Ideas + Proposal
Here are some of my preliminary ideas for upcoming projects.
Figure 4.0 Preliminary Ideas, 21.4.2022
Week 5 - User Map
Figure 5.0 User Map, 24.4.2022
Week 6 - Visualisation Progress
Figure 6.0 Progress (Visualisation), 30.4.2022
Week 7 - Proposal & Video Presentation
Figure 7.0 Proposal Document (First Submission), 6.5.2022
Figure 7.1 Proposal Presentation Slides, 6.5.2022
Figure 7.2 Proposal Presentation, 6.5.2022
Week 10 - Prototype
Following the feedback from Mr. Razif, I decided to revise some
of the feature which include the quiz part. Besides, I also
decided to revise the visualisation of the app because I realise
that the flow the the app is not smooth.
Figure 10.0 Revised Visualisation
Figure 10.1 Revised Visualisation (Quiz)
Week 11 - Prototype Progress
Next, I tried to move on to the Unity to try out the AR feature. I
first create a new database for my image target in Vuforia.
Figure 10.2 Vuforia Target Manager
After I uploaded my cards, the cards were rated with four stars.
After that, I import the database into Unity. In Unity, I first
added the image target (carbon card), then a cube on top of it.
This is to test the AR feature, which works. After that, I put a
sphere to the hydrogen card as the other four image targets.
However, when I have more than one hydrogen card in the camera,
the 3D object is not identified. At any given time, just one card
will appear the sphere.
All the updates above were recorded in the progress update video
below:
Figure 10.3 Progress Update (Week 11)
Figure 10.4 Revised Proposal
Week 13 - Progress
In class, Mr. Razif told us that the easiest way to solve the
problem of displaying the same element on different hydrogen cards
is to change the design of every card. Hence, I recreated 4
different hydrogen cards by adjusting the hexagon arrangement at
the background of the cards.
Figure 13.0 Hydrogen Cards
Figure 13.1 Vuforia Target Manager
Later on, I moved on to Unity and creating the key feature of my app
following the tutorial by Mr. Razif.
I start with creating a script and try to let 1 carbon and 1
hydrogen combine first. I coded the addition and deduction of
element cards, then added a button to confirm on the calculation of
the combination of cards.
Figure 13.2 Script
Figure 13.3 Progress (successfully combined 2 cards)
Figure 13.4 Successful combination for CH4 molecule
Figure 13.5 Calculation script
Week 14 - Progress
After learning how to link different scenes, I then create the intro
scene and quiz scene.
Figure 14.0 Intro Scene Progress
After that, I consulted with Mr. Razif on "how to show something if
the answer is correct".
Figure 14.2 Consultation Progress
Following the tutorial given by Mr. Razif, I successfully created the
panel showing the name of "methane". After that, I also used the 3D
objects in Unity to create the 3D model of molecule's structure.
Figure 14.3 Display of correct result
After that, I move on to do the quiz scene to indicate correct and
wrong answer. I used different scenes to indicate correct and wrong
answer. For example, if the answer is correct, the user will be
directed to quizcorrect scene.
Figure 14.5 Correct Canvas
In the progress, I faced a problem because I did not add the scenes to
build setting. Hence, the scenes could not load.
Figure 14.6 Error
After I fixed the problem I successfully linked all scenes.
Figure 14.7 Successful attempt
Figure 14.8 Confirming on the workable key feature
However, I faced a problem here. My back button in quiz scene do not
function although there is no error in my script. The same script work
for my key feature scene but not my quiz scene. I could not find out
the answer. Hence, I decided to book another consultation with Mr.
Razif.
Figure 14.9 Back button script
Week 15 - Progress
I then went to another consultation with Mr. Razif. The first thing
is to solve my back button. However, after Mr. Razif checked
everything, he could not spot the problem either. Hence, he asked me
to send him my working file.
After showing him my progress, Mr. Razif commented that there is no
need to create different scenes for the correct and wrong answers to
the quiz because it will jump here and there. With that, I revised
this part by implementing different canvas to the "correct and wrong
answer" for the quiz.
Figure 15.0 Confirm Button Script (Show Canvas)
Figure 15.1 Next Button Script (Show and Hide Canvas)
After I fixed this, I sent my working files to Mr. Razif.
Week 16 - Progress
As Mr. Razif's time is filled with consultations, I decided to solve
the problem myself and continue with my other progress. So, besides
methane, I decided to develop phosphorus pentafluoride (PF5) and
sulphur tetrafluoride (SF4) because they can demonstrate different
molecule structures. PF5 have trigonal bipyramidal structure while SF4
have see saw structure.
Figure 16.0 Added PF5 and SF4
Besides, I also added the label of bond angles to the 3D model of
molecule's structure.
Figure 16.1 PF5 structure model with bond angles
After that, I revised on the object shown when the element cards is
targeted to the 2D Bohr model of atom. I first suggested the 3D model
of atom but I was not familiar with 3D modelling and due to time
constraints, I decided to create it as a 2D image.
Figure 16.2 Display Bohr model of hydrogen after hydrogen element card is
detected
However, I feel like the display is barely visible due to the
colour and shape. Hence, I decided to change the design of the
Bohr model of the atom.
Figure 16.3 Atom's Bohr model (old vs new)
Figure 16.4 Final Atom's Bohr model in display
After that, if I follow my previous proposed interfaces, the dot and
cross and diagram would be display after the molecule's structure.
However, I feel like the sequence can be changed now because the 2D
display of atom looks similar to the dot and cross diagram. Hence, I
revised the sequence of interface by having the dot and cross
diagram first before the 3D model of molecule's structure.
Figure 16.5 Dot and Cross Diagram
Figure 16.6 Display of Dot and Cross diagram with molecule's name
Figure 16.7 Different Canvas
Figure 16.8 Linked Canvas
Figure 16.9 Revised script for confirm button
Hence, I decided to revise some of the design for the cards.
FEEDBACK
REFLECTION
Besides, I also added questions to the quiz part. To make the quiz
part clearer for users, I also added a guide before the quiz start. A
animation of cards moving in the screen was adding to indicate that
users would need to interact with the element cards to answer the
quiz. To ensure users can be directed to different questions I also
created different canvas to ensure proper navigation.
Figure 17.0 Animation
Week 16 - Phone Build
After I finish creating in unity, I now need to build it to my
phone. Following, the tutorial given by Mr. Razif, my building
process went smoothly and surprisingly my back button work after I
builded.
Figure 17.1 Building Progress
Week 16 - Revise
After viewing with my phone, I realise that some of my image target
are too similar and it is hard to differentiate by the AR
camera.
Figure 17.2 Problem faced
Figure 17.3 Revised Cards
Figure 17.4 Vuforia rating
Besides, I also did some minor adjustment to the object's angle so
that it can be properly display. Besides, I also created the app
icon.
Figure 17.5 App Icon
After everything is done, I build and run my app again.
The differences between the proposed app and the final
outcome:
-
3D interactive molecule's structure model
In contrast to the final product, the proposed 3D model is interactive. This is due to the fact that AR might actually allow users move their mobile device to observe multiple angles.
-
3D Model of Atom
Due to the time constraints and I am not familiar with 3D modelling, the display of atom is in 2D Bohr model instead of the proposed 3D Bohr model.
-
This is because the 2D Bohr model is similar to the dot and cross diagram. Hence, I decided to display the dot and cross diagram first before the 3D model of molecule's structure to avoid confusion.The sequence of dot and cross diagrams and the structure of molecules
Final Submission
Here is a video capturing all my app features and the final outcome.
Figure 18.0 Video walk through Covalent app
FEEDBACK
Week 4
Idea 1: Mr. Razif said that now only a still object/image can be
scanned instead of scanning my hand. Because technology is
currently restricted, scanning the hand may not be able to match
it with the hand.
Idea 2: Mr. Razif suggested that rather than scanning the 2D
formula of a chemical, it be converted to a card of atoms and made
interactive by putting them together and merging them to form
another chemical compound. Furthermore, by touching the
atoms/compounds, more information can be presented (another
interaction).
Idea 3: Mr. Razif mentioned that it is unnecessary to implement AR because the environment is not required for this idea.
Week 8
Mr. Razif suggest that I start with the key
feature of the app first, which is how the combination of cards
would trigger the formation of the molecule.
Week 10
Mr. Razif suggested that I could start with 2D
diagrams first as I am not familiar with 3D modeling. I would also
need to add a button to confirm the formation of molecules.
Besides, Mr. Razif also suggested I change the quiz part, which is
to use the cards to answer the quiz.
Week 15
Mr. Razif commented that there is no need to create different
scenes for the correct and wrong answers to the quiz because it
will jump here and there. Mr. Razif also said that it is not a
must to make my 3D model interactive as what I
proposed. This is because, with AR, users could look around by turning and
moving their mobile devices.
REFLECTION
I agree that this is a very fun project! This is the first time I coded aside from html and CSS. I enjoy doing this project and the process of solving all the problems that I faced. I believe that there is a lot more for me to improve. However, I was happy with the outcome as this is my first exposure to AR, Unity, and also coding. I definitely appreciate all the knowledge I learned from this module. I am also happy on my chosen topic because chemistry was my favourite subject in high school and this definitely brings back many of my memories. Last but not least, I would like to thank Mr. Razif for guiding me throughout the semester.
Comments
Post a Comment