2021 年，我在三里屯见过一个装置，它可以让你用手势控制屏幕上的粒子，今天我把这种体验复刻了出来
nanxiaobei · nanxiaobei · 1 月 31 日 · 3175 次点击2021 年，我在三里屯见过一个装置，它是一个大屏幕，可以检测到你的手势，屏幕上的粒子会跟着手势运动
我对那个装置印象很深刻，当时玩了很久
今天，我终于把这种体验复刻了出来，点击按钮，授权摄像头，让你的手出现在镜头里，然后你就可以操控屏幕上的粒子了🪄
鬼知道开发这个东西时，我手舞足蹈的试了多久，于是我发现了它的一个妙用，可以帮助你在电脑前锻炼~
体验地址 → https://particle-sense.vercel.app/
 |
1
milala 1 月 31 日
为什么不是捕捉整个身体
|
 |
2
Folder 1 月 31 日
挺有意思的, 手势检测是基于 MediaPipe Hands 实现的吗?
|
 |
3
raphx 1 月 31 日
```text
c0d37412485c7426.js:401 Error in gesture recognition: Error: Minified React error #185; visit https://react.dev/errors/185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at rm (f2f58a7e93290fbb.js:1:42396) at rd (f2f58a7e93290fbb.js:1:41968) at aj (f2f58a7e93290fbb.js:1:67984) at f2f58a7e93290fbb.js:1:67862 at c0d37412485c7426.js:1:22147 at Set.forEach (<anonymous>) at i (c0d37412485c7426.js:1:22136) at setHandPos (c0d37412485c7426.js:1:22672) at c (c0d37412485c7426.js:401:137890) ``` |
 |
4
aiGPT 1 月 31 日 via iPhone  1
体验了一下，very nice
|
 |
5
zdl0929 1 月 31 日
很不错，有开源吗
|
 |
6
s5s5 1 月 31 日
真不错，我怎么更喜欢右下角的骨骼效果，怎么弄出来的？
|
 |
7
doctorzry 1 月 31 日
好玩，不过只能捕捉手势对于你说的“在电脑前锻炼”还是不够用，以这个目的开发的话可以继续加点动作检测~
|
 |
8
AzureTT 1 月 31 日 1
很有意思
|
 |
9
wildman9527 1 月 31 日
能感觉到这些粒子跟手势有关系，但又很难说清到底是什么关系。。。😂，有点不可控。
|
 |
10
darkengine 1 月 31 日 1
好玩，貌似是跟踪手指的动作，捏合的时候会把所有粒子聚集到一起，能看到跟随的是手指的方向。
|
 |
11
ninjaJ 1 月 31 日 1
赞！
|
 |
12
nobody123 1 月 31 日
怎么授权摄像头呢?
|
 |
13
SillyAdam 1 月 31 日 1
玩了一会。赞！
|
 |
14
akakidz 1 月 31 日 1
体验很好 响应非常及时
|
 |
15
yebem 1 月 31 日
我的 edge 浏览器，打不开网页
|
 |
16
lazydog 1 月 31 日 1
体验了下，很不错。像一楼说的，如果可以加入全部身体动作的捕捉，就可以全身锻炼了。另外，目前看着是只捕捉了单个手的动作，两只手同时出现在摄像范围内，仅捕捉首次出现的那只手。比较好奇，如果两只手都不捉的话，会是什么样的感觉。
 |
|
18
lazydog 1 月 31 日
@lazydog #16 此外，如 9 楼说的，粒子的汇聚不确定和手势之间的具体关系。我伸开五指，粒子散开。我握成拳头，粒子汇聚。我握成拳头上下挥动，也会有散开和汇聚的的效果。不过确实挺有意思的，如果后续以此增设游戏关卡，加入全身动作捕捉，会是新的一番景象。
|
 |
19
nanxiaobei OP @raphx 试试 chrome
|
|
20
nanxiaobei OP @Folder 是的！ MediaPipe
|
|
21
nanxiaobei OP @milala 值得一试 😃
|
|
22
nanxiaobei OP @zdl0929 还没有呢
|
|
23
nanxiaobei OP 1
@s5s5 google mediapipe https://ai.google.dev/edge/mediapipe/solutions/guide?hl=zh-cn
|
|
24
nanxiaobei OP @doctorzry 哈哈哈捕捉整个身体可能更有趣
|
|
25
nanxiaobei OP @wildman9527 就是手掌上下左右的动，或者握拳再打开~
|
|
26
nanxiaobei OP @nobody123 默认会请求权限的，试试 chrome 最新版~
|
|
27
nanxiaobei OP @yebem 试试 chrome ，暂没测其它浏览器~
|
|
28
nanxiaobei OP @lazydog 全身捕捉值得一试哈哈，等有空试试~
|
 |
29
panda188 1 月 31 日 via Android 1
手机试了下也行😂
|
|
30
nanxiaobei OP |
|
31
nanxiaobei OP @panda188 是的！
|
 |
32
lijunjieone 1 月 31 日
挺不错的。会开源吗
|
 |
33
adamwang 1 月 31 日 1
太好玩了，十分的丝滑。要是张开手掌的时候能让颗粒像大爆炸一样散开就更帅了。
|
 |
34
nVoxel 1 月 31 日 1
bgm 好评，手势识别也有意思。棒（看楼上那么多好评，为了试试看效果今天折腾好久想了个办法将手机弄给 pc 当摄像头用）
|
 |
35
hanguofu 1 月 31 日
有意思~ 如果能加上肢体识别就更好了~~
|
 |
36
genesisx 1 月 31 日 1
挺好玩
|
|
37
raphx 1 月 31 日 1
@nanxiaobei 赞，直接结合 AI+AR 搞个贾维斯吧
|
 |
38
dji38838c 1 月 31 日
claude code 不错呀
|
 |
39
cat9life 1 月 31 日 via iPhone
我的回复咋没了..这东西能操控网页元素吗？
|
 |
40
Routeros 3 天前 1
真不错。
|
|
41
nanxiaobei OP @lijunjieone 等再整理整理代码哈哈
|
|
42
nanxiaobei OP @adamwang 张开手掌的时候是发散的~
|
|
43
nanxiaobei OP @nVoxel 手机上也可以玩，适配了哈哈~
|
|
44
nanxiaobei OP @hanguofu 等后面想想有没有新玩法
|
|
45
nanxiaobei OP @cat9life 操纵网页元素理论上需要开发个 chrome 插件~
|
 |
46
MackMa 3 天前 1
cool
|
|
47
adamwang 2 天前
@nanxiaobei #42 嗯嗯，现在是发散的，但是现在看起来它聚合起来的时候不是一个点状的，是上下裁切了的一个圆形。我的意思是要是能手掌合起来的时候让他们聚成一个点，张开的时候再满天星感觉更酷一些 哈哈哈。有种当神仙施法的感觉。
|
 |
48
MikePerfect 2 天前
卡兹克的吗
|
|
49
nanxiaobei OP 1
@adamwang 哈哈，这个很难平衡，它是有物理规律的，如果要聚成一个点，代表能量很强，就会先剧烈晃动一会儿，看起来有点晃眼
|
|
50
nanxiaobei OP @MikePerfect 卡兹克是啥玩意
|
Select Language