Hand gesture recognition in JavaScript [swipe gesture]

Question

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😊

Answer 1

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

Answer 2

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😁😊

Answer 3

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

Answer 4

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😊😊🌹

Answer 5

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

Answer 6

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

Answer 7

Mike Perkowski 👌👍😊thanksss

Answer 8

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

Answer 9

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

Answer 10

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😊🌹

Answer 11

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!

Answer 12

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

Answer 13

Calviղ I especially liked the line from your code:

var mc = new Hammer(pad);

The pun is clever. 😂🤣

Answer 14

Ama Duka i dont get you right

Answer 15

May be this one!!

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

I think it's possible with ReactJS framework.

Answer 20

<!--Begin: Star-Clicks.com HTML Code--><script type='text/javascript' src='https://www.star-clicks.com/secure/ads.php?pid=55302067250395264'></script><!-- End: Star-Clicks.com -->