可视化编程与古诗词内在关联分析与研究

摘要：本文结合可视化编程教育现状，以古诗词与可视化编程融合为样例论述可视化编程与古诗词的内在关联性，提出可视化编程与古诗词的特征抽取方法与关联方法，通过诗词实例演示，提高学科融合程度，为素质教育提供了一种创新型融合方法。

关键词：学科融合；可视化编程；特征；古诗词

在中小学可视化编程教学过程中，时常要打破学科界限，挖掘其他学科的资源，注重知识的整合学习与运用。[1]这充分说明了可视化编程与STEAM教育具有跨学科的“基因”。STEAM教育的探索多始于编程类课程，而在中小学编程教学中，编程通常以可视化编程的形式出现，便于学生理解与掌握。因此，以可视化编程作为STEAM教育的枢纽，通过可视化编程平台展示各个学科的融合效果，可为中小学STEAM教育的开展打造一条行之有效的路径，为学生创新思维和创造能力的培养打好基础。

可视化编程的特征及教育现状

可视化编程又称图形化编程，它有两个重要的可视化特征：①编程代码的可视化。②编程过程及结果的可视化。

目前，编程教育已被多国纳入中小学基础教学体系，许多国家已要求小学生把编程作为自己的必修课。可视化编程能够帮助学生提前接触编程、算法、计算思维等相关概念和工具，让学生感受到编程的乐趣，促进学生创新能力、创造能力、团队合作能力、沟通表达能力等多种能力的发展。[2-3]

可视化编程与古诗词的内在关联性

在可视化编程教学中适时融入各学科文化知识，可使学生所学为所用，对编程学习产生浓烈兴趣。因此，笔者在教学实践中尝试围绕可视化编程的两个特点，将古诗词融入其中，并充分利用可视化编程的工具性能将古诗词转变为动态诗词，使学生在感受诗词意境的同时，体会中国传统文化的魅力。可视化编程与古诗词关联架构如下页图1所示。

可视化编程与古诗词关联架构分为三个层次：文字诗词层包含场景构图、角色拆分、诗词背景三大模块；可视化编程层包含框架设计、角色设计、代码编写三大模块；顶层为动态诗词展示层，表示文字诗词利用可视化编程工具最终展现出的成果形式。

古诗词中含有大量的写景内容，部分诗词更是题于画中，故而景是诗词的灵魂，是表达情感的重要纽带。“景”是诗词的重要特征，因而“景”在可视化编程软件中成为编写程序的基础。诗句中的景，可以按照场景构图、角色拆分、诗词背景的形式细化。例如，“天街小雨润如酥，草色遥看近却无”为室外场景，观察角度是由远及近，在设计场景角色时需要考虑远处近处角色的透视变换，最后确定每个主体的大致位置。远处的场景，如天空、山脉等静景，不需要和其他角色交互呈现，都可以设计在背景中。在可视化编程平台中，角色可以通过指令控制完成移动、变形、说话等操作，所以在诗句中，只要是涉及与其他物体产生交互的物体都设计为角色类型。例如，“夕阳西下，断肠人在天涯”这句诗中的景是室外远景、暮色、太阳正在西沉，这里的太阳若要体现出落日余晖的感觉，需要和远处的山岭、地面交互，如果设计河流，那么需要设计倒映出夕阳的波光。此时，太阳、山岭、地面、河流、阳光均需设计成为可编程控制的角色。

将诗句的场景、角色、情感抽取出来，自然而然就形成编程的整体框架及脉络思路。在可视化编程设计阶段，首先，根据具体诗句内容确定是否需要设计不同幕布场景，不能在同一个场景表现的内容或只要重点表示场景的某个片段，需设计不同幕布篇章。例如，“春眠不觉晓，处处闻啼鸟”属于一幅场景，“夜来风雨声，花落知多少”属于诗人想象的另一幅场景，此时需要设计场景幕布的切换逻辑。其次，交互设计体现在角色与角色之间，诗句中有风、雨和花，花瓣要随着风和雨从树上飘落至地面，雨滴要随着风从天空倾斜坠落至地面。再次，层叠设计指在可视化编程软件中，各个角色以图片图形的形式存在，每个角色占用一个图层，每个图层按照图层编号顺序会完全遮盖下一个图层，所以需要合理安排每一个角色的图层顺序。最后，特效设计是风、雨、火、烟雾、雷电、落花、波光、植物生长等无法用静态或动态图片展示，需要结合代码、算法以实现特殊交互及展示效果的动态内容。

在角色设计模块中要抓住角色的特征，在设计角色时可以采用如下页图2所示的设计流程。首先，浏览、搜索相应角色的平面化设计；其次，以线条等图形的形式拆解角色；最后，进行特征提取。如下页图3所示的外形轮廓，通过线条的连接形成叶脉，使得图像变得像一片叶子。再选择叶子颜色、是否有斑点等特征，即完成叶子的设计。叶脉、颜色是叶子的重要特征，而不同角色的特征具有相通之处，特征并不一定是某一个角色独有的，通常需要多个不同的特征组合才能准确表示出对应角色。最终设计完成的叶子修改比例、色差、错位放置即可点缀一棵树、一片森林。以动物角色设计为例，同样的头型，只要抓住动物角色的典型特征就可以设计出不同的动物。再为角色设计适合于场景的造型、色彩、配音，一系列可以互动的角色就设计完成了。

另外，针对代码的编写，首先，要为各个角色编写层叠顺序，使得各个角色层次分明；其次，应为每个角色设定初始坐标位置及大小等初始外型数据，使得角色分布错落有致；再次，设计角色运动轨迹，轨迹设计根据轨迹的复杂程度，可以采用函数绘制、离散点折线连接的方法控制移动，角色之间可以通过距离判断、碰撞检测、广播通知等功能完成交互，进而根据设定的交互场景，修改角色相应属性的数值；最后，优化项目流程，检查章节片段之间的衔接，调试测试项目，完成最终的设计。特征的提取不但不会固化学生思维与想象，反而能够触发学生对各个物体之间的关联性思考，培养发散性思维。

样例——《如梦令·昨夜雨疏风骤》

笔者根据可视化编程与古诗词的关联架构，以《如梦令·昨夜雨疏风骤》为例，制作了该诗词的篇章场景。先做第一层的拆分，诗句“昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦”分为夜间和清晨两个章节场景。

设计场景跨越室内室外，视角为室外看向室内。角色按层叠顺序拆分为雨、花瓣、树叶、海棠树、石头、窗户、窗帘、墙、人物。在第二层设计中，两个场景的交替选择利用虚像特效，设置为渐变过渡形式，由夜晚自然过渡至清晨。按照拆分出的角色，依次设计角色造型，雨滴设计为白色线条，花瓣设计为粉色水滴形状，树叶设计为绿色水滴形状，海棠树设计为树枝探出形状，石头设计为多边形与弧线的结合体，窗户设计为圆形，窗帘设计为方形，墙占据整个背景。人物从角色库中导入，也可自行按照人物特征绘制角色（绘制比较疲惫的人物）。按照角色的层叠顺序、初始位置、效果状态设置指令，使得程序在执行时，所有角色能够自动归位。

在交互设计中，设计花朵只能绽放在树枝上，花朵在生成时需要进行碰撞检测，以确定是否触碰到角色树，并且需要记录生成在树枝上的花朵数量，然后根据花朵的数量做出落花判断，代码如图4左所示，当出现绿肥红瘦的情境时，停止落花落叶。雨滴、花朵、树叶均根据风的方向做斜线运动，同时，根据远近效果，需要循环控制随机生成不同透明度、大小的克隆体角色，使得角色运动时错落有致、碰到舞台边缘时自行消失，以达到更接近自然的效果，代码如下页图4右所示。

接着，为各个角色调整颜色搭配，并为各个场景配置适当的背景音乐、效果音、录音，跟随场景的变化渐进渐出，最终情境再现诗句描述的场景：夜间小雨虽然淅淅沥沥，但是风却很大。诗人清晨宿醉半醒，试着询问正在卷帘的侍女：外面的情况如何？侍女回答道：海棠花依然和昨天一样。诗人喃喃自语：你知道吗？此时窗外应该是绿叶繁茂，红花凋零了。

笔者根据诗句内容，继续优化项目。根据雨疏风骤调整雨点稀疏程度及大小比例，调整风力大小与间歇频率，在海棠依旧与绿肥红瘦的对话中出现了花瓣最终数量的矛盾，这引发了学生对诗句的深入思考：同一个场景，为什么两个人得到不一样的数量答案？如何体现出两者的差异？通过这样的疑问引导学生从可视化编程又回归到古诗词中，实现了从古诗词中来到古诗词中去的设计路线。进而让学生更深刻地了解当时诗人与侍女之间对自然的不同感悟，诗人所具有的伤春惜花之情，与侍女的回答形成鲜明的对比。

如图5所示，最终残留在树上的花朵占原花朵数量的30%，同时将飘零下来的花瓣位置处角色替换为绿叶，代表现实中花瓣凋落，掩藏在花瓣后面的绿叶露出的过程，进一步实现绿肥红瘦的效果。

结论与展望

可视化编程与古诗相结合，使得学生可以更加直观地感受古诗的韵律和意境。学生通过参与设计，不仅能提升编程设计能力，还加深了对诗词的理解。接下来，笔者将从更多的学科角度探索如何将STEAM教育与其他学科有机结合，形成有主线、有故事、有更多可能性的教学内容。

参考文献：

[1]洪嘉玲.促进计算思维培养的小学可视化编程活动设计与分析[D].上海：华东师范大学，2022.

[2]高云峰，师保国.跨学科创新视角下创客教育与STEAM教育的融合[J].华东师范大学学报：教育科学版，2017，35（04）：47-53+135.

[3]于剑雄.利用可视化编程Scratch培养物理模型建构能力的初步探索与实践[D].桂林：广西师范大学，2022.

作者简介：陈小顺，助教，硕士，研究方向为物联网、人工智能。

本文系江苏省教育科学“十四五”规划2021年度课题“可视化编程在STEAM教育中的开发与应用研究”（项目编号：C-c/2021/02/222）的研究成果。