带孩子玩Scratch编程:坐标(上)

本文节选自未出版的拙作《给孩子讲数学与编程》,以示例程序为主,略去了相关概念和知识的讲解,家长可自行补充。

“坐标”是用数字代表某个人、某件东西所在的位置;而且,数字的大小要能反映位置的远近。

在教室里,老师有时候会把椅子摆成整齐的排列,就像下边图片这样。在这张图中,每把椅子上都有两个数字,请你看看有什么规律。

Scratch坐标-图1

Steven站在了一把椅子上,挡住了2个数字。请小朋友猜一猜,Steven踩的那把椅子,靠背上被挡住的数字应该是几呢? Steven后排角落里的椅子,被挡住的数字又该是几?

用“第几列、第几排”代表椅子在阵列里的位置,就是一种坐标。我们把这2个数字写在一个圆括号里,作为一个“坐标位置”:

32

它的意思是:第3列 第2排 的那个位置

对于所有平面状的东西,例如地面、桌面、墙面、天花板、电脑屏幕等等,我们都可以在平面上打出网格,然后以第几列、第几行的方式表示每个格子的坐标。

Scratch坐标-图2

例如在上图中,我们在桌面上打出了网格线,把桌面分成了16列、8行。但在这张图中,我们把坐标原点O画在了桌面中间,而不是左下角。这样,在桌面的左半边和下半边,会出现用负数表示的行、列。负数,就是比0还小的数。例如商场的地下车库,比室外地面还低,因此,我们把地下室叫 -1层、-2层。冬天的气温比0度还低,比0度低5度叫 -5度,比0度低10度叫 -10度。

原点所在的行,就是那些粉色的格子,我们叫它横坐标轴,上面写着表示那是“第几列”的数字,也就是横坐标。

原点所在的列,那些蓝色的格子,叫做纵坐标轴,上面的数字表示那是第几行,也叫纵坐标。

在上图中,我们看到杯子在原点右侧第3列,在原点上方第1行,因此,杯子的坐标为(3,1)。

现在我们要学习激动人心的编程了。通过编程,我们可以让电脑或手机屏幕上显示出我们设计好的动态效果,也可以让机器人完成指定的任务。但前提是,你需要了解电脑、手机和机器人采用的坐标系。

Scratch坐标-图3

上图是一个分辨率低得夸张的电脑屏幕,在这个屏幕上,图像和文字都像是用乐高方块拼成的。每一个方块,我们叫它一个“像素”。这些屏幕像素可以根据程序改变色彩和亮度,组成要显示的图像和文字。在上图中,屏幕上的像素共有32列、16行,总计512个。

真正的电脑屏幕、手机屏幕,像素要细腻得多,甚至比针尖还细小。因此,我们很难用肉眼看出手机屏幕上的像素方格。

现在,让我们打开计算机,登陆https://scratch.mit.edu/ 网站,看看Scratch里的坐标吧。

请你爸爸妈妈协助,帮助你根据网站提示创建一个新的空白项目。

Scratch界面

在Scratch的代码栏中,从“事件”栏目里找到“当⚑被点击”积木,然后从“运动”栏里找到“将x坐标设为( )”、“将y坐标设为( )”, 拼出如下的程序:

示例程序1:设置角色的位置

Scratch坐标-程序1

改一改括号里的数字,然后点击运行窗口左上角的绿色旗子“⚑”,看看小猫移动到哪里去了。

在Scratch中,实际上采用的是这样一个坐标系:

Scratch坐标系

原点位于窗口正中心,横坐标从-240到240,纵坐标从-180到180。这比我们之前接触的坐标系又大了很多倍,已经出现了上百的数值。同时,屏幕上也不再显示网格线了,即使显示,也会密得让你根本看不清楚。就连上图的坐标轴,在程序里也是隐身的。因此,从现在开始,你得适应在脑子里想象坐标和位置的对应关系了。

为了帮助你熟悉每个位置的坐标是多少,可以在“运动”栏目的最后,找到“x坐标”、“y坐标”,把前面的勾打上。这样在程序窗口的左上方,就会显示出来小猫当前位置的坐标值了。“x坐标”也就是我们说的横坐标,“y坐标”就是纵坐标。拖拽小猫,看看每个位置的坐标是多少:)

Scratch界面2

Scratch界面3

下面我们来尝试拼出这么一个程序:

示例程序2:让角色动起来

Scratch程序-让角色动起来

这里需要用到三个新的积木:
一个是黄色的“控制”栏目里的循环积木,“重复执行(  )次”;
一个是绿色的“运算”栏目里的减法积木,“(  ) – (  )”;
还有一个是“运算”栏目里的函数积木,“绝对值▼(  )”。

其余蓝色的积木都可以在之前的“运动”栏目里找到,注意“将x坐标增加(  )”和“将x坐标设为(  )”是不同的积木,别弄混了哦。可以先把用到的积木都散拖到代码窗口中,然后照图拼好嵌套关系——把刚才打过勾的那个“x坐标”小圆块嵌到“绝对值▼(  )”积木的空白括号里;再把“绝对值▼(x坐标)”嵌入减法“(  ) – (  )”的左侧空白括号中;然后照图连接积木顺序;最后,按上图修改剩余括号内的数字。点击运行窗口左上角的绿色旗子“⚑”,看看是什么效果哦。

我们还可以使用Scratch的画笔扩展,把小猫的轨迹画下来。在Scratch左下角点击“添加扩展”按钮,在弹出的窗口中选择画笔:

Scratch界面4

然后,你的Scratch将出现“画笔”栏目,可以仿照下图中的例程3画出小猫运动的轨迹:

示例程序3:画出角色的轨迹

Scratch程序-画轨迹

运行结果:

Scratch程序运行截图-画轨迹

示例程序4:画一个椭圆

Scratch程序运行截图-画椭圆

这个例程用到了“变量”栏目。同时,对于函数积木,点击“绝对值”右侧的下拉键头,将“绝对值”替换为“cos”、“sin”。

Scratch程序-画椭圆

至于“绝对值”、“sin”、“cos”函数到底是什么意思,现在小朋友暂时不需要深究。在作者小的时候,也是先从键入根本不懂的BASIC语句开始学习编程的。你只需要知道并熟悉怎样按例程搭好Scratch积木,运行后得到了跟书上一样的效果,就非常棒了。然后,你可以再改一改例程中的参数,看看程序运行结果有什么变化,这个过程也很有意思,你能借此学得更深刻。例如,试试把例程4“将y坐标设为100 * (sin(我的变量))”中的100改为“x坐标”,看看能得到什么曲线。

Scratch程序-画自定图形

示例程序5:自定路线绘制几何图形

在刚才的两个例程中,我们都用到了函数来绘制图形。如果小朋友想创作一个自己的画图程序,可能运用函数有点困难。因此,现在我们来看一个容易掌握的绘图程序。

例如,如果想让小猫画出一个五角星,那最好先自己在纸上画一遍,看看五角星应该有几笔,分别是从哪到哪。画五角星可以用5笔来完成,如下图所示,依次从第1点画到第2、3、4、5点,最后再回到第1点。

Scratch程序-画五角星

Scratch程序-画五角星第1步

在Scratch中,我们让代码栏显示“运动”栏目里的积木。这时用鼠标挪动小猫,可以发现上图中用红色标出的2块“移到x( )y( )”的积木,括号中的坐标值会自动改变。小猫挪到哪,括号里就会变成哪个点的坐标值。利用这个特点,我们可以很容易地把自定的路径点位输入到程序中。

我们先把小猫挪到设想中的第1点,按下图拼出前4个积木。然后把“运动”栏里的“移到x( )y( )”积木拖到程序中,不需要修改括号里的数字。这样,程序执行到这时,小猫就会自动来到这个第1点。

Scratch程序-画五角星第2步

随后接一块“画笔”栏目中的“落笔”积木。下一步,把小猫挪到设想中的第2点,然后接“运动”栏里的“在(1)秒内滑行到x( )y( )”:

Scratch程序-画五角星第3步

同样,这块积木括号里的数值也不用改,程序执行到这时,小猫会滑行到这个第2点。以此类推,拖出滑到第3、4、5点的积木:

Scratch程序-画五角星第4步

Scratch程序-画五角星第5步

Scratch程序-画五角星第6步

最后把小猫拖回第1点,再接最后一块 “在(1)秒内滑行到x( )y( )”,结尾接“画笔”栏目中的“抬笔”积木,这个程序就完成了。

运行后效果如下:

Scratch程序-画五角星第7步

你可以用这个办法,画出任何直线组成的图形。现在自己试试吧。