Guess the Emoji

An interactive game designed to stimulate logical thinking and agility through an entertaining interface

Guess the Emoji is an interactive game designed to stimulate logical thinking and agility through an entertaining interface. The game utilizes the functionalities from ML5.js PoseNet and P5.js for both interface and system design.

The objectives of the game are simple and straightforward. It is a reverse version of a conventional "Guess the Emoji" game, a fun guessing game in which the player guesses a certain word based on a shown set of emojis. In this game, the players' job is to use their noses to find the two emojis that make up the presented word. For example, if the presented word is "Love Sick", the player should be looking for the emojis ❤️ and 😷 on the screen.

There are a total of 50 prompts, and 8 of them will be selected randomly and presented at each round. In the background, 40 out of 125 emojis will be generated at random positions for every round. Using ML5.js PoseNet's real-time pose estimation functionality, the player's nose turns into a red dot serving as a tool to hunt for the target emojis. If the distance between the red dot and emojis is close enough, the emojis will be disappeared and as all the two emojis are removed, the player will be transitioned to the next round. After the 8th round, the player then reaches the Final Page, where they get a simple message on their performance and an indication of the total time they played. The player may click the "Start Again" button to restart the game.

Click the "LET'S PLAY" button down below to play the Guess the Emoji game!

Or visit https://guess-the-emoji.glitch.me/

Preliminary sketch

The preliminary sketch, created using Photoshop, shows a round for the word "Love Sick".

The number of background emojis has been reduced for convenience purposes. The initial idea of creating an entertainment tool using emojis has not been changed much from the beginning.

Interface Design

There are three pages in the game: Home Page, Game Page, and Final Page. I exclusively used P5.js, a JS client-side library for creating graphic and interactive experiences, to create an interface for the game. This library allows people to design a decent user interface without advanced knowledge of HTML or CSS.

Prototype

For prototyping, tracking of the nose has been replaced by a simple mouse click. You can try a prototype of the game below.

Real-time Human Pose Estimation

In the game, PoseNet is used to track the player's nose position. PoseNet is a machine learning model that can estimate human pose in real time. It can be used to estimate either a single pose or multiple poses; this project uses a version of the algorithm that can detect one person only.

Code:

function drawKeypoints() {
  // Loop through all the poses detected
  for (let i = 0; i < min(poses.length, 1); i++) {
    // For each pose detected, loop through all the keypoints
    for (let j = 0; j < poses[i].pose.keypoints.length; j++) {
      // A keypoint is an object describing a body part (like rightArm or leftShoulder)
      let keypoint = poses[i].pose.keypoints[j];
      // Only draw an ellipse is the pose probability is bigger than 0.2
      if (keypoint.score > 0.2) {
        if (j == 0) {
          noseX = keypoint.position.x;
          noseY = keypoint.position.y;
        }
      }
    }
  }
}