The first thing I thought looking at this assignment was the game called “Blue Archive” (2021) from Nexon & Yolstar. In this game, each character has a “Memorial Lobby” where the user can interact with the live2D version of the character.
From this, I decided to create a face of myself with simple shapes and make a simple user interaction where mouse clicks resemble patting the character.
The method of the algorithm was not so complex. All I had to do was draw a different shape when the mouse is clicked and change the shapes’ coordinates according to the location of the mouse on the screen.
However, since the mouse can move anywhere on the canvas, I had to decrease the amount of movement relative to the movement of the mouse using following statement.
let moveX = (mouseX – 200) / 60;
let moveY = (mouseY – 200) / 60;
let facemoveY = (mouseY – 200) / 100;
Through this statement, eyes give a feeling of chasing the movement of the mouse cursor, and the face seems to move in the same direction as the patting.
(try clicking the face below)