欢迎光临
我们一直在努力

【编程 | scratch】[03]用scratch绘制更奇妙的几何图形

学了画笔工具后,上次我们绘制了很多正多边形,本次属于进阶课程,我们可以用画笔工具再绘制些看起来更奇妙漂亮的图形。

本篇文章其实在中秋节的时候就开始写了,后来因为出差耽搁了,昨天回来后就就赶紧把后面尾巴补上了。

上次用画笔工具绘制了些正多边形,后来编者无意中又看到了几个奇妙变幻的几何图形,让我们先看看吧。

这两个图形绚丽无比,看起来比我上次绘制的高级不少,这两个图形如果用scratch来绘制,要怎么实现呢?

我们先看下图一,看起来很绚丽漂亮,似乎很复杂的样子。

如果再用我们上次绘制正多边形的方法来绘制的话,感觉比较难,因为用“落笔”只能同时在“舞台区”某一个点绘制图形,而图一感觉同时在屏幕的四个方位在绘制图形,第一感觉是不可能实现的任务。

更换造型

不过我们仔细研究下,发现图一不就是拿着一个平行四边形在不断旋转吗,每旋转一次然后把平行四边形增大一点点就好?

那我们要把默认的小猫替换掉,自己得准备个造型。

怎么创建自己的造型呢?

首先,我们新建了一个造型,编者随便画了个不规则的四边形,为了效果好看点,每条边使用了不同的颜色。

注意,默认下使用的都是位图模式,位图也就是“栅格图”,同学们可以去搜索下这些名词是什么意思。

其次,我们将不需要的造型删除掉,以免干扰最后的效果。

怎么删除呢,我们点中不需要的造型,按鼠标右键,这弹出的菜单里能看到个“删除”按钮,点击下就把选中的造型删除了。

另外,如果不喜欢白色背景,我们也可以换成黑色背景。当然,其他彩色的背景我们也可以尝试下。

这样,我们的造型就准备好了。

使用图章工具来复制造型

我们肯定要用画笔里的工具来绘制,但画笔里的“落笔”工具在同一时间内只能在屏幕的某一个地方绘制图形,肯定满足不了我们的需求。

那“落笔”功能不行,那只有用“图章”功能了,我们先点开“图章”功能的帮助菜单,看看能做什么呢?

仔细看看“图章”帮助里的示例,重复执行了8次,每次移动70步,并转了45度,使用“图章”功能后,就在屏幕上在一个圆圈上绘制了8只小虫,看起来“图章”工具就是我们所需要的。

尝试用“图章”来绘制旋转图形

依样画葫芦,我们复制下示例里的脚本,执行后就得到了下面的图形。

是不是感觉图形的颗粒感比较严重呢,这是什么原因呢?

还记得前面提到过的“位图”吗?因为图形的生成都是一格一格拼出来的,所以一放大就失真了。

所以啊,如果我们希望放大缩小都不失真变形,我们可以用“矢量”模式来绘制下“造型”。什么是“矢量”模式呢?这个大家也可以去搜索下,“矢量”模式主要就是为了解决“位图”模式放大失真的情况而出现的。

在矢量模式下创建造型

在“矢量”模式下随意创建了个新造型,删除了旧的造型,重新执行脚本,现在的效果如下,看起来画面是不是稍微精细了些?

但总感觉这棱角过大,和图一差别有点大,那是不是每次旋转的角度不一样呢?我们尝试调整下旋转的角度,看看效果怎么样?

哈哈,有点意思,看来旋转的角度对最终的效果影响非常大呀。

旋转角度影响构图效果

既然旋转的角度对构图效果影响非常大,那我们每次变换下旋转角度的大小,我们来对比下差异吧。

下面是调整后的脚本,和上次绘制正多边形类似,这里也用了两层循环,外层循环来递加角度angle的值,内层循环用来绘制旋转图形。

为什么我们只旋转12次呢,因为每旋转一次我们将变量angle增加了15度,旋转12次就倒了180度了,后面再增大,只是重复而已。

我们仔细研究图二,发现其实现方式和图一很不一样,图一是将已有造型不断旋转,然后用图章功能不断复制而成,而图一感觉就是用落笔功能一条线一气呵成画成似的。

思路分析,化繁为简

为了方便理解,我们简化下图二的实现过程,将图二简化成如下的一个场景:

上面的简化图基于一个完整的坐标系,有什么特点呢?

坐标系每个象限都画了同样大小的正方形

正方形的起点在直线x+y=0和x-y=0上

从前面的经验来看,我们用一个重复执行了4次的循环绘制了一个正方形,那坐标系里四个象限里的正方形也需要用一个重复执行4次的循环去绘制。

完成了这4个同样大小的正方形后,我们需要再在外层开启一个循环,扩大边长继续执行。

这样绘制的话,每个正方形中间的连接线我们就暂时忽略吧,看看这样一个简化的图形要怎么绘制呢!?

效果实现

经过上面的分析后,如果不考虑每个正方形之间的连接线,只需不断把正方形增大的话,我们很容易就完成了下面的效果。

画绿色正方形的时候,脚本是这样的:

画红色正方形的时候,脚本是这样的:

画蓝色正方形的时候,脚本是这样的:

画白色正方形的时候,脚本是这样的:

其实啊,上面的脚本很多都是重复代码,变化的只是起点,朝向和颜色。为了快点实现,我们先不管这些“丑陋”的脚本,先把上面4个正方形的脚本串联起来,在其外面套个循环,然后依次增大变量“起点”和变量“边长”,这样就能快速看到效果。

因为代码超过一屏,截图不便,就分开截取了。

问题分析

曙光就在眼前了,我们把正方形之间的线连起来,就能一气呵成画好了吧?

脚本执行完毕后,发现上面两个正方形之间的连线不是水平的。

这是为什么呢?这个有兴趣的大朋友小朋友们可得仔细分析下了,这里就卖个关子不展开了。

脚本优化

优化了下脚本,绘制的起点和方式和图二稍有不同,为了区分,多设置了一种颜色,实现后的效果如下所示:

这样看起来的效果是不是是前面的展示类似了呢?

实现的脚本如下所示:

和前面的代码比较起来,上面的代码是不是简洁了很多?!

调错思路

上面的代码用了三层循环,难度可能比前面写的估计又高了些。如果一时不好理解,我们可以缩小循环,依次观察绘制的路线和效果。

万事开头难,譬如我们稍微改动下每层循环的次数,看看内层第一次循环时是怎么样开始画的。

这样依次调整,就可以观察到绘制的轨迹,确认是不是符合我们的思路。

我们也可以稍微调整脚本里绘制的方向和移动角度,发现会不会有其他奇妙的图形产生呢?

赞(19)
分享到: 更多

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址