Tnkercad Codeblocks课程 代码生成图案阵列

课程背景

本课程由Autodesk Tinkercad编写，响应“Hour of Code™”（编程一小时）活动。 编程一小时是计算机科学教育周[csedweek.org]和非赢利组织Code.org发起的全球性活动，旨在向全球180多个国家数千万学生介绍一小时的计算机科学和计算机编程。 2018年计算机科学教育周于12月3日至9日举行，但您可以全年举办编程一小时活动。

适合学生

小学3-5年级

预计教学时间

60 分钟

技能讲授

l介绍如何通过各种图形及排序来构建图案阵列；

l创建含循环的计算机程序；

l修改、截取或整合部分现成的代码到自己的程序中，以完成新项目；

l在程序开发过程中，使用代码注释来描述设计选择；

课程概述

如何通过排序和混淆来制作精美模型？ 图案阵列、重复、节奏有何相同？有何不同？ 在本课程中，学生们将通过编码探索上述这些问题，并且制作出精美的茶烛架或者可分享的GIF动图！

在本课程中，学生将：

l编写代码，实现图案阵列制作过程的可视化，观察随机逻辑变化；

l掌握有关图案阵列、重复、节奏等知识，以及这些概念与计算机科学、其他STEAM学科的关联性；

l分析和讨论如何使用某个现成图案阵列制作实际可用的茶烛架或其他物品；

l结合CAD和代码，制作值得炫耀的玩意；

 教学材料

计算机、互联网、Tnkercad Codeblocks（一款免费、易用、基于浏览器的3D CAD设计工具，本微课使用的是英文版，中文版同样适用用）、3D打印机或TEACH平台云打印服务（获得更好教学效果，推荐使用）；

本课程中使用的Codeblocks代码或图像文件夹内图片彩打文稿（https://drive.google.com/drive/folders/1IVKhHJdqch9EMYPLg9KfTDkyNL4TQCe7?usp=sharing），以及教师笔记；

第1步：介绍编码内容背景（可选）

建筑师、工程师或计算机科学家，他们与画家、诗人有什么相似之处？

制作图案阵列模型，是他们的共同之处。建模在数学领域尤为重要。 

模型让事情变得简单，因为通过模型交流，更容易解决问题。 一旦有了模型，就可以用此方案来解决今后遇到的同类问题。

编码的过程就像数学，模型源自想法。 数学家和计算机程序员使用模型来表达自己，提高工作效率。

例如，通过循环，多次重复执行同一段代码。

编程一小时前的探索

编程一小时活动的初衷是“揭秘”计算机科学——任何人都能掌握其基础知识，更广泛地涉足计算机科学领域。

授课时，您可以先分享此幻灯片，其中含有介绍关键词的图像和定义，如什么是重复、图案阵列、节奏、循环和变量：

（https://docs.google.com/presentation/d/15lC_F70HVeGRgoxlFxhdhymEvBcnsXhTzNRIQDsyl_o/edit#slide=id.g46cfa0507e_0_31）

在编程一小时活动前，建议给学生观看这个简短有趣的视频：

（https://www.youtube.com/playlist？list=PLzdnOPI1iJNfpD8i4Sx7U0y2MccnrNZuP）

有些教育工作者则会在实际编程前预先介绍编码背景。部分学校或教师将编程环节安排为一整天甚至一周的跨学科活动。

本课程中包含的幻灯片适于探讨相关科学、数学、人文科学或艺术背景。（https://docs.google.com/presentation/d/15lC_F70HVeGRgoxlFxhdhymEvBcnsXhTzNRIQDsyl_o/edit#slide=id.g46cfa0507e_0_31） 

根据学生们的熟悉程度，安排介绍笛卡尔坐标系。即使他们之前接触过Scratch之类基于块的编程，Z轴也可能是全新的概念。

从熟悉的入手

向学生讲授图案阵列其实很有趣、很容易，因为图案阵列无处不在。 

它们在自然界随处可见，也可以由人类制造——花瓣、淋浴头、家中的各种装饰。

由于图案重复出现，图案阵列通常很容易识别，但制作一款图案阵列——甚至描述制作过程—— 则需要深入思考。 

图案阵列有多种创造方式，例如，在自然界中，图案阵列往往源自压力; 在建筑物中，“图案阵列”（如，门或窗）往往是通过人们在某个环境的移步而完成。 （在幻灯片中了解更多相关信息https://docs.google.com/presentation/d/15lC_F70HVeGRgoxlFxhdhymEvBcnsXhTzNRIQDsyl_o/edit#slide=id.g46cfa0507e_0_31）&

第2步：提供代码给学生们折腾

与学生们探讨图案阵列概念和用途之后，就开始使用Tinkercad的Codeblocks吧。 

登录后，在主页的个人资料图片下方选择Codeblocks。 然后在下一页，选择“New Design（新建设计）”。

进入Codeblocks编辑器后，可以复制以下脚本，制作一个疯狂的随机形状生成器。

（课程末的PDF文件中含有本课程中涉及的所有Codeblocks脚本，还有个共享文件夹含有所有图片。）

提供指导和结构

第一次接触Codeblocks的话，建议让学生们两人一组地合作，以便互相检查错误并交流每个代码块的用处。

（这也意味着在老师您自学的过程中，不会为回答问题而频频被打断！）

温馨提醒：

l从图像中复制脚本时，学生们可能会觉得棘手，这是因为一旦将形状添加到脚本中，“Add（添加）”一词就会出现，更改颜色或将形状变为孔洞的设置界面也会弹出。

l若要将脚本打印在纸上，最好彩打。 不然，可以将Codeblocks脚本的图片文件夹链接分享给学生，每组安排一位同学的笔记本电脑打开此脚本，另一位同学的笔记本电脑则供两人编写代码。 如果并非人手一台笔记本电脑，那么调整电脑窗口，同时打开Tinkercad和图像文件。

l鼓励学生们为自己创建的每个新对象命名。 这不仅是CAD中很重要的一项组织技能，还更便于将数据插入到Codeblocks中。

安排好所有13块的位置后，点击播放按钮运行程序。

运行一次后，再运行一次。他们就能发现随机（Random）块带来的变化。

学生们可以转身讨论他们注意到的现象，并使用诸如重复、图案阵列和节奏等词语来进行猜测。

在第一轮讨论后，鼓励学生们折腾Codeblocks，将蓝色星形（或者任何他们着手操作的形状）替换为其他不同的形状。

也许需要一些音乐来调动气氛？

建议以爵士乐为背景音乐，来思考数学问题，这会很有趣。 也许学生们会将听到的声音和代码联系起来。

评估和分享

鼓励学生修改和重新混搭Codeblocks——并告诉他们不要担心模型是否会崩塌！他们总能修复好的。设计作品将保存于他们的Tinkercad帐户中，随时可在此基础上制作出更多的新玩意。

您可能会巡视每位学生的作品，一一提问，形成评估。最重要的是给他们机会去玩、去想象、去设计、去分享自己的想法。

根据学生的年龄、对基于块的编程熟悉程度、活动参与度，您可以适当延长该探索环节，将下一阶段安排为下一课时。

为了在课程结束时检查学生们的理解情况，您可以让学生在代码块中添加注释，解释设计作品中各块的用途，以及修改程序时做的选择。

他们还可以将设计作品录制成GIF动图进行炫耀。有关详细信息，请参阅步骤3和7。

第3步：构建形状，注释代码

（图从上至下：添加并放置图形；变为孔洞；组合形状挖空；添加并放置圆柱体；最终组合成型）

当学生们逐渐沉迷于Codeblocks脚本受控的随机运行时，动手创建一些命令来驾驭它们吧！

因为编程设计的过程是线性和顺序的，所以它的思维方式不同于Tinkercad原来的3D建模。 

这会促使学生们在设计选择中更深思熟虑，在思考过程中更抽象。

划重点：改变思维方式是一件好事。对于所有爱思考的人而言，编码是一项有趣、富于创造力、颇为收获的活动。

选择形状

第一步，让学生选择用于图案阵列中的形状。 本课程末尾的PDF和图像文件夹含有Codeblocks脚本，用于制作由星形和四叶形状组成的图案阵列，也可以从零开始设计。

作为挑战，还可以安排学生复制此步骤开头的复杂图形，用于后续组建阵列，或从零开始制作。

                                     图（左：星形（容易），中：四叶（中等难度），自制形状（挑战））

注释代码

当学生效仿Codeblocks脚本构建第一个形状（或修改脚本制作自己的形状）时，使用Step（步骤）按钮（位于Play（播放）按钮旁边）来分析每个块的操作。通过添加注释代码来记录想法，如下图所示。

Comment（注释）块可以在Codeblocks的“Markup（标记）”中找到，鼓励学生至少为第一个脚本添加注释。

第4步：制作圆形阵列

一旦完成第一个形状，学生们就可以开始构建圆形阵列了。

这一步是图案阵列课程的基础。 在制作时，学生将用到循环和变量。

 开始这个中心环节（既重要，又位于整个过程的中间阶段）前，可以向学生展示此步骤顶部的GIF动图，以便理解代码实现的圆形阵列最终效果。

此幻灯片中也含有该图（https://docs.google.com/presentation/d/15lC_F70HVeGRgoxlFxhdhymEvBcnsXhTzNRIQDsyl_o/edit#slide=id.g46cfa0507e_0_18）

机械工程师德安妮-贝尔将详细介绍3D建模概念，请观看视频“未来工程师”，这个视频来自德安妮-贝尔创立的项目。

（https://www.youtube.com/watch?v=ouvf-4wciak）

要求学生编写代码注释来解释每个设计步骤时，请感受学生是否乐在其中。

根据现场实际情况，必要时放宽逐块注释的要求，只要求他们在脚本末尾至少写一条注释，阐明对圆形阵列设计思路。 

（提示：编程一小时活动的宗旨是寓教于乐。）

第5步：制作矩形阵列

准备好提升技能了吗？ 下一步是让学生创建一个由四排圆形组合而成的矩形阵列。

所以暂停片刻来看第二张GIF动图，德安妮-贝尔演示了矩形阵列是怎么回事。

（https://cdn.instructables.com/FVV/OAET/JO8XWLGK/FVVOAETJO8XWLGK.ANIMATED.LARGE.gif）

改变颜色或将对象复制变成孔洞，有助于解析工作原理。

下面提供了代码注释。

微调评估

好动的孩子们是否躁动起来了？启动快闪式即兴休息，学生可以起身走动，互相展示制作思路。 

展开圆形与矩形阵列的对决之舞，争奇斗艳！ 查看以下链接，了解更多关于如何写点小代码、添点小乐趣的信息。

（https://medium.com/@codeorg/katy-perry-sia-keith-urban-madonna-and-more-in-hourofcode-dance-party-tutorial-caec11d6b67b）

第6步：添加图案阵列到茶烛架上

到目前为止，您的学生已经能非常专业地结合代码和CAD完成精美图案阵列。 

那怎么让它成为实物呢？ 一种方法是将这些图案阵列添加到茶烛架上，进行3D打印。 

把设计添加到茶烛架上可能需要进行一些调整才能贴合，如果学生有创意的话，可以做些修改; 但如果使用星形或四叶形，应该是正合适！

第7步：制作GIF动图

（https://www.instructables.com/files/deriv/FZT/74R1/JOIY1Q8Y/FZT74R1JOIY1Q8Y.ANIMATED.LARGE.gif）

想要反复感受成就感，可以让学生们录制代码-CAD创作成果，制作成GIF动图。 

Tinkercad编辑器中即可完成——点击Share（分享）按钮，然后在下一页中选择“Save Gif”（保存GIF动图），请确保首先在编辑器中运行。 

（注意： GIF打包和下载需要花上几分钟。完全值得等待！）

如下图所示：

在制作GIF动图前，务必提醒学生在代码末尾添加这段脚本，这样才能正确组合……

学生还可以在程序末尾添加一个消息块，与您交流编程环节学到的知识。

作为他们的老师，您会深感自豪，想分享其作品，向众人“揭开编码的神秘面纱”。 

（如果要在社交网站发贴，请@tinkercad，让我们共同分享喜悦！这也是我们初次参与编码一小时活动!）

第8步：从 Tinkecad Codeblocks起步

如果这是您第一次教授CAD和代码相结合的项目，以下有一些实用的入门小贴士：

（https://cdn.instructables.com/FZO/WC4P/JOENIAV2/FZOWC4PJOENIAV2.ANIMATED.LARGE.gif）

•访问Tinkercad Codeblocks页面

（https://www.tinkercad.com/learn/#/learn/codeblocks）

•阅读博客文章：CAD和代码终于在一起了

（https://blog.tinkercad.com/2018/06/24/cad-and-code-together-at-last/）

•浏览Codeblocks入门设计

（https://www.tinkercad.com/codeblocks）

•观看Tinkercad爱好者制作的视频

（https://www.google.com/search?rlz=1C5CHFA_enUS723US723&ei=bRriW-2qNamk_Qam3LWYCQ&q=tinkercad+codeblocks+youtube&oq=tinkercad+codeblocks+youtube&gs_l=psy-ab.3...3088.5131..5336...0.0..0.150.726.7j1......0....1..gws-wiz.......0i71j0i10j0i22i30j33i299j33i160j33i10i160.h2AXoWbhAUM）

精彩的Tinkercad社区还有更多提示，以下是一些关于如何使用Codeblocks的优秀贴子：

Tinkercad代码块简介

（https://medium.com/@ronm333/an-introduction-to-tinkercad-codeblocks-b896dff5f5f9）

使用Tinkercad全新出品的Codeblocks，编码制作3D设计（https://ultimaker.com/en/blog/52739-code-your-3d-designs-with-tinkercads-new-codeblocks-app）

如需相关课程教案、如何评估3D设计项目等方面的更多信息，请阅读：如何将Tinkercad引进课堂。

（https://www.instructables.com/id/How-to-Bring-Tinkercad-Into-Your-Classroom/）

第9步：恭喜完成！

好极了！ 您完成啦。 即使尚未完成，您已经掌握了所需的各种资源，准备为学生们带来生动有趣的编程一小时。

此微课附件的PDF文件供您打印，其中含有我们使用的Codeblocks脚本、教学笔记和颁发给学生的证书！

以下文件夹链接是本课程涉及的所有Codeblocks脚本图像：Codeblocks Images（https://drive.google.com/drive/folders/1IVKhHJdqch9EMYPLg9KfTDkyNL4TQCe7?usp=sharing）

另外，不要忘记幻灯片（https://docs.google.com/presentation/d/15lC_F70HVeGRgoxlFxhdhymEvBcnsXhTzNRIQDsyl_o/edit?usp=sharing）。

庆祝活动结束后，请务必再次访问我们的网站发表评论或分享学生的作品，让我们了解现场效果哦！