益生菌益生菌朝菌学园ZhaoDesign
01
为什么手势交互很重要？
自 2010 年推出 Siri 以来，人们越来越迷恋语音界面。但语音交互也存在局限性。当其他人在场时，它们反应缓慢、令人尴尬，并且需要一定的触发短语，例如“好吧，Google”或“嘿，Siri”。
不过值得庆幸的是，对着空气说话不再是我们唯一或最好的选择。
新款 iPhone 引入了 能够感知三维空间并记录每个像素深度的摄像头，Nest IQ 和亚马逊的 Echo Look 等家用设备现在也拥有自己的摄像头。结合通过更多训练数据进行学习和改进的神经网络，这些新相机可以创建场景中人物的点云或深度图，以及他们的姿势和移动方式。
神经网络可以被训练来识别特定的人，并对他们的活动进行分类，同时对远处的手势做出反应。神经网络和更好的相机共同为手势设计和基于手势的交互模型开辟了一个全新的空间。
这些新技术的研发引出了一个问题：在现有的交互方式中——触觉（触摸）、声音（语音）和视觉（手势）——什么时候使用哪种更好，为什么？
生活中的案例们指向了一个答案。当我们进行水肺潜水、滑水或在航空母舰甲板上指挥交通时，听觉通道不可用，因此手势或触摸就变得至关重要。
在手术室里，外科医生的双手是无菌的，她无法翻阅放射科的扫描资料——只能通过语音和手势进行查看。如果你在指挥管弦乐队或进行军事突袭，你就不能喊口令，所以我们又回到了手势。
为了进一步深入研究，一个剑桥工作室的团队进行了一系列实验，以确定何时手势可能是最佳选择。在对结果进行分析后，他们归纳出选择手势而非语音或触摸的四个原因：
速度： 如果需要快速表达，手势要比说句子快得多。
距离： 如果需要隔着房间交流，手势比声音更容易处理。
词汇有限： 如果你没有千言万语要说，手势就能很好地发挥作用。在特定情况下，手势越少越容易记住。(例如，拇指向上/向下）
表现力胜过精确度： 手势非常适合表达强烈的情绪。例如，音乐指挥不仅能传达音乐的抑扬顿挫和节奏，还能表达更多的情感："dolco"、"marcato"、"自信"、"悲伤"、"渴望 "等等。
我们在设计产品时，可以巧妙利用手势的微妙性、表现力和速度，这将创造一些新的可能。
02
识别手势交互的重要硬件Kinect
关于Kinect >
Kinect 传感器可以在 3D 空间中捕获人体的基本结构（如骨骼），并将其用于手势控制。Kinect 设备使用红外发射器将图像投射到空间中，并使用两个红外摄像机观察该图像。根据两幅图像的畸变和相对偏差，Kinect 计算出 深度图像。然后使用深度图像来计算人体（特别是关节）所在位置。
下图让你对 Kinect 可以提供的数据有一个印象。
两个版本的Kinect >
Kinect是微软为Xbox 360游戏机开发的，并于2010年发布。我们将第一个 Kinect 称为Kinect 1。只要安装两个不同的USB控制器，就可以在一台计算机上操作两个Kinect。
自2013 年以来，出现了一个新版本：Kinect One。它在互联网上也称为Kinect 2或 Kinect v2。与Kinect 1 不同，Kinect 2 需要 USB 3.0 连接，并且两个 Kinect 2 不能在一台计算机上运行。（Kinect 1 可以）
要操作 Kinect 2，我们的计算机必须具有USB 3连接（带有适配器的新 USB-C 也可以使用，USB 2 肯定无法使用）。不幸的是，骨骼数据（关节）的跟踪只能在Windows下进行。然而，对于Mac，我们可以获得原始数据（网络摄像头、红外图像以及最有趣的深度图像）。
Daniel Shiffmann 列出了两个不同的Kinect 类型的主要区别：
Kinect 1： 原始系列称为型号 1414，型号 1473 进行了更新，后者可能会出现兼容性问题。另一个更新是Kinect for Windows 1，同样，兼容性并不总是得到保证。
Kinect 2： 新的 Kinect，外观发生了变化（稍微更大、更方形），增强了功能（包括更高的相机分辨率、面部检测、更多关节点检测、2 个 Kinect 之间的干扰更少）和更广角的镜头（用于捕获区域）
以下是技术数据对比（来源：Zugara）：
产品现状 >
不幸的是，Kinect 2017 已停止销售，这意味着在未来某个时候相关公司对于Kinect的支持可能会终止。
Kinect 1已不再生产，但仍有大量二手产品。我们需要确保 Kinect 1有USB 端口，因为还有一个版本只能连接到 Xbox（自己的连接器）。
Kinect 2仍在市场上销售，售价约为 80 欧元（截至 2017 年 12 月）。我们还需要一个额外的适配器（电源装置和 USB 连接），该适配器最初的价格约为 60 欧元（见下图）。
03
使用Kinect的交互项目
精彩案例预览 >
【DARKROOM EXPERIENCE】
DARKROOM EXPERIENCE是一个有关对感性世界和人机关系的探索的视听装置，传达了对互动和人与物体和他人的关系的反思。
该装置共设置了三个工作站，每个工作站都配备了一个55英寸的显示器电脑(输入规格)连接到Kinect 2.0。观众可以从平面设计的三个基本方面:颜色，形状和字体，改变投影的视觉效果。
项目详情：查看链接 ↗
【SUBSTANCE】
SUBSTANCE是一个沉浸式的视觉装置，每个参与者都可以实时与作品互动。该项目使用TouchDesigner程序制作，同时使用了一个可以读取用户手势的Kinect传感器。
装置由4个部分组成，该项目数字模拟和设计的出发点是自然的力量。画布中粒子的速度，大小和颜色在不断变化，生成式视频艺术让用户能够沉浸在不断流动的运动和色彩表达中。
项目详情：查看链接 ↗
【交互影像《秋意浓》Touchdesigner+Kinect制作】
这支影像全程使用Touch designer制作，使用粒子生成了草和芦苇，用Kinect将人的腿部谷歌绑定在一个小球上，随着小球的移动feedback再调整它的edge会产生水波纹；同时将人的手臂骨骼和芦苇以及草的xy轴的运动变化绑定在一起，模拟风的动效，仿佛人的手控制了风，吹动了芦苇和草。
这是一个结课的作业，做的没有那细致，主要是做了一个可交互的大自然场景，立意是让人在繁忙的生活中能通过影像的交互，来获得心灵的宁静。
项目详情：查看链接 ↗
【盛世华韵-古画kinect体感交互游戏】
《盛世华韵》是基于古画《步辇图》制作的体感交互作品，采用kinect硬件技术，将传统古画数字化呈现，让更多人通过此作品了解唐朝文化。
作品是以动态古画作为表现形式吸引用户，以求娶文成公主为线。用户可通过体感摄像头识别指定动作，也可手势识别选择不同妆容和服装，画面人物动作随之变动呈现相应的场景及动作介绍，在体验过程中产生视觉互动，增加用户沉浸感与参与感。
项目详情：查看链接 ↗
04
你可以用Kinect做的事情
捕捉相机图像 >
Kinect 包含 一个普通网络摄像头 (1080p) 和一个红外摄像头（512x424 像素，30 Hz）。可以获取并显示来自摄像机的图像。
我们还可以获得计算出的深度图像( 512x424)。深度图像表示每个像素上像素的“深度”。可以想象一下，对于每个像素，都有一条光线从相机发出，一旦光线碰到障碍物，就会测量那里的深度。 深度图像通常显示为灰度图像，像素越亮，相应的障碍物越近。
骨骼识别 >
在计算机图形学中，骨架是指由关节和骨骼组成的结构。关节是更重要的信息，因为关节的位置和角度决定了人的姿势。
骨骼可以以不同的方式构建，具有更多或更少的关节点（例如具有 3 个点或 15 个点的脊柱）。Kinect 使用一组固定的25 个关节点。
这里的骨骼专指人类的骨骼，无法记录任何动物。Kinect 尝试识别每个深度图像中的一个或多个人体骨骼，并正确定位 25 个关节，最多可以同时检测和跟踪6个骨骼。
此外，还可以识别基本的手形：张开、合拢和套索。但该信息的可靠性是有限的。
识别的质量在很大程度上取决于用户相对于 Kinect 的位置。首先，用户必须站在 Kinect 的捕捉范围内（距离和角度）。当用户面向Kinect并且手臂未被遮挡时，检测效果最佳。侧身站立、双臂交叉或背后站立都会得到不好的结果。
人脸识别 >
Kinect 最多可以识别 6 个用户的面孔，可以获得有关相应面孔的以下信息：
- 区域（矩形）
- 五个关键点：眼睛、鼻子、嘴角
- 人的状态：快乐、左/右眼闭合、看向别处、嘴巴移动、嘴巴张开、戴眼镜......
- 线框（网格/顶点）
05
代码案例
这是一个跟踪骨架的示例：
由这段代码生成：
导入 KinectPV2.KJoint；
导入 KinectPV2.*；
KinectPV2 体感；
浮动 zVal = 300;
浮动 rotX = PI;
布尔值 showVideo = true;
无效设置（）{
尺寸（1024、768、P3D）；
kinect = 新 KinectPV2(this);
kinect.enableColorImg(true);
kinect.enableSkeleton3DMap(true);
kinect.init();
}
无效绘制（）{
背景（255）；
如果（显示视频）{
图像(kinect.getColorImage(), 0, 0, 320, 240);
}
//将场景平移到中心
翻译（宽度/2，高度/2，0）；
尺度（zVal）；
旋转X（旋转X）；
数组列表skeletonArray = kinect.getSkeleton3d();
for (int i = 0; i < sculptureArray.size(); i++) {
KSkeleton 骨架 = (KSkeleton) skeletonArray.get(i);
如果（骨架.isTracked（））{
KJoint[] 关节 = sculpture.getJoints();
中风(骨骼.getIndexColor());
绘制骨骼（关节）；
}
}
}
无效drawSkeleton（KJoint []关节）{
showJoint(关节[KinectPV2.JointType_Head]);
showJoint(关节[KinectPV2.JointType_Neck]);
showJoint(关节[KinectPV2.JointType_SpineShoulder]);
showJoint(关节[KinectPV2.JointType_SpineMid]);
showJoint(关节[KinectPV2.JointType_SpineShoulder]);
showJoint(关节[KinectPV2.JointType_SpineBase]);
// 右臂
showJoint(关节[KinectPV2.JointType_ShoulderRight]);
showJoint(关节[KinectPV2.JointType_ElbowRight]);
showJoint(关节[KinectPV2.JointType_WristRight]);
showJoint(关节[KinectPV2.JointType_HandRight]);
showJoint(关节[KinectPV2.JointType_HandTipRight]);
showJoint(关节[KinectPV2.JointType_ThumbRight]);
// 左臂
showJoint(关节[KinectPV2.JointType_ShoulderLeft]);
showJoint(关节[KinectPV2.JointType_ElbowLeft]);
showJoint(关节[KinectPV2.JointType_WristLeft]);
showJoint(关节[KinectPV2.JointType_HandLeft]);
showJoint(关节[KinectPV2.JointType_HandTipLeft]);
showJoint(关节[KinectPV2.JointType_ThumbLeft]);
// 右腿
showJoint(关节[KinectPV2.JointType_HipRight]);
showJoint(关节[KinectPV2.JointType_KneeRight]);
showJoint(关节[KinectPV2.JointType_AnkleRight]);
showJoint(关节[KinectPV2.JointType_FootRight]);
// 左腿
showJoint(关节[KinectPV2.JointType_HipLeft]);
showJoint(关节[KinectPV2.JointType_KneeLeft]);
showJoint(关节[KinectPV2.JointType_AnkleLeft]);
showJoint(关节[KinectPV2.JointType_FootLeft]);
}
void showJoint(KJoint 关节) {
笔画权重（10）；
点（关节.getX（），关节.getY（），关节.getZ（））；
}
无效按键（）{
如果（键==''）{
显示视频=！显示视频；
}
}
有关捕捉运动的代码可以参阅Kinect1Processing (GitHub)
人体运动状态被记录意味着在每个“帧”（通常是 1/60 秒）中，骨架姿势都会保存在列表中。骨架姿势又由关节的所有位置（3D 点）组成。
06
扩展
如果你想了解更多关于体感交互的技术方案，可观看以下课程节选：
（此处为视频，请在原文中观看）
转发分享本篇推送，扫描文末二维码可领取本节课程讲义～
本节课程先解释了体感交互的概念，并从应用的成熟度和精确度分析了几种主流的体感交互技术方案，包括IMU、TOF、结构光、双目摄像头、毫米波雷达、光学动捕等。
07
思考
毫无疑问，随着体感技术的发展，手势交互作为最自然的一种交互方式，将在我们的日常生活中越来越常见。
请结合生活实际，思考一下哪些场景更需要用特定的手势进行交互。
08
加入社群
近年来，随着科技的不断创新和用户需求的不断变化，交互设计成为备受关注热门领域，在互联网时代的发展前景非常可观，无论是升学还是就业，都有越来越多人“入坑”交互，但由于交互在国内还是一个比较新兴的学科，目前绝大部分学习交互的同学都是跨专业甚至是零基础的，对交互设计的知识储备都比较有限，朝菌学园也收到了同学们大量咨询有关交互学习的问题。如果你也期待与更多同学共同探讨设计*技术交叉学习的未来，开拓学习交互设计的全新体系， 欢迎扫码进群 ～
进群通道