I’ve also build a website with onboarding experience.
I’ve also build a website with onboarding experience.
Pat Pat is a platform where users can interact with the screen physically. It mergers the tactile and visual information to bring the tapered experience within this screen age back to stage.
Nowadays, we spend a lot of time on screens. We use our fingers scrolling on smartphone screens, and use our hands to click and type to interact with the laptop. It seems like our hands are still very busy everyday, but the variety of tactile input has decreased. We see and hear a lot, but touch less. Today, the Internet makes it possible for us to watch cute cats anytime and anywhere. In the past, it’s harder to encounter a cat if you or someone close has not petted a cat. However, in the past, you not only see the cats playing and running, but also feel their soft furs and body temperature.
This project focuses on the synthesis of the visual and tactile, and explores the possibility to bring the interaction in the past into the present media. And strengthen our connection with the physical world.
I was inspired by this meme, which I always want to do when I see cute cats online.
“Nice cat, pat pat”
Another inspiration is the project MetaTouch - Tactile cabinet of curiosities which combines the visual and tactile input. Participants would “feel” the objects present in visual space by interacting with the installation in the real world.
The visual space
There are mainly two parts in this project. Step 1 is drag the circles and rectangle to mark the points on the webcam video. The second part is to map the cat with the object and let the cat interact with the hand.
Step 1 : when mouse is pressed, check if the mouse is on the circle. If it’s on the circle, drag the circle and update the position by the x and y coordination of the mouse. If it’s not hover on any circle, then draw the rectangle.
Step 2-1 : draw the image of cat on the canvas, map the width and heigh of the image with the size of the rectangle drawn in step one. At the first place, I plant to map the hand position. Basically, it’s to get a ratio of the hand position on the rectangle and use this ration and the ratio between the rectangle and the canvas to map the hand point to the large canvas. But I met a lot of issues during the process, and also many bugs. So finally, I decided to map the image instead of the hand. But this requires the user no to move the object in the real world.
Step 2-2 : I pre-set two status of the cat. When the x distance between two circles is larger than the y distance, the cat is laying down. Otherwise, the cat is standing. There are two different images of these two statues. Within each statue, there are three conditions. When the hand is not on the cat, there is a normal state. And there are two different responses when the user is patting head or the tail. In this part, I control the appearance of images by using a lot of “if” statements. This code could work, but it makes my sketch very clumsy. I think there should be a smarter way to control the conditions.