自己动手做交互系统

978-7-115-41372-7
作者: 徐皓祎
译者:
编辑: 陈冀康

图书目录:

详情

本书通过10-15个交互系统制作案例,手把手教会读者搭建完整的互动系统。这些制作项目内容涵盖:(1)基于物体的互动;(2)声音/音乐玩具;(3)投影互动系统。应用目前新颖的开源硬件Makey Makey, 辅以网页游戏,投影界面,3D打印等技术,读者可在最长一个周末的时间内完成一个完整的项目。同时我们会补充相关的互动背景知识和最新的交互设计案例,帮助他们拓展思路,进而掌握独立设计与制作的能力。

图书摘要

版权信息

书名:自己动手做交互系统

ISBN:978-7-115-41372-7

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。



徐皓祎,加泰罗尼亚理工大学人工智能专业研究生在读,彭佩法布拉大学认知系统与互动媒体专业。果壳DIY达人,万有青年养成计划入选者。以创客的身份参展2014北京创客嘉年华,2015深圳制汇节。

本书特色

本书作者曾经将这些项目结果制作成视频上传,获得很好的传播效果和口碑。作者针对每个项目,编写专门的博客文章,也得到了很高的点击阅读率。因此,本书内容有了一定的较好的口碑积累。

针对少年儿童的动手做项目,越来越受到老师和家长的关注和欢迎,如乐高机器人等。本书能够借助这一趋势,开展较好的推广活动。


人机交互发展迅速,应用日益普及,已经逐渐深入到消费电子设备、可穿戴设备、家电家具、展览、博物馆等各种场景,和人们的日常生活息息相关。

本书的目标是带领读者自己动手制作有趣的交互系统。首先简单介绍了有形交互的概念,然后通过最新设计的案例及制作实例,帮助读者构建有形交互原型。读者只需要采用流行的智能硬件以及日常生活中常见的材料,跟随书中的步骤来制作,即可在较短的时间内轻松搭建具有声音、动画、游戏等互动功能的迷你电子项目。

本书讲解清晰,配图丰富,在介绍相关内容时还给出了有趣的背景知识和成熟的应用案例,既能够激发读者的阅读兴趣,又能够帮读者做好充分的知识准备。

本书适合对电子制作或交互编程零基础的青少年学习,也适合希望快速搭建多媒体交互原型的爱好者阅读参考。


如今提到人机交互,已不仅仅是指设备上的按键与图形界面,还包括用手势或动作操纵游戏人物、用声音改变LED灯光颜色的变化,这些非传统的人机互动方式让人们不禁感叹科技的力量。应用新型智能硬件与软件,能让人们通过更自然舒适的方式操纵机器。

本书主要涉及人机交互的一个分支—有形交互(Tangible Interaction)。这类交互设备通常比普通图形界面多了实物互动的部分,用户可通过改变物体形状位置等来操纵设备。这一交互形式曾应用于教育玩具、电子乐器、展览等领域,是十分自然直观的互动方式。本书将围绕有形交互的概念展开讲解,帮助读者熟悉这类互动系统的制作方法。

自己动手制作交互系统充满了乐趣,但是苦于没有相关的背景知识、缺乏制作技巧和可以参考的范例,对大部分初学者来说,DIY电子制作看似比普通手工制作复杂。如果我们从交互设计入手开始制作,也许你会发现我们的项目和制作手工艺品难易度相当,而制作成果将更加智能多变。

写作本书的目标,并不是期待让每位读者通过阅读本书成为工程师或专家,而是让每位读者通过完成制作获得成就感,并有机会与他人分享制作的愉悦与幸福。从一个点子或想法在你心里生根发芽,到动手将其逐一实现,其间制作者所能获得的成就感只有体会过才能知道。而使用不同的交互方式,也会带来不同的个人体验。因此,这其中的乐趣和奥妙,读者唯有靠实践才能探索得到。

1.每章围绕一个制作项目展开,让学习者从实践中学习。

2.题材广泛,围绕3个主题展开:

  (1)与物体的互动(第1章~第3章)

  (2)音乐、声音玩具制作(第4章~第6章)

  (3)投影互动系统(第7章~第10章)。

3.每篇教程相对独立,不需要一章一章地顺序阅读。读者可选择自己感兴趣的项目制作。涉及之前的知识,会标注相关章节。

4.使用常见材料制作,步骤简单,制作时长最多不超过两天时间。

5.适当补充背景知识与现有交互案例,供参考借鉴,并提供进一步探索和制作的建议,以便读者将制作方法运用到其他内容上。

本书每一章均按照如下结构编写。

1.项目简介与背景知识

本章制作项目概述。补充相关的背景知识和交互设计案例。

2.成果展示

视频展示本章中的制作最终的成品及使用方法。

3.制作过程

  (1)准备材料:全部物料清单和所需的软件及硬件。

  (2)制作步骤:从0到100的详细分步教程。

  (3)使用方法。

4.本章小结

总结所学知识,值得关注的制作要点和设计思路。此外,提出项目进一步拓展的建议。

电子与编程零基础的青少年。

对交互设计感兴趣的科普教师。

希望快速搭建多媒体交互原型的爱好者。

硬件

1.Makey Makey及具备相同功能的硬件。

2.投影仪:成像范围在1米至3米以内的微型投影仪。

软件

3.Soundplant

用来建立声音文件与键盘按键的映射。

4.Construct 2

这是HTML5游戏引擎。本书不要求读者掌握制作游戏的方法,当然你可以用它来调整游戏内容。

阅读本书时,请按照要求进行操作。未成年人应得到家长的指导和监督。在开始制作之前,希望家长能强调强电和弱点的区别。本书介绍的硬件使用12V以下电压,处于安全范围。但如果将硬件的使用方法随意用到家用电源电路和电气设备上,具有较大的风险,所以希望家长能做好安全教育,在制作的过程中,监督未成年人在安全范围内展开活动。

此外,在编写本书时我们虽然会仔细检查,但难免会有错误与疏忽。在此希望读者谅解并指出我们的错误。同时,我们也十分欢迎读者分享自己的制作体会,对我们提出意见和建议。欢迎写信联系作者,邮箱:xhy0566@gmail.com。也可以发私信给果壳ID:电气星。

如果你需要下载所有游戏的原文件,请点击下面的链接,填写问卷并留下你的邮箱。

链接

https://docs.google.com/forms/d/1u-pC3rl9GRqS6Q0r0coDElNtHcASSaAxjt2i3Uqp-wY/viewform?usp=send_form

这本书的出版包含了很多人的心血。在此,向成书过程中曾经向我提供帮助和支持的人们表示感谢!

果壳网“万有青年计划”对本书的初稿亦有贡献。网上连载教程期间,陈一与陈岱奇对制作内容提出了自己的意见,并鼓励督促我完成10期教程的编写。在此感谢他们对这部教程的关心与付出。

同时,也要感谢我的父母和男朋友,没有你们的支持与鼓励,我的工作不可能一帆风顺。

最后,感谢关注这个系列教程的读者,是你们让我觉得之前的一切努力都是值得的!


制作难度:★☆☆☆☆

Geek指数:★☆☆☆☆

制作用时:10分钟

类型:游戏

本章将初步介绍有形交互及其应用领域。在开始制作前,我们会向读者介绍适合自己的硬件,并熟悉它的工作原理和使用方法。最后,我们将介绍如何使用这个工具玩一个线上小游戏。

在使用各种电子设备时,我们都要通过用户界面来操作设备与系统。我们可以通过按钮或者选项来告诉设备我们的决定,也可以通过语音或手势更精确地操纵设备,引导设备帮助我们完成工作。

随着计算机运算能力的提升,在未来,我们将会把数字系统应用到日常的生活场景中去。在这一前提下,机器的用户界面不仅仅是停留在屏幕上的线上信息。我们所使用的日常用品乃至场景本身,都可能成为交互界面。将线上信息与真实世界统一到一起,是未来交互发展的方向之一。

有形交互的任务即是解决这一问题。

有形交互试图将线上信息与现实世界相结合。例如,我们在移动目标物体时,不是按下象征向右移动的按钮,而是直接向右移动一个真实的物体。

使用有形交互的形式,计算机的操作方式将会更为自然,原本的虚拟世界也能在现实世界中得到真实的体现。以下是有形交互的几个实用案例。

有形交互与真实世界:inFORM

视频
http://v.ku6.com/show/NzhoWKjgu22hWr9sVchkkA...html

3D模型投影inFORM诞生于MIT媒体实验室。用户可以远程操控变形表面,让小球来回滚动,甚至将小球捧在“手心”。

乐器:音乐蝌蚪

视频
http://www.tudou.com/programs/view/FbOSxTjQsUU

明和电机设计的音乐蝌蚪是一款电子乐器。让蝌蚪张嘴,便可以发声。手指在蝌蚪的尾巴上滑动,可以控制音调的高低。

有形交互与图形界面:ReacTable

视频
http://v.youku.com/v_show/id_XMjI4NzkxODUy.html?from=s1.8-1-1.2

ReacTable是一款适合现场演出的合成器。通过移动模块或点击桌面,演奏者可轻松进行操作。

本书将围绕有形交互这一概念,进行玩具、游戏和交互系统的制作。在制作这些项目时,我们需要使用Makey Makey或具备同等功能的硬件。请您根据实际情况采购适合自己的硬件设备。

1.Makey Makey

Makey Makey诞生于MIT媒体实验室,是一款可以模拟键盘和方向键、鼠标的电路板。使用这个硬件的乐趣在于,你可以赋予任何导电物体交互功能。

优点:即插即用,兼容Windows 与 Mac。

   硬件操作无需代码,适合新手。

缺点:接口不牢固,使用时要小心。

对象:初学者

2.酷乐宅

这是本土化的Makey Makey。个人条件允许的情况下,还请多多支持国货。

优点:无需编程。

   比原版多了两个字母接口。

   板子背后的原件被封在塑料外壳内,更好地保护接口。

   配套软件可以修改不同接口映射的键盘按键。

缺点:不兼容Mac。

对象:初学者

3.Arduino

对象:中高级电子玩家

因为Makey Makey的原型使用了Arduino Leonardo,所以如果你手头有Arduino,可以将其直接改装成Makey Makey。以我手头最原始的Uno板子为例,因为没有模拟键盘的功能,需要用FLIP更新USB固件,不过Leonardo不需要这个步骤。此外,市面上可以买到将Arduino改装成Makey Makey的扩展板,价格比较便宜。总之,Arduino不同型号硬件的改造流程不一定相同,请根据自己的实际情况来决定。

不论是Makey Makey、酷乐宅,还是改装后的Arduino,它们的工作原理都是相同的。使用电路板上的两个接口测量人体的电容,我们就得到了一个电容传感器。同时,使用铝箔等导电材料,提升测量的敏感度。因此,我们可以把铝箔当作开关,像使用键盘一样按下某一个按键。当我们触摸铝箔时,电容数值升高。没有触摸时,数值会保持在较低的范围。我们可以设定一个阈值。阈值就是根据测量数值判断按键能否被激活的门槛。测量数值大于阈值时,键盘上的按键被触发。相反,测量数值小于阈值时,什么也不会发生。

(1)电脑;

(2) Makey Makey或与其具备同等功能的硬件;

(3)鳄鱼线。

第一步:连接硬件

1.用USB线将Makey Makey连到电脑上。

2.挑出两根导线。其中一根为鳄鱼线,颜色为冷色(黑或蓝)。另一根为尖端似针的导线,颜色为暖色(红黄白)。不同的颜色的线分别代表电路正极与负极。在这里,暖色为正,冷色为负。使用许多根导线时,如果不按颜色分类,很容乱作一团,所以连接导线时请养成这样的习惯。

3.连接导线。将冷色鳄鱼夹夹在板子底部的一对小孔上。

将暖色导线插入背面“W”接口的小孔内。

请再次检查两根导线是否像这样连接无误。

4.用电脑打开任意文档或网页,并点出光标。之后,双手握住两根导线的两端,每次按下字母接口所连接的导线一端后,你会发现输入了字母“W”。

5.如果你能成功完成以上操作,说明硬件连接正确。相信你已经熟悉了电路板的使用方法,那么你能尝试输入单词“as”吗?

如果无法成功输入这个字母,请参阅产品说明,或上网搜索,看看有没有人遇到和你相似的问题。

第二步:用Makey Makey操纵游戏

1.用电脑打开游戏链接地址:http://supermega0566.net/game/01_GalaxyTrip/

2.左手握住Earth区域,右手按住4个方向键和空格键,即可像使用游戏手柄一样操纵游戏。在这个游戏里,你可以使用4个方向键让飞船躲避飞来的陨石。为了不让地线占用一只手,你也可以将地线引出的鳄鱼线加在手表表带上,让金属头与身体接触。

在本章中,我们介绍了有形交互的一些简单概念和成功的应用案例。看到那么多有趣的应用,你是否有些跃跃欲试,也要自己动手试一试呢?不要着急,我们先从最简单的项目一步一步来。

完成本章的制作,相信你已经熟悉了硬件的基本使用方法。模拟键盘是我们制作交互玩具的基础。之后的项目将在模拟键盘的基础上发展出新的玩法。如果想知道你手中的这块小小的电路板还可以实现哪些有趣的制作,请继续阅读后续章节的内容。你也可以浏览Makey Makey和酷乐宅官网,在那里你可以看到世界各地玩家使用这一硬件做出的好玩有趣的电子项目。如果有任何问题,请别忘记利用论坛、客服、在线教程等一切资源!

1.Ishii, Hiroshi. “Tangible bits: beyond pixels.” Proceedings of the 2nd international conference on Tangible and embedded interaction. ACM, 2008.

2.Capacitive Sensor - Arduinohttp://playground.arduino.cc/Main/CapacitiveSensor? from=Main.CapSense


制作难度:★☆☆☆☆

Geek指数:★☆☆☆☆

制作用时:20分钟

类型:聚会

色彩缤纷的甜点是女孩子的最爱。但是她们对功能强大但外表朴素的电子器件并不感冒。在本章中,我们将利用基本电子原理,结合可爱的甜点作为界面,来俘获你最心仪的那个她,同时展现你的技术魅力。

本章将教你如何利用简单的导电原理为这些甜点施展声音的魔法,同时保证食物不会被电子零件污染。使用铝箔、金属管等导电材料,你和你朋友手牵手同时触摸甜点,一起形成导电回路,这时电脑会播放预先设定好的音效。

视频
http://www.tudou.com/programs/view/5RMqcKEi3Is

Kissmas Tree是一棵与众不同的圣诞树。只有当两人同时手握树枝亲吻时,才会点亮树上的5万个LED灯。在圣诞树旁边,接吻计数器会显示到现在为止圣诞树被点亮的次数。这颗浪漫的圣诞树曾来到上海新天地,助阵慈善活动。

花环上的白花是上海市市花—白玉兰,花环下的两片树叶需由接吻的两人握住。

设计师保罗·考克斯基曾经用相同的方式点亮了米兰议会大楼顶棚的灯组。这种接吻点灯的方式在全世界都十分受欢迎。

这个接吻点亮圣诞树的例子,和我们本章将要制作的音乐蛋糕盘,有着异曲同工之妙,都是巧妙利用身体接触来连通导线。

音乐蛋糕盘的最终成果参见标题图。您也可以进入下面的链接观看实际效果的视频:

http://v.youku.com/v_show/id_XODg5NDgyNzI0.html

(1)甜点:推荐使用蓬松柔软的蛋糕,因为内部水分油脂可以导电。 如果是巧克力的话,外面的锡箔纸不用剥开。如果是纸杯蛋糕的话,请把纸杯剥下来。

(2)蛋糕纸:分为白色和金银色纸两类,有蕾丝花纹。

推荐使用银色蛋糕纸,因为上面的涂料有良好的导电效果,可以直接夹鳄鱼线,用起来比较省力。

如果时间紧迫买不到银色蛋糕纸,白色蛋糕纸也可以使用。建议选择镂空部分较多的样式。因为白色蛋糕纸无法导电,所以我们只好在下面加一层铝箔,当食物透过蛋糕纸的小孔和铝箔接触时,即可导电。

(3)铝箔纸(可选):如果你手里只有白色蛋糕纸,需要它来导电。

(4)蛋糕盘(可选):多层蛋糕盘不但好看,中间的金属支架还可以充当导线。

(5)硬件:Makey Makey或具备同等功能的硬件

使用方法请参见第1章。

(6)导线:鳄鱼线和普通导线。

(7)电脑。

第一步:蛋糕盘安装

这次用的是不导电的白色蛋糕纸。

1.买来的蛋糕纸可能会有没切好的部分,我们优先清理小孔上没有切干净的纸片,尽量让所有孔都露出来!

2.为了让蛋糕纸能顺利摆在双层蛋糕盘上,可在纸正中剪了一个小孔,大小和蛋糕盘上的孔差不多。

3.拿出铝箔纸,按之前蛋糕纸的尺寸,剪出比它稍小的一块,方形圆形均可,不过最重要的是当铝箔纸叠在蛋糕纸下面时,铝箔纸边缘不要超过蛋糕纸。

4.把铝箔盖在盘子上,再附上蛋糕纸。因为盘子中心有一个小孔,所以你能通过挤压感觉到小孔大致的位置,让铝箔和蛋糕纸的中心和小孔重合。你可以用指甲在铝箔纸上捋出一个印记,之后按照这个印记剪出一个小洞。注意洞切不可开得太大,不然铝箔无法和金属棍接触导电。

5.上面的步骤都完成时,按照蛋糕纸在上,铝箔在中间,盘子在下的顺序,将蛋糕盘组装好。

第二步:搭建回路与调试

1.我们在盘子底部螺丝处垫上铝箔条(之前的边角料),你也可使用手边好用的导电材料。如果桌子是金属的那就更好了。总之,你引出来的这根“导线”要连在Makey Makey的方向键上,这个按键须有对应的声音映射。

2.让自己的身体与地线连接。

3.把点心摆在蛋糕纸小孔较多的地方。确认你触摸点心的时候,Makey Makey的指示灯会亮起。否则,请找出电路的断点,重新调试。如果触摸点心,指示灯没有亮,有可能是点心太干燥了。

到这一步,我们就完成了所以物理设备的安装。

第三步:加载音效

打开网页

http://www.xxuc.cn/game/1423411643/Food%20Magic/index.html

这里有准备好的声音素材,你可以直接按方向键播放声音。如果你决定使用某一个声音,那么请把盘子连接的导线接在酷乐宅的相应方向键上。

音效列表如下。

1.口袋妖怪:治愈、进化;

2.超级玛丽:吃蘑菇;

3.魔法系:风铃、竖琴;

4.警报。

如果你想直接播放事先录制好的声音文件,可使用Scratch创建音效和键盘的映射。在Scratch中编辑十分便捷,你可以在网页上直接操作。

使用Scratch创建声音映射的方法

1.打开http://scratch.mit.edu/

点击左上角“创建”。

在脚本下面选择“事件”,找到“当按下空格键”模块。

把这个模块拖到右侧。

点击下拉菜单,选择任意方向键。在这里我们使用默认的空格键,但你可以修改成其他按键。

2.在“脚本”下选择“声音,找到“播放声音”模块, 把这个模块像之前那样拖到右侧。

两个模块应该这样摆放。

3.点击“声音”标签页, 点击右侧文件夹图标上传你的声音文件。

4.回到脚本,把默认播放的声音meow改成你上传的文件,然后按空白键或你设置的按键,听听有没有播放声音文件。

成功后连接Makey Makey。

至此声音映射制作完毕!

1.开始前,你要保证与地线连接。当你朋友正要拿起蛋糕时,你要牵起他(她)的手。在他(她)拿起蛋糕的时候,预设好的音效会响起。要点在于,必须要保证建立回路,中间不能有断点。

2.聚会时,请用一个导电道具充当地线。引导大家触摸道具的同时取蛋糕。这个道具可以是隐藏好导线的金属餐具。

在这一章中,我们一起学习制作了一个通过触摸食物播放声音的漂亮蛋糕盘。与伙伴牵手形成回路,即可触发相应功能。这棵圣诞树的设计很好地把导线隐藏在树枝和树叶后面,让用户不会察觉它们的存在。我们今后在制作类似设备时,不仅要花时间制作回路,也要像藏好魔术机关一样把导线藏好。这样才能给你的朋友一个惊喜。而隐藏导线的关键在于你能否善用生活中的材料。试着列一张表,记录易于导电和不易导电的材料吧!

1.“全世爱”,实验室在上海新天地 2014 新年亮灯活动现场http://www.toodaylab.com/54027

2.Paul Cocksedge Studio http://www.paulcocksedgestudio.com/zh/


相关图书

电子硬件工程师入职图解手册  硬件知识篇
电子硬件工程师入职图解手册 硬件知识篇
RISC-V体系结构编程与实践
RISC-V体系结构编程与实践
Altium Designer 22电路设计与仿真实战从入门到精通
Altium Designer 22电路设计与仿真实战从入门到精通
龙芯嵌入式系统原理与应用开发
龙芯嵌入式系统原理与应用开发
龙芯嵌入式系统软硬件平台设计
龙芯嵌入式系统软硬件平台设计
GPU编程实战(基于Python和CUDA)
GPU编程实战(基于Python和CUDA)

相关文章

相关课程