Work

ho jeng ar

Find your joy and share them with Ho Jeng AR!

In collaboration with Google, we developed an immersive adventure to spread joy across Hong Kong. Ho Jeng AR is a mobile app that features a fun AR experience that encourages people to find joy around themselves, and forward it to the city.

To start the experience, users search for everyday objects and symbols that represent the city’s vibe. Our AI will automatically detect certain types of joy, identify, and pair it up with one of the six joyful characters which users can enjoy playing and interacting with.

Equipped with AR technology, our app allows users to bring the characters to their surroundings to create an augmented world of joy. The more you play with them, the more points you get. Sum the score up and earn surprise rewards from merchants and partners across the city!

Download the application on your mobile at https://share-joy.web.app/.
Let’s spread joy!

Collaboration
Concept: Google Hong Kong
UX & UI design: Sennep
Character animation: Animade
App development: bit.studio

youtube fanfest fanreact

Experience the never-been-done-before interactive experience on the YouTube Live videos with FanReact!

FanReact is an interactive live performance visual effects powered by live YouTube comments that we have designed and developed for YouTube FanFest 2020. The audience can show their love to their favorite YouTube artists by simply commenting “♥️” to the live comments and our software will automatically create a visual effect in the live video using their profile pics in real-time!

This is the first time ever that any audience can be a part of a live video alongside the content creators on YouTube. Get more out of a live concert with real-time interaction between audiences and creators. Surprised your audiences with our interactive effect across the show!

Check out some of the impressions on social media!

dance movement with matt

Do you want to be part of the dance movement with Matt Steffanina?

Try syncing your dance, share it out, and challenge your friends here!

bit.studio as part of Youtube and Google team, has created a new dance experience for Youtube FanFest 2020. We developed a software with a Machine Learning model that allows users to enjoy their dance movement and get their own dance video with Matt Staffanina, the most followed dance creators on YouTube. Users can download their dance syncing videos with Matt and share it out.

What you need to do is very simple. You learn the full dance in the tutorial video, then try and keep up your move with Matt. When ready, record your dance movement. And our ML model will detect your movement and segment your body out. Then, feature the moves on your dance video!

Scalability is very important in this project since we need to support millions of users concurrently. We decided to run our ML model on Google Kubernetes Engine with dedicated graphic cards. This way we can generate the videos with just a short amount of time.

We had so much fun creating such an enjoyable experience for YouTube FanFest 2020. Now it’s your turn! Let’s dance! yt.be/ytffdance

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

oekaki takeout

In collaboration with Hot Pepper Gourmet and Google, we created “Oekaki Takeout”, an experience for kids and families that you can draw what you want to eat and our app will find nearby restaurants where you can order the menu.

To begin, pick up a plain white paper and coloured crayons. Draw what you want to eat and take a picture.

Then, with the power of AI/ML, our app will guess what you have drawn. After that, it will search for the restaurants from “Hot Pepper Gourmet”, the largest gourmet information site. Finally, Oekaki Takeout will display the list of nearby restaurants based on your location.

Let’s draw together and enjoy the meal!

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

sounds of india

For India’s 74th Independence Day, we created an AI powered experiment to celebrate the unity of the nation. “Sounds of India” is available for users to sing Jana Gana Mana: the Indian national anthem, together virtually!

bit.studio, in collaboration with Google, has developed a mobile web app that converts singing voice into the sound of Indian traditional instruments. Users can also share their singing voice to be a part of a virtual Jana Gana Mana music video featuring millions of other singing voices across the country.

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

lipsync with youtube

Sync your lips with “Dance Monkey” by Tones and I!

LipSync is an AI-powered challenge that rates how well your lips are syncing with the song. Just use your camera, and sing in your own style. The more your lips sync with the song, the more score you will get.

In collaboration with Google and Youtube, we created a web application that uses TensorFlow.js to detect your facial landmark in real-time. No data will be recorded and the ML model is running in the browser. The app will analyze and calculate your score based on how closely your mouth shapes match with the song lyrics.

Let’s see how well you can LipSync! https://lipsync.withyoutube.com

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

delivery doodles

Can’t decide which meal to order?
Why not let your little kids draw something they would like to have for this dinner?
Delivery Doodles will magically turn your kids’ doodles into food orders!

In collaboration with Google and GrabFood, bit.studio developed a web application for families to enjoy their freetime and mealtime together. Available to serve your meal in 3 countries across APAC in May 2020.

Delivery Doodles is a fun experience with simple steps to follow. Just draw a dish and capture your drawing. Our AI will try to guess what you have drawn and redirect you to GrabFood’s local restaurant lists where you can order your dish. That’s it. Enjoy your special menu and family time!

With the power of TensorFlow.js, we created a Machine Learning (ML) model that can recognize more than 40 dishes. The challenge of this project was to gather as varied drawing styles as possible in a short period of time. Undoubtedly, the input quantity was essential, so was the data diversification. To achieve both aspects in one go, we developed a mobile data collecting application that made collecting and labelling data effortless. Just use our web app to capture a drawing then choose one of the predefined classes to label it.

In close collaboration with Grab and Google, over 10,000 doodles were submitted from across the countries. Our ML model used the collected data to learn what each dish should look like. In addition, we also generated drawing data using image processing techniques and the Generative Adversarial Networks (GANs) model to create more variety of drawing styles, which helped enhance the accuracy of our ML model. Finally, we combined the model with our web app, and voila, Delivery Doodles is now ready to deliver this enjoyable experience to more and more families!

Get your kids ready to have fun ordering your next meal! Try Delivery Doodles on your mobile now at https://grab.deliverydoodles.com/.

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

mitrtown data sculpture

Mitrtown Office Tower is a Grade A office building, located in the CBD of Bangkok. This Intelligent office tower was designed under the concept of “Smart & Friendly”. Our team, bit.studio, took a role to give users creative and fresh daily content through various screens in the reception area, elevators’ hall and outdoor facade.

To create an experience that matches our users, we have to know who they are, what are their shared interests which can be provided by the given screens, their attention, and their behavior or activities that can happen in the lobby. From our site survey and observation, we found that our target audience is office workers working in the building. Their attention corresponds to their walking path starting from the lobby LED, which catches their attention the most yet takes their time the least, to the reception video wall, and the elevator LED, which users will spend their time with it the most while they are waiting for the elevator. Time is also one of major factors that affect users’ interests which differ from each period of time during the day.

Other than our target audience, we also looked into people’s behavior with similar types of media, such as screens which are mostly seen in mass transit systems. From our observation, people tend to ignore public screens. Not that they intuitively ignore the screens but they develop a habit of ignoring commercials on the screen. With this perspective in our mind, we aimed to create a new user habit which makes users want to take a glance at the screens everyday, to make the most of all the screens in the lobby. To create such a habit, we chose to deliver users’ interests at the right time. The content should be expectable yet not boring in order to keep users’ attention with their interested information and pleasant ever-changing visuals.

Design Development
All these aspects considered, we came up with a ‘theme and trigger’ system, using a timeline to select which content to be displayed. Every screen displays the same theme in a specific period of time. We developed 3 computer generated themes that match office workers’ interests during each period of the day.

The main theme ‘Capsule’ was designed to retain user attention with a captivating capsule system design that developed from trails of a moving circle, and inform basic information: date, time, and outdoor weather. At the same time, customized inspirational quotes, keywords, and related symbols are also displayed to plant good thoughts and spread positive energy to people working at or visiting the Mitrtown Office Tower.

The second theme ‘Vector Field’ illustrates the local Air Quality Index through an animated vector field that makes each screen look like a floating fabric. The theme is triggered 3 times a day: 8-9 A.M when most office workers arrive at their offices, 12-1 P.M. when they go outside for lunch, and 6-7 P.M. when they leave the office, in order to get them prepared for a bad air day or help them feel safe to breathe in the clean air. Colors matching with the US AQI scales are embraced as the background of the animated vector field to make users aware of the air quality level with just a single glance.

The third theme ‘Isometric Cube’ focuses on stock index, informationally and visually. Data from each market is visualized through kinetic cubes, a landscape of moving cubes, adding movements to the architecture. The cubes are manipulated to form into digits and graphs to inform stock index and growth of the market.

Technical challenges
As mentioned above, the project visualizes data on 5 different screens, each connected with a computer to generate graphics in real time. There is one dedicated server who collects data from various sources. It keeps the schedule and triggers all the frontends when the theme has to be changed. The server provides data to all the frontends which turn it into graphics through algorithms. The entire visualization is programmed and generated using Unreal Engine 4. The server is written in Python.

To achieve the design concept, we set up 3 different virtual spaces. Each space has its own environment, lighting and data visualization system. There are 5 3D-cameras located in the space, capturing real time scenes.

The ‘Capsule System’ theme turns data into fonts and 3d paths, then algorithmically generates spheres which leaves trails as they travel along the paths.

Technically, the challenge of the ‘Vector Field’ theme is to create an animated vector field. A custom shader is made for this theme in order to turn solid cylindrical geometries into a fabric-like plane. This ‘fabric’ waves according to the local wind speed.

We developed the kinetic cubes as a key for the ‘Isometric Cube’ theme. The realistic light and shadow of these cubes is rendered with realtime ray tracing. This information is passed to a custom shader which determines the pillar movements.

This project is one of a great combination of design development, which matches perfectly with user’s behavior, and technical challenges, which generates a real time visually and informationally graphics based on the design requirements.

Thanks to the clients for taking the journey of developing ‘Mitrtown Data Sculpture’ with us. Lastly, one thing that we believe is that we can create a good impact on users’ life by using creative technology in a creative new way, and this will change their life since then.

If you are looking for a creative yet functional installation to be integrated in your space, please feel free to contact us at contact@bit.studio.

dashlane

Pentagram has designed a novel brand identity for Dashlane. It centers around a distinctive “Dashlane D” formed of dash-like shapes. As the identity will be applied in a wide range of media, we created a tool that helps graphic designers to generate patterns according to the direction Pentagram designed.

As the app launches, graphic designers are presented with a grid of rounded rects. There is a menu bar on the left that enables them to tweak the number of rows and columns, the size of the grid and the column offset. They can also manipulate the shape scale and rotation. The color of foreground and background can be chosen from a hand-picked color palette in the menu down below. When finished, designers can export the generated pattern as an svg file. There is also an option to copy to clipboard and paste in Adobe Illustrator without losing quality.

We develop the app with Paper.js as it provides 2d shape transformation : translate, rotate and scale. We custom made a couple functions to imitate 3d effects such as rotating around Y axis. With the Progressive Web Application (PWA) technology, this app can be opened on any platform and can be downloaded to use in offline mode.

To learn more about the design, please visit Pentagram’s website from https://www.pentagram.com/work/dashlane

If you are interested in this experience and would like to know more, feel free to contact us at contact@bit.studio.

laugh alive pavilion at bangkok design week 2020

“LAUGH ALIVE PAVILION” is an information center, a meeting point, a resting area, and a joyful start to begin the journey to Bangkok Design Week 2020. By participating in our AI powered warm-up experiences, visitors would be all set and ready for the creative adventure, equipped with a custom route on Google Maps based on the activity they participated in.

Thank you A49 for including us as a part of LAUGH ALIVE PAVILION, along with moreloop and Rightman. Countless smiles and laughter had been shared under the colorful shade of our pavilion and that encouraged us to keep on creating exciting projects!

Thank you all visitors for participating and sharing your happiness at our pavilion, we were so happy to see that!

If you are interested in this experience and would like to integrate it in your special event, feel free to contact us at contact@bit.studio.