+28

Hand gesture recognition in JavaScript [swipe gesture]

Hi, I want to move a shape with hand gestures in JavaScript. for example when you click on top, it goes top and do the same for other directions. if there are some ways to write this, I want the most easiest and understandable way 😉 thanks in advance😊

9/10/2019 2:46:12 PM

Sheida Hedayati

32 Answers

New Answer

+11

https://code.sololearn.com/WjXb49yT1a40/?ref=app

+14

Sami Khan Yea I know JS but not professionally, I got what you said I've worked with touchmoves , but I don't know if I can do it or not 😁 it takes some days for me to do that😁😊

+12

Cbr✔[ Exams ] thanks 😁yea, I'm looking forward to it😉

+12

Sami Khan yesssss this is similar to hand gestures 👌😊💃 I needed both of your codes 👍👌👌 and it was so great that you wrote them in JavaScript not jQuery or... 😊 because I don't know them yet . now I'm going to read them line by line and analyze them for myself 😉💃 thank you so much😊😊🌹

+10

Mike Perkowski 👌👍😊thanksss

+10

Calviղ 👌👍😄wow,this is the one which Mike Perkowski said (hammer.js). Actually I was looking forward to your answer too😉😀😊 thanks alot genius 👌👍🌹🌹🌹💃💃💃

+9

Sami Khan I wanted this one too🤗 and I also want the swipe gestures 👍👌 thanks alot 😊🌹🌹🌹

+9

Cbr✔[ Exams ] 😁yeah, but I needed that too... I also want the gesture one, when you draw your finger on the screen the ball moves

+9

Sami Khan do u know the swipe gesture too 😁😶?

+9

Sami Khan was it obvious???😁😁😁 I didn't have the face to say it directly 😅😅😉some JavaScript codes are hard for me and I can't write them without help😊🌹

+8

😂😂 welcome to ML Sheida Hedayati PS: Let's see what the chief javascripter would say 👌

+5

Sheida Hedayati Then, it's not a gesture

+5

There are libraries for swipe gestures in the browser like hammer.js and you can probably use those, but if I were implementing this from scratch, I’d assign a mousedown and a touchstart event listener to any element I wanted to be “swipable”. In the event listener, I’d save the inital touch or mouse down point as the starting point and then use mouseup and touchend events to get the end point, then handle the logic to determine which direction to swipe by comparing the start and end x and y values. If you wanted to have something happen depending on if you tocuhed the top, bottom, right or left of the element, you could use the same approach only use the .getBoundingClientRect() method to find the center point of the element and compare that point to the touch point. I hope this helps! Good luck!

+4

https://code.sololearn.com/Wzr10c74kBBb/?ref=app

+3

Ama Duka i dont get you right

+3

May be this one!! https://code.sololearn.com/Wj9o4FdapC2p/?ref=app

+3

Sheida Hedayati I only showcased one of the gesture events, panning. There are other gesture such as zooming, check out the documentation..

+2

I hope this help to you https://youtu.be/VD2bIMBu2y8

+2

Calviղ I especially liked the line from your code: var mc = new Hammer(pad); The pun is clever. 😂🤣

+1

use tensorflow.js for the machine learning part, theres a guide on this link https://towardsdatascience.com/handtrackjs-677c29c1d585