最新消息:

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

Scratch 少儿编程 8032浏览 0评论
Scratch图形特效

友情提示:视频教程观看时请手动设置清晰度。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

有人喜欢玫瑰,因为象征爱情,代表浪漫。

有人喜欢荷花,因为象征廉洁,出淤泥而不染。

有人喜欢梅花,因为孤傲,且不耐严寒。

有人喜欢牡丹,因为妖娆多姿,典雅不凡。

 

而MrCode最喜欢什么花呢?

 

大概和小朋友一样,最喜欢的是别人拿出一叠钱,说道:随便花!

 

好吧,随便花自然是幻想,但是我们不妨将这个幻想,用编程的方式画出来吧。

 

今天,MrCode将带着大家花四个不同的花:

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

一个是静态的莲花,

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

一个极具科幻效果的可以自己设定效果旋转的交集花;

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

一个是有着抽象意义装饰效果的玫瑰;

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

最后一个是我们冬天才能见到的雪花;

 

今天的课程有点难,但是在闪闪红星的课程后,我们还是有理由相信自己可以做出特效的花。


好了,我们开始第一个花,莲花。

 

先看莲花,有一些什么特点。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

 

莲花,首先她的美食大片绿叶衬托出来的。

其次,她的花瓣特别多,且有多个层次,颜色一般以中心花蕾最鲜艳。

所以画莲花的时候,我们先要花画一个底色来衬托她。

然后一层层地描花瓣,色泽度要递增。

 

这个过程会非常慢。

 

我们先创建一个角色,用来画托盘。

 

托盘,选择圆形,比较可以衬托花瓣。

这样,我们的第一个目标,就是画一个实心渐变色的圆。

 

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

我先学习,如何用Scratch画一个圆圈。

一个圆圈,可以被看成是360个点组成的,每个点移动一度的位置即可。

所以,用以下代码就可以画一个圆圈了。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

然而,如果我们期望代码执行更加高效,是不可能一个点一个点来画的。

如果想做到上面圆圈的循环效果。

我们需要用到2个变量。

一个变量,是半径 ,我们取名为半径。

一个变量,是移动的角度 ,我们取名为角度。

 

我们可以使用函数sin,cos。

通过函数计算方式,圆点的坐标位置

横轴x=半径*sin(角度)

纵轴x=半径*cos(角度)

 

那么在Scratch里,就可以这样写。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

从一个大圈开始画,不断减少半径,直到半径小于0.

就可以循环画亮度不断降低的圆圈,最后形成一个圆盘。

 

画完圆圈后,我们就开始画花瓣了。

 

在这里,我们可以设定一个变量,选择可以控制多少个花瓣。

当然,也可以使用对话的方式,询问画多少个花瓣。

例如:

 

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

这样,我们获取的变量值,就可以直接作为画莲花的参数进行输入了。

 

例如,我们输入5,那么画出来的就是5个花瓣。

 

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

那么我们如何根据变量进行调整呢?

因为一个圈是360度,那么画5个花瓣,算下来的两个花瓣之间的角度就是360/5=72度。

同理,花瓣设置为其他个数,每个花瓣之间内径角度就不同了。

例如输入两个花瓣。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

两个花瓣之间的角度就是180度。

如果更多,角度就重合了。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

那么根据我们之前学习如何画圆盘的理论,只要先画出一个花瓣,再不断移动,然后减少花瓣的长度,就可以画出色彩分明的花瓣。

 

我们先学习如何画一个花瓣。

 

花瓣的画法可以分为左右两边对称。

即我让画笔移动画出一个弧形,再转动90度,再画一个一样的弧形,就形成了花瓣。(由于画笔在滑动过程中,已经转了90度,所以形成对称)

 

那么我们只需要设计一个弧形,让画笔循环移动,即每移动N步,就旋转一个角度。循环下来,弧形就出来了。(有点类似我们前面讲如何画圆的概念)

 

具体代码可以是:

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

这样,随着C的减少,亮度的增加。

我们的花瓣色泽就变得鲜明了。

 

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 


下面,我们介绍如何画一个有科幻效果的花。

 

因为有人说,老师,莲花虽然画好了,但是没有动。

好吧,这次我们把花放到星空,我们来画一个可以动的花。

 

不仅仅可以懂,花的大小,颜色,旋转方式都是可以调节的哦!

 

现在,我们一起开始吧。

 

首先,我们想达到的效果,因为是变化的,就需要几个变量。

 

表现色彩的变量 color

表现整体大小的变量,sizex,sizey

表现花瓣的个数,petals

表现旋转的速度,speed

 

接下来,由于我们需要找到画笔的位置,所以在程序中,需要增加两个,用户不能控制的变量,x,y,作为画笔的横纵轴的需要移动位置。

 

于是乎,我们就可以动态定义出一个有科幻效果的花。

 

画花的思路,其实和上一个图差不多。但是我们需要动起来。

所以如果花瓣变成实心的,程序处理周期就长了。

所以我们的科幻效果,就是花瓣是透明的,只有轮廓。

 

那么这个轮廓,可以这样画:

  1. 由于每个点都是动态的,我们就不能把轮廓一次性画好。
  2. 通过观察和思考,我们就可以发现,只需要捕捉每一个旋转点的位置变化的规律即可。
  3. 如果把图形分解成360个发散的线,每个线按照时间的规律产生变化,就可以显示出动态花的效果。

 

这里涉及到动画的原理。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

就如同射线一样,找到点的规律。

让视觉效果看起来像旋转的花。上图是一个点及后续点变化。

下面看如果10个点的显示。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

90个点的显示。

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

同理,360个点都画出来,然后动态循环,就形成了可以旋转的花。

 

所以,核心的问题在于,一个点是按照上面规律画出来的。

这里就用到了之前设定的变量。及三角函数的概念。

 

从原始点出发,设定点移动的横轴长度为x,纵轴长度为y。

我们使用siny(1-sinx)来确定曲线的移动步数。

形成siny(1-sinx)sizex,cosy(1-sinx)sizey的波形

然后绘制花瓣页阴影。

及根据旋转方向确定下一个点。

 

具体代码如下:

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

 

这样我们就可以轻松绘制一个科幻效果的花瓣了。

 

其中的几个变量,通过修改,可以形成不同的动画效果。

 

Scratch编程之图形特效(2)一花一世界,编程的世界很大很奇迹(上)

由于篇幅原因,画花我们分上下两节。

今天的课就到此为止。

 

下面一节课,我们继续学习画花。是玫瑰和雪花啦,都很浪漫,一定是风花雪月的感觉吧。

 

如果想获得详细代码,可以注册卡搭,到下面网址就可以看程序效果并阅读代码了。

http://kada.163.com/project/275197-129466.htm

 

始发于微信公众号:
顽斗坊

您必须 登录 才能发表评论!