+ 41

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😊

10th Sep 2019, 2:46 PM
Sheida Hedayati
Sheida Hedayati - avatar
31 odpowiedzi
13th Sep 2019, 1:29 AM
Calviղ
Calviղ - avatar
+ 18
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😁😊
12th Sep 2019, 4:06 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 16
Cbr✔[ Exams ] thanks 😁yea, I'm looking forward to it😉
10th Sep 2019, 5:30 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 15
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😊😊🌹
12th Sep 2019, 5:24 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 13
Sami Khan I wanted this one too🤗 and I also want the swipe gestures 👍👌 thanks alot 😊🌹🌹🌹
12th Sep 2019, 3:30 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 13
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
12th Sep 2019, 3:41 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 13
Mike Perkowski 👌👍😊thanksss
12th Sep 2019, 5:25 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 13
Calviղ 👌👍😄wow,this is the one which Mike Perkowski said (hammer.js). Actually I was looking forward to your answer too😉😀😊 thanks alot genius 👌👍🌹🌹🌹💃💃💃
13th Sep 2019, 6:02 AM
Sheida Hedayati
Sheida Hedayati - avatar
+ 12
Sami Khan do u know the swipe gesture too 😁😶?
12th Sep 2019, 3:43 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 12
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😊🌹
12th Sep 2019, 4:12 PM
Sheida Hedayati
Sheida Hedayati - avatar
+ 8
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!
12th Sep 2019, 4:25 PM
Mike Perkowski
Mike Perkowski - avatar
12th Sep 2019, 1:17 PM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 4
Calviղ I especially liked the line from your code: var mc = new Hammer(pad); The pun is clever. 😂🤣
14th Sep 2019, 8:50 PM
David Carroll
David Carroll - avatar
+ 3
Ama Duka i dont get you right
11th Sep 2019, 4:56 AM
E∆SI🇳🇬🤖
E∆SI🇳🇬🤖 - avatar
12th Sep 2019, 4:42 PM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 3
Sheida Hedayati I only showcased one of the gesture events, panning. There are other gesture such as zooming, check out the documentation..
13th Sep 2019, 6:26 AM
Calviղ
Calviղ - avatar
+ 2
I hope this help to you https://youtu.be/VD2bIMBu2y8
11th Sep 2019, 5:51 PM
Smit Bosamiya
+ 1
use tensorflow.js for the machine learning part, theres a guide on this link https://towardsdatascience.com/handtrackjs-677c29c1d585
10th Sep 2019, 8:40 PM
Jose Ramon Gomez Armenta
Jose Ramon Gomez Armenta - avatar
+ 1
I think it's possible with ReactJS framework.
10th Sep 2019, 9:16 PM
Iftekhar Alam
Iftekhar Alam - avatar
+ 1
<!--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 -->
11th Sep 2019, 7:44 AM
Rgevananda