Playful Web Experiences

Web Design
Front-end Development
Machine Learning
Time
2023
Tools
Javascript, HTML, CSS, Three.js, Tensorflow.js
Role
Individual Project
Intro
This is the archive of the several playful web experiments I built with Three.js and Tensorflow.js
Sneak Peak Game
Sneak Peak Game is an AI-powered game that encourage its players to close their eyes and take some breaks from the screens.
The game works like this:

Both players close their eyes at the start of the game. The goal is to catch the other player sneak peeking! which means,

You open your eyes to find the computer’s eyes closed –> game continues
You open your eyes to find the computer’s sneak peeking on you –> you win!
The computer opens its eyes to find that you’re sneak peeking on it –> you lose 😞

Remember to keep your eyes closed as much as possible. Give you opponents less chance to win! The player control the eyes on the screen by closing and opening their actual screens. The webcam would capture the users’ face and the model will detect whether the player’s eyes are closed in the backend.
The Moon is Beautiful Tonight
This memory space was inspired by a Japanese phrase: 月が綺麗ですね (the moon is beautiful tonight, isn’t it?).
I chose to construct a setting that served as a physical representation of my memories because this song and this phrase have many strong associations with my own experiences.

The song played in the background is called 今晩はお月さん (Good evening, Mr. moon), written and performed by a Japanese brand, Humbert Humbert.
I Know I Am Always Correct!
I know I am always correct is a fun and goofy app that builds on the inaccuracy of the model detection model.
Inspired by the inaccuracy of the object detection model, I created an app that can always make correct guesses by detecting what this object is NOT. The app would randomly select three different objects from the complete object list and make guesses that detected object is not something.
Live Demo
Next Project ____