24 Hours in

Cambridge.

An Interactive Web and Game to Visualize Students' Activities in Cambridge

The first part of this project is an interactive website for users to filter data and see what GSD students do/where they go in a day. Data can be filtered to see the animated people’s routes in a day.

As the second part of the project, we used Unity to create 3D interactive games in multiple scenes for people to play with. Interactions includes collectible objects, environmental animation, ray tracing, building description UI and more. You could collect items along the way, see information popping up on interesting spots and interact with buildings.

Role | web design, front-end, data visualization

collaborated with Veronica C., Chenlu W., Kaihong G.

Tools | html/css, javascript, p5.js, mappa.js, mapbox, unity, C#

Year | 2019

Ideation.

Cambridge is the place we study, live in and spend time with each day. Out of your daily routine, have you ever wondered what your schoolmates do for their days? Are you curious about some hidden spots in this city that you never knew before? Our project 24 Hours in Cambridge gives you this chance.

Besides, living in Cambridge, although we are already so used to everything happening here, have you ever had different imaginations of this city when you walk in it, like in Alice Wonderland and the Monument? The Unity game could take you to explore a “hidden Cambridge.”

Click the video to see the introduction

Web-based Data Visualization.

We made an interactive website for users to filter data and see what GSD students do and where they go in a day. You could also filter data to see people’s route animation in that day.

Tools: javaScript | p5.js | mappa | mapbox

Landing Page

Routes Animation [filter to select years]

Spots [filter to select years]

Spots [select points to see activities]

Spots [select markers to see popular spots]

Game Development.

For several special spots where people visit a lot or activities happen frequently including Harvard yard, Harvard square, science center and Gund Hall, we made Unity 3D interactive games in multiple scenes for people to play with. Interaction includes collectible, environment animation, ray tracing, building description UI and more. You could collect items along the way, see words popping up on interesting spots and interact with buildings.

Tools: unity | C#

"24 Hours in Cambridge" Game Scenes

3D Scenes of Cambridge

3D Scenes of Cambridge

Process.

Data Collection

We collected geo-based data from around 500 students over 5 years, starting from 2015 to 2019. Each student draws their “One day at Cambridge”-- draws a line of their one day activity (in form of polyline), and pins 10 points along their way (in form of point). We end up having around 500 polylines and 5000 points data. For each of the 5000 activity points data, features including the xy coordinates, activity scope, activity when that person is on this location, definition and secondary definition of the activity (Social, Bodily, Economic and Mental) -- for example buying a hotdog with friends can be something both economic and social, mood when doing the activity, description of this activity, and class year of the student.

Data Example

Load Data

We used a p5 library called mappa to read and geo-locate the data on map, then p5 to visualize the data. Both polyline data(data/pth.geojson) and point data(data/pts.geojson) are in the form of nested arrays. We read user choice from html page and passed the value to get the filtered data selected out. For points, users could choose class year, main function of the point, and duration of the activity happening on that point.

Visualize Data

Points: After grabbing the filtered data, we pins the point on the map each time users moves the map in order to make sure the points are always on the right geo-location. The size of the point is decided by the activity scope of the point, and the color is decided by the secondary function of the point.

Path: After getting the class year choice, users could see animation of each person’s one day activity.

Interaction

You will first get to the landing page on loading the websites. When you move your mouse, you will see different marks of food, buildings, vehicles and devices bumping into each other, representing people doing different activities at the same time.

By pressing [ENTER] button, you will be leading to the path page, where you could filter to see data animation of different years.

By pressing SPOTS button, you could go into the points page, where you could filter to see data animation of different spots with different activities. When the mouse hover on the point, the activity description will jump out, giving you a clear notice of what’s happening there. For certain spots where we found people visit a lot, there are point markers on map -- e.g. people visit Sanders a lot because of CS50.

Navigation bar is on the left side of the webpage. By pressing the buttons, users jump to different pages. About leads to the landing page. Routes leads to the routes animation page, and Spots leads to the points page.

Landing Page

Routes Page

Spots Page

Final Design.

Class of 2019

Class of 2018

Class of 2017

Class of 2016

Class of 2015

Select Markers on Map

Class of 2018

Select [economical] point on map

Class of 2017

Select [social] point on map

The Hidden Cambridge

We created a tiny magic world for you. In this familiar scene, you can experience far belong what you can expect from your daily life. The scene is built in Unity 3D with C# script programming for animations and interactions.

Model Building

Using Mapbox API we were able to grab real time map information and circulatory paths. Imported from SketchUp, we were able to incorporate detailed building model into the Unity environment corresponding to the Mapbox map. Then, we modeled environment elements using Blender in order to give this game a low-poly look, including detailed grassland, Christmas elements, fences, and more. The skybox was also created using a gradience map, as well as animated clouds. The main spots we created the interactive experiences are Harvard Yard (winter/Christmas), Harvard square (spring/flowers), science center (fall/foliage) and Gund Hall (summer/forest), each with a different theme. We also used collider on the boundary of the map, preventing the gamer to go outside the play range.

Scene & Interaction

Interactions

For different elements in Unity, we applied different ways of interaction in the game. Through C# coding, we achieved ways of interaction including elements collectible, environment animation, ray tracing, building description UI.

We used RigidBodyFPSController to control the character. The user could press “wasd” and space to navigate and jump.

MyRaycastSelect.cs” is using the RayCast of the camera, to select the build that is locateD in the center of perspective of FPS controller. This means, when you look straight towards a certain building, it will change color to get your attention from this fantasy world that is filled with beautiful scenes.

“TurnBack.cs” is using a text user interface to inform you when you are at the border of this field, kindly asking you to return or choose another way to go. In the similar principle, the “SceneTrigger.cs” implements a finer designed interface, pop out a window when you are getting closer to a building, and letting you choose weather going in or stay outdoors.

“UIAppear.cs” file is importing a canvas with raw image which we had refined displaying effect. In case you want to further explore the buildings or want to know any story behind those scenes, we display images as markers along with description of student activities when you, as a player or as a guest of our place, are walking into a space that we prefab with codes. The intractable areas/buildings include: Sanders Theater, Science center, Cambridge Commons, Harvard Square, Gund Hall, Widener Library, Harvard Yard, Lamont Library, Carpenter center, Harvard Art Museum, and HKS.

Animated gifts along the road for you to pick up is implemented through our script of “reminders.cs” which damages the object to let them disappear and displaying a reminder text for a few seconds, as well as a collectible systems. Each object contains a collectible script “collectible.cs” and the scene contains a collectible management master script “collctibleManafer” to count the number of collectibles. When one collides the collider of the collectibles, the collectible will automatically self-destroy, while displaying “collected” on the screen using “reminders.cs.”

In this low poly scene, it is not hard to notice graphic elements like fire particles and the candy or the trees. They are waving and shaking to welcome you. Using multiple scripts such as “wander.cs”, “rotator.cs”, “cutejitter.cs”, “jitter.cs”, “launch.cs”, “rocker.cs”, “timespawner.cs”, we were able to animate those inanimate objects and make the scene more lively. Particle systems were used to generate fire, smoke, leaves, and snow, and scripts were used to manage the master transformation of those particles.

In order to allow the gamer to fast transport through scenes, we built “teleport.cs”. By passing through a rock gate, the gamer would be teleported to the next location’s gate in a second.

Collect Objects

Change building appearance [color]

Play the Game

You can experience Cambridge in a different way. Walking in Harvard Yard, you meet with multiple gifts along the way, which you could pick up and adds your total scores up. The school gates are no longer iron ones but Christmas candy bars that could swing back and forth. When you stand in front of famous buildings, you have words jumping out showing interesting facts about it. Along the journey, you can discover and collect items, stylized based on themes. In front of the Science Center, you can observe mountains, smokes, and fire shows. Teleporting gates are another feature allows the user to explore the world faster and more interesting. Passing by Sanders Theater, you can encounter a pleasant surprise.

Harvard Yard

Science Center

UI/UX <<

View All Projects

>> HCI/Computation