DesignLab Project1

PROJECT OUTCOME PREVIEW.

BRIEF.

According to the brief, we have a couple of weeks to do research and convert them into Data visualizations. The purpose of this task is to test our data collecting skills and how we can turn them into a piece that shows information

INTRODUCTION.

Unfortunately, I was quarantined for 10 days during the task, therefore, I couldn’t collect any data outside of my room. However, I took it as a great opportunity to give myself limitations and see how much I can make out of it.

The first step was to make a brainstorm and define what I want to collect & make for this project:

Since there aren’t many things I can research, I split them into four areas: construction, orthography, light and sound. Notice that most of my topics are visual bases. The reason for that is because I just moved into a new room, and I want to use this opportunity to analyse its structure from the listed aspects.

DECONSTRUCTION.

The first data visualisation is a technique I learned from my undergraduate course. I call it deconstruction.

This is how I did it: I took a picture from one of the corners in my room and drew it on a piece of paper. I first started to draw it with only 15 lines, and then reduce it to 10 lines, to 5 lines and finally to 3 lines. The purpose of this data collection is to capture and conclude the details within each angle.

Here are the results:

I picked this angel because this lamp was the first thing I noticed when I walked into my room. After drawing out the structures, I realised that most of the objects in this image are rectangular shapes.

This is the second picture I took. I picked this angle because I wanted to show my sleeping area.

This angle shows the entrances of my room. Again, the structure is clearly built with rigid shapes and angles.

Finally. a table full of my stuff is an interesting spot to look at. They are not part of my room but a lot of them are also in rectangular shapes.

CONCLUSION.

In conclusion, the process of turning complicated structures into simple lines is difficult, because I couldn’t decide which lines are better to represent the original structure. Luckily, they came out with some interesting shapes. that I was quite happy with.

The most interesting thing I found from this set of data, is the realisation of how ‘rectangular’ this room is. Most of the objects such as wardrobe, doors, tables and bed are in rectangular shapes. If I am making a data visualisation based on this set of data, ‘rectangle’ is the major thing that I will present.

LIGHT.

Whilst I was staying in my room and observing things, I noticed one thing that changes all the time: lights.

I have a small window facing towards the garden, and it is the only passage sun goes through. The sunlight usually shines on the wall in front of my bed and creates contrasts between the shade. This was caused by an angle that splits the wall into two parts.

Only out of interest, I decided to record the light changes every hour throughout a day, and here are the outcomes:

CONCLUSION.

Unfortunately, this set of data didn’t work out very well because most of the pictures I took look the same.

Well…at least I know it isn’t working.

CORNERS.

The corner is another topic I looked into after realising most of the objects in my room are rectangles.

I thought this was a great chance to see what made my room looks so rigid.

Shelf and radiator, both in rectangular shapes with the rigid corners.

Window and carpet, I tried to find rectangles in everything.

I also tried to capture the textures and patterns from each object, for data completeness:

A great thing about drawing textures & patterns is that it helps me to analyse an object better. By looking into their details, I noticed the colour changing and how the object has been structured.

CONCLUSION.

After documenting the corners, I felt my interests shifted from analysing the shapes to capturing the details on objects. I enjoyed the process and hoping to see what I can do about these data.

ORTHOGRAPHY.

The fourth set of data is about the orthography of my house.

Notice that this isn’t the actual orthography of the house, but a replicated version from my memory.

This is how it works: I have only walked around the first floor of the house on the first day I moved in, and whatever I have drawn or written down was based on what I remembered. I recorded the process of remembering and split it into four parts, so you will be able to see how I created the orthography.

This idea was inspired by a technique called Method of Loci, and people use it to remember things. Here is a short description of the technique:

https://en.wikipedia.org/wiki/Method_of_loci

Part 1: I remembered there were letter bags on the left-hand side and a radiator underneath it. On its opposite side is a board pinned with house rules.

Part 2: I remembered a stair leads to the first floor. Right next to it are two rooms, and one of them is mine.

Part 3: When walking past the stair, I saw a living room with some furniture in there. The room was quite small but has enough space for at least 7 people.

Part 4: I started to remember the furniture in the living room, and layout with more details.

Part 5: When I walked through the living room, there is a small kitchen with tables and bins.

Part 6: As much as I can remember, this is basically the general layout of my house.

CONCLUSION.

It was fun to try remembering the layout of my house, especially when I had only been there once. The most interesting part is that I reversed the Method of Loci from ‘memorising’ to ‘remembering’. This is a technique I developed from this project to train my imagination, and I will definitely use it in the future.

DELIVERY MAP.

Throughout the 10-day quarantine, I couldn’t use the kitchen or public space to cook and eat. Therefore, Ubereats was something I used every day to keep me alive. I recorded the restaurants I ordered food from on the map shown below:

The markers with stars are the restaurants, and the heart is where I live.

I also recorded the food I ordered every day:

DAY 1 TO 3

DAY 4 TO 6

DAY 7 TO 9

DAY 10

CONCLUSION.

In conclusion, I ate a lot of junk food but collected some interesting data. Overall, I ate 3 times pizza, 3 times hotdog, one-time Mexican food and 2 times Chinese food. I think the variety of food can be used in my data visualisation.

SOUND RECORDS.

The last data set is the sounds.

Apart from lights, sounds are the only thing that changes either in my room or in the house, and that’s why I wanted to record them and see what’s interesting about them.

The first thing I did was to record the activity of the house through footsteps. Here is the list:

I made a note whenever I hear somebody walking in the house. I recorded the time, location and action based on those footsteps.

Another set of data are the sounds I heard from outside of my room, such as walking, cooking or a door closing. Unfortunately, the sound quality wasn’t very good during the time I collected them, so I recorded it again with another device after my quarantine, here are the sounds:

IDEATION.

BRAINSTORMING.

Once the data have been collected, I took them over to my tutorial group and evaluate what I have done. Our tutor Danny suggested I pick the specific sets and work with them, instead of putting everything into our data visualisation.

Now is the time to brainstorm ideas and find out the best solution to present my data:

In conclusion, I want to create a ‘game’ that allows people to experience what I felt during quarantine. It is not going to be a simulator of reality, but a piece of art that expresses my feelings and emotions.

The second data visualisation is going to be a set of images taking from different angles of the space I create, to show the rigid structures and layout of my room.

DESIGN.

Essential Experience:

To have the feeling of being in a room and doing nothing, experience freedomless and repetitive days.

Here are my design documents:

Players will be put into the first-person perspective because it is an immersive way to present my data, and I want them to feel what I felt during quarantine.

There are three data I am visualising: the food I ate each day; the layout of my room; the sounds I heard.

To sum it up, the mechanic is simple: players collect food(10 in total) in a room but start on a very small scale. The more food they collect, the bigger they will grow. During this experience, players will see what I ate each day; walk in a space that has the same layout as my room; hear sounds from outside the room.

The motivation that drives the players to collect items in the window. There will be a window on the wall, and the taller the player gets, the more they will see, which is a mechanic that triggers players’ curiosity to continue with the game. When players collect all 10 items, they will finally see the beautiful world outside the room, just like how I felt – the longer I stayed, the more eager I want to see what’s outside.

The concept behind this simple mechanic is that when I first moved in, everything is new to me and that’s why the space looks huge to explore; However, the more time I spent in this space, the more overwhelmed I will be, and when it comes to day 10, I only have a small space to walk from point A to point B.

RESEARCH.

After deciding what to do, I then started my research on the visual styles.

GAMES.

The first set of research I did was the digital spaces that could possibly contain my data. Here are some games I looked into:

Silent Hills P.T.

The first video is a game called ‘Silent Hills P.T.’, produced by Konami. The reason for choosing this game as a reference is because the entire experience is the character been trapped in a house.

I like the way the character walks and inspects the house, and it would be interesting if I implement these mechanics into my digital space.

FireWatch.

The second game is called the FireWatch. I choose this is because it has a great visual style and everything looks pretty in first-person views. The cartoony style seems like an interesting choice for my digital space.

The Stanley Parable.

Here is another reference I took, it’s called the Stanley Parable. It has realistic graphics compare to the FireWatch. The setting pretty much takes place in an office building so everything looks cold, and this is suitable for my visual style because that’s how I felt when I spent 10 days in my room without going out.

CONCEPTS.

Here are some images I collected to show the kind of features I want to use in my digital space:

I looked into digital galleries: simple layout and interesting work on the wall or tables.

I also see my room as a cold place just like an office. I was trapped in it and the window is something that connects me with the outside world.

BRUTALISM.

During the research, I found an interesting style which is called Brutalism. It is an art/architecture style that tells emotions through shapes and colours. I thought this is great for my digital space.

Here is a short description of brutalism:

https://www.tate.org.uk/art/art-terms/b/brutalism

A video description:

https://www.youtube.com/watch?v=_HlvFEZdg9I

In summary, brutalism is a style that uses concrete, rigid structure and cold tone to display certain emotions, such as loneliness and horror. Some people use this style to design shelters, which is perfectly suitable for my digital space because it felt like a shelter that trapped me in.

Here are some inspiring brutalism images:

Whilst I was searching for some cool brutalism designs, a game called CONTROL jumped into my browser:

Control’s design, mood and tone are perfect for my digital space, and I will use it as the major inspiration.

PLANNING.

Once the general design & direction has been confirmed, I then moved onto the preparation phase.

I need to plan out how my space looks like and what’s in there, here are some sketches I did:

I was trying to make the space looks like a shelter because it makes people feel uncomfortable and wanting to escape.

Rigid shapes are features I am applying to everything inside the room.

I also thought about transforming 2D patterns into 3D shapes.

Furthermore, players are getting taller and taller each time they collect food. Therefore, the locations where each food places need to be planned well.

I also want to use the shape of an object to express my personal feeling.

Here is an example:

The first object I designed was the bed. In this case, I made it looks uncomfortable and make sure nobody wants to sleep in it. The reason for that is because my room is extremely small and I stayed in bed most of my time during quarantine. The only thing that was in my head was to get out of the bed and leave the room, so I applied that emotion to the design.

PROTOTYPING.

The engine I used is called Unreal Engine 4. It is a video game development engine that allows me to 3D model and code within it.

In this phase, I started to prototype to see how it looks in the engine.

LAYOUT.

The first thing I did was the layout of my room, here are some images:

Here is the finished version of the layout:

My room is very small and mainly formed with rectangular shapes, so the layout is quite easy to make. Now it’s time to test out other things.

FUNCTIONS.

Here are the features I tested in the video:

  1. Player gets to move around
  2. Player can pick up an item and triggers a sound effect(I made). The logic behind this is when the player interacts with an object, it detects and been destoryed, which looks like the player just ‘picked’ it up. Here is the code:

3. When the player ‘picks’ up an item, they get taller:

4. Camera shakes whilst walking:

Footsteps can be heard (I recorded them with my shoes):

Here are some tutorials and references I learned to code these functions:

After prototyping the basic functions, I am ready to move onto the production part.

3D MODEL.

The 3D model is the next thing I do after prototyping.

I used Blender to make all 3d models, and this is the bed:

Once it’s done, I then imported it into the game, this is how it looks like:

To make it looks more ‘brutalists’, I decided to create these small blocks on the wall to highlight the style:

This is how they look on the wall:

This is a shelf:

Some decorations on the wall:

A wardrobe:

Some 3d modelled food, based on the data I collected:

Trees outside of window:

FUNCTIONALITY.

Based on the tested code, I decided to add some extra features to the game, here is the showcase:

Extra features have been added:

  1. Show the delivery detail when collecting food:

2. Environmental sound when walking closer to the wall & door:

3. Texture

Most of the objects are metal textures because I want to show the ‘coldness’ of the room. Some surfaces such as walls and ceilings are an ‘AssetPlatform’ texture, which has less reflection to create contrasts with the objects that use metal textures.

4. Background music:

To add some extra flavour to the game, I made a short piece of music. Loneliness is the theme, and I mainly used synth to colour the general sound and make it feels illusional. The interesting part of the music is that it has 8 layers in total, and each time player picks up an item, there will be an extra layer added on top of the previous music:

5. Lightings

I created some lights for two purposes: firstly they add extra flavour to the overall visual. Secondly, lights in the dark are great affordances, which tells players where to go next.

6. Environmental sounds

POSLISHING.

The final step is to polish the game with some light adjustments:

I planted some trees outside so players can see something nicer when they reach the end:

I also added a starting menu to make it looks nicer:

DATA VISUALISATION OUTCOME 1.

A space that expresses my feeling of loneliness during quarantine:

Here are some screenshots:

DATA VISUALISSATION OUTCOME 2.

The transformation from reality to digital: