增强现实 - 绘制虚拟人脸（仅限高级版，难度：2级）

creaticodeteacher2-mail

用到的相关知识

介绍

当你运行增强显示人脸摄像头，就可以显示4个面部区域：脸、眼睛、嘴、嘴唇。

在这篇教程中，大家制作的程序让用户绘制不同的人脸。

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/7eee66a9-91da-4480-a8f7-8ae9959d3cf3.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第1步 - 添加增强现实（AR）人脸摄像头

用这三个积木新建一个项目：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/07174db5-420e-42b3-b0ca-e4df53b4444b.png" width="1200" style="">

注意，大家要更改积木“切换到AR人脸摄像头”中的选项：

不显示标记，因为我们的重点在于人脸网格；
开启仿真模式，便于从不同角度查看结果；
开启全部4个人脸网格。

得到如下默认人脸：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/6ec76976-4dcd-440f-bed7-dbe5dfd91ab0.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第2步 - 添加一个按钮“颜色”

请添加“控件”扩展，然后添加一个按钮控件。

默认情况下，按钮被添加到舞台中心。当你用工具“控件位置”把按钮拖到左上角，添加按钮的积木将自动更新：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/2e236687-d7e1-44a1-82c8-a31939d6de01.gif" width="970" style="border-radius: 5px; border: 1px solid #29622d;">

第3步 - 更改人脸颜色

每当点击按钮“颜色”，人脸颜色就改变。要做到这一点，我们需要用积木“当控件( )被点击时”，然后在下面添加积木“更新颜色”。

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/e7f8f155-00cd-4a73-af69-2123019179ba.png" width="800" style="">

因为选择了“全部”区域，整个人脸都会变成同一种颜色：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/380ae8f8-39b8-4499-8d5a-619f23ff19bc.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第4步 - 设置随机颜色

大家可以不用一种固定的颜色，而是每当点击按钮时随机选择颜色。做法就是，用一个报表积木“颜色”嵌套一个积木“取随机数”：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/6f405809-0a6b-4ffd-9ded-33b4ee898367.png" width="1200" style="">

现在我们可以重复点击按钮“颜色”来更换颜色：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/99b97fc8-f434-4721-943a-c5d5a02c9fa6.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第5步 - 每个区域设置不同颜色

大家可以用“区域”选项来控制人脸的哪一部分更改颜色。“主要”区域表示脸，“第二”区域表示眼睛，“第三”区域表示嘴，“第四”区域表示嘴唇。

比如，我们可以用4个积木“更新颜色”，并在每个积木中选择不同区域：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a8dc6224-b44d-4096-988e-6ff9a84183ba.gif" width="970" style="border-radius: 5px; border: 1px solid #29622d;">

第6步 - 为“老虎”面孔添加一个按钮

绘制的第2个人脸效果，我们把人脸换成老虎。请添加一个按钮“老虎”，然后拖到第一个按钮后面：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/53c1d671-1684-440a-8c91-2f4a23c94724.png" width="1200" style="">

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/09a98b5f-cf15-40ff-9bcc-dc7e4e46a9fc.png" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第7步 - 添加“老虎”纹理

当点击这个新按钮时，我们要为人脸添加一个新面孔。我们可以在网上找一个老虎脸，或者其他动物。例如，下面这个老虎脸就比较好：

https://www.clipartmax.com/middle/m2i8H7b1A0N4G6m2_tiger-face-icon-tiger-animals-png-icon/

你要下载这个图像文件，然后将其上传为项目造型。

把这做完以后，就可以用积木“使用造型更新纹理”把这个纹理应用到整个人脸（全部区域）。注意，有些图像上下颠倒显示，所以要旋转180度。

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/450d3534-153b-4176-a864-fe180e51b985.png" width="800" style="">

现在就得到如下一张老虎脸：

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/9f6d9a17-504c-430f-b600-a9d186b5ee69.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

第8步 - 调整“老虎”纹理

老虎脸还有个大问题：我们只用了老虎脸的中间那一块。为了用上老虎脸的更多部分，我们可以用一个小技巧。

在造型编辑器中，将老虎造型转化为“矢量图”，然后缩小。之后，在老虎脸周围画一个透明的矩形（无填充）。这会让老虎脸缩小，以便于适配人脸网格。

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/645160d0-4c24-4169-8c6e-d440f7b19720.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

第9步 - 测试真实摄像头

现在我们的编程快要完成了，我们可以开始测试真实摄像头了，并做调试。对此，我们只需要将“仿真模式”切换为“否”。

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a2f07b7a-d7ab-46ca-9d39-f1cfb67ce838.png" width="700" style="">

最终结果如下：