前段时间,我们一位三年级的小学员为了向妈妈表达爱意,给AC柴提了一个要求:“老师,下节课我要学画爱心,画好多好多的爱心”。可AC柴作为一条害羞腼腆的编程狗,从来没有画过半个爱心啊。于是AC柴硬着头皮,开始了画爱心之旅~
首先,编程狗是有追求的,所以AC柴坚决不用现成的爱心表情包,明明能用输入法打出的[心],偏偏要用代码来画。经过一番激烈的选型,他决定采用一种三年级小朋友也能上手的编程方式来画,那就是Processing!!!,Procesisng号称是编程界的艺术大师
1 做好画画的准备打开它的界面,一个空白文档呈现在AC柴面前,这个界面虽然不好说美观,但是足够简洁直观,代码往空白的地方写,写完了点一下左上角第一个图标(就两个图标),就可以查看画出的玩意儿,当然现在还什么都没画呢。
界面
AC柴开始大展身手,它打下了一行代码,这么一行代码就帮我们创建了一个长方形的画布,长800px,宽600px。点击“运行”,弹出一个灰色的窗口,它就是我们的画布。
size(800, 600);
运行结果
小同学审美在线,说灰不拉秋真难看。要求修改画布的颜色,并且给了AC柴三个数字 218 182 250, 然后AC柴接着写了一行 background(218,182,250); 这行代码就是把画布的背景颜色设为RGB(218,182,250)对应的颜色,这样,我们就把画布给弄好了
size(800,600);
background(218,182,250);
2 赶快画爱心吧
前一节课AC柴和小同学一起学了怎么画圆,所以我们决定用圆画出一个爱心,怎么画?看图说话!
我们先要准备一个6行9列的长方形,标出要画圆的格子。AC柴让小同学标记出了要画圆的格子,记下格子的行号和列号,做出下面的表
第几行 |
第几列要画圆 |
1 |
2、3、 7、8 |
2 |
1、2、3、4、 6、7、8、9 |
3 |
2、3、4、5、6、7、8 |
4 |
3、4、5、6、7 |
5 |
4、5、6 |
6 |
5 |
然后我们用 变量 i 表示行号,用 变量 j 表示列号,那么每一个格子都可以表示为( i , j )的形式,比如(1,2)这个格子我们要画,(1,3)也要画,(1、4)就不用画
确定了哪些格子要画,AC柴和小同学迅速地开始动手,先搭了一个双重for循环的框架
for (int i = 1; i <= 6; i ) {
for (int j = 1; j <= 9; j ) {
// 汪汪汪
}
}
什么?!双重for循环不知道是啥?上节课白学啦?!好吧,本柴再来解释一下,敲黑板
[666] 双重for循环可以用来遍历多行多列,外层的for循环先去锁定某一行/列,然后通过内层的for循环一个一个去检查这一行/列里的每一列/行 [666]
言归正传,//汪汪汪 这边写什么呢?“画圆呗”,小同学脱口而出。好,这就画给你看。AC柴用 ellipse(j*50, i*50, 50, 50) 来代替 //汪汪汪,点一点运行,发生了什么呢?
小同学敏锐地意识到,我们只需要在前面表格中记录的格子里画圆,而不需要每一个都画。
没错,有条件地画,就得用上条件判断语句,本柴给你画第一行打个样例啊,看仔细
size(800,600);
background(218,182,250);
for (int i = 1; i <= 6; i ) {
for (int j = 1; j <= 9; j ) {
if ( i == 1 & ( j == 2 || j == 3 || j == 7 || j == 8)) {
ellipse(j*50, i*50, 50, 50);
}
}
}
第一行
类似的,对于第2到6行,我们也是只在部分格子画。AC柴把剩下的5行交给小学员去打,小学员打到第二和第三行的时候傻了眼。让我们再来看看前面的表。哇哦,第2、3行有好多列要画
第几行 |
第几列要画圆 |
1 |
2、3、 7、8 |
2 |
1、2、3、4、 6、7、8、9 |
3 |
2、3、4、5、6、7、8 |
4 |
3、4、5、6、7 |
5 |
4、5、6 |
6 |
5 |
别怕,给你个简单的方法,如果要画的格子太多了,那么不画的格子就少。所以我们可以反过来,用条件语句指定列号不等于几的时候要画。比如对第二行的格子来说,列号不等于5时要画。再给你写第二行啊,看着
size(800,600);
background(218,182,250);
for (int i = 1; i <= 6; i ) {
for (int j = 1; j <= 9; j ) {
if ( i == 1 & ( j == 2 || j == 3 || j == 7 || j == 8)) {
ellipse(j*50, i*50, 50, 50);
}
if (i == 2 & ( j != 5)) {
ellipse(j*50, i*50, 50, 50);
}
}
}
第1、2行
经过一番敲敲打打,AC柴和小同学终于打完了,最后出来了下面的效果。
小同学继续审美上线,白色圆多丑啊,于是亲自在前面加了一行 fill(234,158, 245),fill(R,G,B)用来给图像填充某种颜色
填充颜色后
大功告成!这是一种方式
用方块拼爱心小同学灵机一动,既然圆可以拼,正方形不是也可以拼吗?于是她只修改了一个地方,把ellipse(j*50,i*50,50,50)替换成了rect(j*50,i*50,50,50)
心脏线
给大家讲个很扯的故事
Christine是十七世纪时瑞典的一位公主,她美丽善良,而且很聪明,尤其很喜欢数学。她遇到一个穷困潦倒的小伙子,这个小伙子只能靠乞讨为生,还沉迷于研究数学问题。
这个公主看到之后把他请过来作为自己的数学老师,和她一起讨论数学问题。两个人相爱了。国王觉得小伙子配不上自己的女儿,于是把他驱逐出国,扣押了他们之间所有的书信。公主收不到小伙子的信件,以为他抛弃了自己。
没想到有一天,她收到了一封小伙子的信件。原来这封信 国王和大臣谁也读不懂,所以拿去给公主试试看,信里面只有一行公式 r =a (1 - sin θ) 。公主根据这个公式,在画纸上描画。最后,一个爱心赫然呈现在她眼前。于是她一下子就懂了,可是小伙子寒病交加,不久就去世了
size(800,600);
fill(255,0,0);
float step = 0.1;
float r = 100;
translate(width/2, height/2);
rotate(-PI/2);
for (float i = 0; i < PI*2; i = step) {
line(r*(2*cos(i)-cos(2*i)), r*(2*sin(i)-sin(2*i)), r*(2*cos(i step)-cos(2*i 2*step)), r*(2*sin(i step)-sin(2*i step*2)) );
}
心脏线
画完之后,小同学把这些爱心发给了妈妈,妈妈为她续报了一年的课程……
好吧,蓝色的话只是AC柴的幻想,不过看到小同学和她的妈妈都很开心,并且学到了一些东西,我们也挺满足。汪汪!!我们安排Processing的课程作为进阶到C 语法之前的补充,最后的目标是带孩子参加科技节比赛,打信奥。
如果你也在打算让孩子学编程、参加比赛,却不知道如何入手,欢迎点击下方链接,加入交流群或者直接联系AC柴 ~ 明年3月的青少年等级考试安排出炉,正好可以拿来练手哦~
戳戳戳 向 青少年等级考试最新安排出炉!要报名的同学赶快看过来~
,