Work Experiments About Classes

Audio Diary - Front-End Web

Talk about your feelings to get through hard times.


This project is created during COVID-19 to encourage people to talk about their feelings to stay connected to their inner-selves. I made this using p5.js, and p5.speech library to convert speech to text. It has been my personal audio diary to keep track of my feelings and I hope this would help more people during hard times like this.

Tools: front-end,Javascript, HTML5, CSS, Github, Heroku, p5.js, p5.speech

Time: Mar. 2019 for COVID-19

Problem Statement

How might we create a welcoming space for people to talk about their feelings during COVID-19?


To build a personal sanctuary for people to talk about their feelings during hard times. COVID-19 pandemic is just one of the hard times we are and will be going through.


Developer & Designer


This is a passion project since I want to make people feel happier during this depressing pandemic. People are feeling more sensitive and even refer to their living space as ”house arrest”, “prison”, “solitude”. (from my encounter on social media) I wanted to create a private and safe space for them to talk about their feelings without recording any of the data.


We are undergoing a difficult time right now in 2020 since the outburst of the COVID-19. The global pandemic is causing so many distress in us. I have been keeping myself busy with movies, books, and cooking while conducting social distancing to prevent the spread of the virus for over two weeks then.

I felt the urge to create something so that people can talk about their feelings.

I hope through this, you can start a conversation with yourself and look within.

  • What is something that we can adjust ourselves to?
  • What are some of your thoughts in their pure form?

Maybe, this could be your personal sanctuary while exercising social distancing.


The idea of this project came when I was about to write in my journal for the first time in a long time since January 2019. I wanted to write down my self-reflections as I get to spend more time with myself.

When I was about to get my journal, I thought writing takes a long time compared to talking. Why don’t I create an audio diary that I can keep to myself as my journal instead?

So I spent two days writing this program since I knew it would benefit others to get through this hard time. Also, I appreciate talking more because of COVID-19. When I am spending time with myself, I barely talk. When I have zoom meetings, hearing myself talk feels strange. I want to salvage the lost social connections with myself through this audio diary as well. It makes me so happy knowing that this will benefit people alike. The whole globe is a community now and we are all in this together. It is during this moment that I realized how important social interactions are in our lives.


I used p5.js and p5 speech library to create an audio diary with some visual twist.

For the color palette, I selected the pastel color to create a sense of calm and positivity.

color palatte using pastel colors

Interaction Flow

For the user interaction, I created the experience flow as below:

interactions from user speech to text using p5 speech library


  • I did several iterations of the pastel color palette as well as the shapes of the generated items.
  • Before I introduced the different shapes and fonts, it seemed quite bland to me. I then tweaked around to achieve the final design.

AR, 3D Model, 100 days

Extensions of Ourselves - AR Filters

Addressing identity issues in society through 100 days of exploring on Spark AR platform.

Skills: Spark AR, Blender, and Unity

Interactive VR Experience

Toilet Paper Mania - Immersive VR Museum

A virtual experience that invites people to relive, rethink, and reflect their responses/ their change of behaviors towards the toilet paper mania during COVID-19.

Skills: Blender and Unity

UX, UI, Web

Audio Diary - Front-End Web

Talk about your feelings to get through hard times.

Tools: Front-End,Javascript, HTML5, CSS, Github, Heroku, p5.js, p5.speech

Interactive Exhibition, Generative Music

Forest of Sounds - Interactive Music Exhibition

An interactive music installation that reinterprets the daily mundane sounds.

Skills: Kinect, Max/Msp, Max for Live, Ableton, Composing


Dance of the Rain - Light Visualization

A light visualization of historical rain data of cities around the globe.

Skills: Arduino, Wifi, HTTP request, JSON parsing, API

Live Performance, Music, Art

A Day, Any Day, Everyday - Live Performance

An audiovisual performance echoing the feeling of voidness and the draining of energy while living through the COVID-19.

Created under 6 hours for PerformaJam LIVE - CultureHub and Adjacent Jounral.

Product Design, Wearable Tech

Zeal - Product Design

A personal Apple watch band that keeps you warm in the cold.

Skills: Design Research, Market Analysis, Fabrication, Art Direction

UX, UI, Interaction Design, Fullstack Web

Mood for Food - Fullstack Web

A website offers food options based on user emotions.

Tools: HTML5, CSS, Javascript, Node.js, Database, MongoDB, Github, Heroku

UX, UI, Interaction Design, & Product Design

Authentic or Not - Interactive Cooking Game

An interactive game to learn recipes visually.

Skills: Fabrication, Physical Computing, Creative Coding

Experience Design & Interaction Design

Double Date - Video Sculpture

An interactive video sculpture exploring the relationships between humans and phones.

Tools: Arduino, Sprite, Projector, Laser-Cutter, After Effects, Premiere, Illustrator

Experience, Interaction Design, & Performance

All Connecting - Video Sculpture

An interactive video sculpture that exposes the systems of the Internet in real-time.

Skills: Projection mapping, MadMapper, Processing, Syphon Recorder, Real-Time Performance