从零开始学习 Processing – 基础动画和函数

Coding Alan 2个月前 (09-04) 494次浏览 0个评论 扫描二维码

在 processing代码通常会包含两个函数, setup()和 draw(),前者在程序开始时执行一次,而后者会反复执行,每执行一次会在画布上画出一个图像,从而实现动画效果。

使用 random()创建动画

随机动画1:

借助于 random()和 draw 实现了如下的动画效果

从零开始学习 Processing - 基础动画和函数

默认画布的背景色为浅灰色,可通过 background()来指定其颜色,background 有多种参数传递方式,只传一个参数(0-255)时表示从黑到白及之间的不同灰度,传递3个参数时则分别表示 RGB,如:

知道了设置背景的函数以及随机函数,聪明的你一定已经知道了如何画出随机颜色:

随机动画2:

此时如运行程序,会发现什么叫真正的亮瞎眼。

从零开始学习 Processing - 基础动画和函数

那么是不是一定要这么快呢,这时我们就可以使用本文开头所提到的另一个函数 setup(),因其仅在开始时执行一次,常用于进行一个配置工作。用于控制每秒刷新次数的函数是frameRate(),其中参数是几则每秒执行几次,因此可以改写为:

随机动画3:

利用前面学到的知识,我们制作一个从中间向四周使用随机颜色进行画线的动画,对于直线或图形的边框我们使用 stroke()函数,它和 background()一样可接受多种数据格式,以下使用 RGB参数并对 R 即红色的位置进行了随机

从零开始学习 Processing - 基础动画和函数

随机动画4:

下面的示例绘制一个从左边框到右边框的随机线段,背景使用黑色、线段使用白色。注意这里 background()放在了 draw()中,这样在每次刷新时会使用黑色背景覆盖掉此前绘制的线段,而不会像前面那样一直累加。

从零开始学习 Processing - 基础动画和函数

这里有一个问题,我们使用 random(100)随机生成了直接两端 y 轴的位置,那么如何让两个端点处于同一水线上呢?这时就需要能够存储下所生成的随机值,供我们反复使用,即我们常听到的变量,下面我们就添加一个 distance_top 变量来画出水平线段

从零开始学习 Processing - 基础动画和函数

稍微改造一下,即可实现画出纵向随机线段:

从零开始学习 Processing - 基础动画和函数

添加随机颜色并修改画布大小:

从零开始学习 Processing - 基础动画和函数

函数

我们知道了画布的默认大小是100*100,那如何修改呢?可以使用 size()函数进行配置。我们下面再复习一下线段的绘制,对程序进行一下升级,这里通过动态获取鼠标坐标并在此基础上进行绘制:

从零开始学习 Processing - 基础动画和函数

在需要反复绘制相同结构的图形时,抽象成为函数是一种比较好的做法,这样不仅减少了代码量,而且在进行修改时,仅需修改一处。我们所使用的 setup()、line()等都是系统内置的函数。下面重复绘制三条平行的线段,因此抽象出了 digonals()函数,在 draw()中进行调用。

从零开始学习 Processing - 基础动画和函数

 

小技巧: 虽然 Java 代码对缩进和空格没有特殊的要求,但通常为了美观和易读性,我们会对相同代码块使用相同的缩进,在 Processing 编辑器中可使用Cmd/Ctrl+T快捷键对代码进行自动格式化。

 

 

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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