Processing入门教程

目录：

1. 课程前言
2. 认识PROCESSING
   1. 关于像素
   2. 图形代码
   3. 色彩与填充
   4. 练习
   5. 交互
   6. 关于setup()和draw()
   7. 第一次进行移动
   8. 进一步复杂的交互操作
   9. 代码实现如下：
3. 进一步了解PROCESSING
   1. 变量
   2. 使用变量
   3. 系统内置变量
   4. 条件语句
   5. 逻辑运算符
   6. 循环语句
   7. while循环
   8. for循环
4. 结构化
   1. 函数
   2. 实参
   3. 对象
   4. 掌握面向对象的编程
   5. 编写对象的模具：类
   6. 使用一个对象的具体步骤
   7. 构造函数的参数
5. 重复性
   1. 数组
   2. 初始化数组
   3. 鼠标拖尾案例

1.课程前言

PROCESSING通常用来制作什么？

• 沉浸式交互场景。
• 大型灯光秀场
• AI交互式场景
• 互动游戏制作

关于资源

什么是processing？

这是一个故事，关于解放和自由~

1. processing是非常开源的语言，脱胎于JAVA语言。
2. processing可以做很多工作，且门槛不高，不需要太多的计算机语言背景。
3. 现在processing应用最多的地方还是视觉艺术和交互艺术中。
4. processing更加开放，可以生成很多创意艺术。

 

2.认识PROCESSING

关于像素

首先第一个要了解概念就通过像素形成的坐标概念
坐标系就是数学家笛卡尔发明的坐标系，在电脑中的体现就是画面左上角为（0，0）的原点，原点右侧是x正半轴，下侧是y正半轴。
因此，在processing里面画图，其实就是将不同的坐标点之间相连，然后形成图形。
比如：画一条线，从（1，0）到（4，5） 

图形代码

任何一个图形都是通过代码来命令计算机的，那么关于图形的代码都有哪些，又分别代表什么意思呢？

例子：

色彩与填充

上一个小结介绍了图形，还有一个同样重要的内容就是关于色彩。色彩第一种是灰度模式，0代表黑色，255代表白色，采用rgb色彩
 

 例子：

RGB彩色模式

• 电脑基本执行的是RGB彩色模式，取值0-255，也有6位16进制彩色模式，不过相对难掌握，以二进制为主。
• 使用时在填充后面输入想要色彩混合的值

例如： fill(255, 100, 0);

• 当然也可以调整透明度，在颜色后面添加0-255数值，0意味着完全透明，255意味完全不透明。

例如： fill(255, 100, 0， 255); 

如果感觉使用0-255去调整不够直观，可以修改他的色彩模式
 

例子：

background(255);
noStroke();
// Bright red
fill(255,0,0);
ellipse(20,20,16,16);
// Dark red
fill(127,0,0);
ellipse(40,20,16,16);
// Pink (pale red)
fill(255,200,200);
ellipse(60,20,16,16);
- size(640,240);
background(0);
noStroke();
fill(0,0,255);
rect(0,0,320,200);
fill(255,0,0,255);
rect(0,0,640,40);
fill(255,0,0,191);
rect(0,50,640,40);
fill(255,0,0,127);
rect(0,100,640,40);
fill(255,0,0,63);
rect(0,150,640,40);

临摹 蒙德里安

• fill(255, 200, 200);
• rect(100,100,40, 50);

练习

• 设计一个形象，可以是生物类，可以是植物类，可以是几何抽象类，需要用到上面课程中提到的形状代码--rect/ellipse/ line/ point等--，填充代码-- fill/ stroke等 

 

 

运行结果：

 

注意事项

• 在PROCESSING中的代码基本分为三类：函数调用、赋值操作、结构控制。
• 每一个代码片段都是由三部分构成：函数名称、括号内参数、分号结束。
• 当你写错代码的时候，软件会有提示，不要忽略掉
• 一定要注意写注释，这样在后期检查的时候能提高效率。
• processing是区分大小写的，在敲代码的时候一定要着重检查
• processing是有参考文档的，网址为：processing.org。里面会有各种函数的参考信息，注意查阅。

交互

• processing不是只是能做静态图形的语言，它还可以做出许多动态交互，processing做出动态，
• 依赖于两个function()命令
• setup()和draw()
• SETUP命令是将程序初始设置一遍完成的
• DRAW命令会一直重复循环执行。 

我们去跑步看作是一个程序，我们穿鞋穿跑步衣只需要做一次就好所以应归到setup()命令块中，双腿重复交替是循环重复动作，归到draw()命令块中

练习

思考打乒乓球应该怎么去写？

关于setup()和draw()

这两个属于功能函数，前面的字母表示函数指令，后面的（）代表运行这个函数，每一个功能函数后面都会有“（）”代表这个函数已经执行。
在setup（）或draw（）后面会跟一个 “{ }” ， 这个表示代码块，所有代码在代码块里面去执行 

我们了解setup（）和draw（）代码块后，还需要了解另外一个代码，这样就可以进行代码书写了。这个代码是 “void”

这个是用来调用功能函数用的，只有在功能函数之前输入void，这个函数才能起作用。

 

注意一点： 在processing中的代码是从上至下依次运行的，因此，在写入代码的时候一定要注意代码的顺序！！！！
例子：

• 接下来，要开始注意一点，为什么这个图还是静态的呢？
• 是因为我们所有的代码数值都是固定不变的
• 每一次的重复运行，都是在相同的位置，所以看起来是静止的！！ 

第一次进行移动

如果我们不想要一个静态的图像，想要他动起来，那么我们就需要它的位置一直是变化的，这样才可以让这个图像动起来。
在此引入一个基础的变量值 ： 鼠标的位置，这样也就带来了最基础的一个交互操作，移动鼠标改变图形的位置。
比如说，我们画一条线，想让一条线的一端不变，另一端随着鼠标的运动而运动，大致这个代码可以写成line（x，y， 鼠标的横坐标，鼠标的纵坐标）那么这个鼠标的坐标在代码里面应该是—— mouseX / mouseY
这个代码也应该是
line（x, y, mouseX, mouseY); 

例子：

如果不想要拖影应该怎么修改代码？接下来将代码运用的更加复杂一点

 例子：

怎样使身体的其余部分跟鼠标一起动？
除了使用mouseX和mouseY，还可以使用另外两个关键词来代表当前鼠标坐标的上一个坐标位置，可以实现一些更有趣的交互方式
用 pmouseX 和 pmouseY 来表示
这样，我们就能完成一些有意思的事情了，有了pmouseX和pmouseY，我们就可以想象鼠标的运动方式

 

那在这个时候，我们的例子来了

在这个时候，我们可以把思路变得更大胆一些，提出个想法，是否可以通过我们移动鼠标的速度，来调整线的粗细呢？
调整描边粗细的命令是strokeWeight（）， 也就是我们需要改变括号内的值就可以了，
里面的值是随着鼠标移动的速度变化，鼠标移动的速度越快，移动的距离越长因此，可以使用当前鼠标的位置减去上一时刻鼠标的位置即 mouseX - pmouseX所以这个描边可以写成
strokeWeight（mouseX - pmouseX）当然这样是没有办法运行的，还需要一个差值的函数表达式 abs（）所以这个代码可以写成 

进一步复杂的交互操作

当我们在完成移动交互操作之后，我们可以进行更深入的一次交互操作，比如点击鼠标。
点击鼠标是跳脱于draw（）代码块的，是一个事件函数。那么它也是有一个专门独立的函数功能来执行的，叫做mousePressed()当然，有了鼠标点击也会对应有键盘敲击，叫做
keyPressed（）接下来就是看案例 

思考题：现在我们来进行举一反三，怎样来更进一步的把代码应用起来，比如上次课绘制出的机器人，我们想要

1. 将它的整个身体跟随鼠标移动
2. 眼睛的颜色由鼠标的位置移动
3. 腿部由之前的鼠标位置到当前的鼠标位置进行绘制 

代码实现如下：

3.进一步了解PROCESSING

变量

什么是变量？

• 简单来说，变量更像是一个盒子，我们把我们需要东西放进变量的盒子里，我们需要的时候直接拿盒子，比直接携带我们需要的东西要方便很多。
• 从严格意义上来说，变量是计算机中用以储存数据的内存地址中，被命名的一个内存地址。
• 变量是非常具有实用性的，它可以储存各种信息，包括： 颜色， 尺寸，坐标。
• 而且，变量的作用绝不仅在于记忆数值，主要作用是在于它记忆的数值常常发生变化，尤其是当你不定时改变数值的
• 时候，就会越发意识到变量的重要性

那变量怎么去使用呢？

• 如果我们需要使用变量，那么我们在变量使用之前需要 声明变量，和声明变量的类型
• 首先我们声明变量的第一步： 指定变量类型，后面接变量的名字： 变量的名称必须是一个没有空格的单词，必须以
• 字母开头，不能包含任何的特殊符号。
• 第二步是为变量赋值，包括整数，小数，字符
• 整数 ： 比如1，2，3，0，-1，-2等，以整数的形式储存，使用的变量类型为 int
• 小数 ： 比如3.12 2.6 等， 这些属于浮点数据，使用的变量类型为 float
• 字符 ： 比如字母 a, b, c, 等，声明方式是将字母放在单引号里面，比如 'a'， 使用的变量类型为 char

**注意**
- 变量必须有数据类型
- 变量必须有一个名称

所有的变量类型
- int ： 一个整数，取值范围是-2 147 483 648 ~ 2 147 483 647
- boolean ： 变量为真或假， 取值 'true' 'flase'
- char : 一个字符，比如'a', 'b', 'c', 等
- byte ： 一个数值小的数字，取值范围是 -128~127
- short ： 一个数值大的数字， 取值范围是 -32 768~ 32 767
- long ： 一个及其巨大的数值
- float ： 一个小数， 比如 3.12
- double ： 一个具有更多小数位的小数，使用较少，了解即可

声明变量并赋值怎么写呢

• int count；
• count = 50；
• 一般会将两行代码进行合并，写成
• int count = 50；

变量使用小贴士
- 避免使用processing中的自带变量名称，比如mouseX。
- 使用具有含义、意义的名称，比如声明计数 用'count', 不要用'cat'
- 变量名称开头要小写，多个单词构成的话，第二个单词的首字母用大写

 例子：

int count = 0;
char letter = 'a';
double d = 123.32
boolean happy = false;
float x = 4.7;
float y;
y = x + 5.8;
float z = x * y +14.7;

使用变量

在我们刚才的内容中，同学可能觉得有变量了以后变得更复杂了，但是请相信，在我们使用过程中，变量会让编程变得更加容易和有趣

现在我们引入一个之前学的小例子

如果我们使用变量来表示这个圆的坐标的话，应该这样写 

• 写完以后会发现，和第一次写的结果是一样的。
• 那我们为什么使用变量呢，我们可以通过名字变量知道，他绝对不是一个常量的占位符，叫做变量是因为他是可以变化的量。
• 如果我们要改变变量值，我们需要进行赋值运算，这个就是我们使用变量的最主要原因。通过赋值运算，为它赋一个新的值。
• 最基础的赋值运算是增量计算
• 比如上面，circleX初始值是100， 我们让它的增量为1, 代码就可以表示为：
• circleX = circleX + 1;
• 把它写在上面的例子中即 

int circleX = 0;
int circleY = 100;

void setup(){
  size(800, 800);
}

void draw(){
  background(255);
  stroke(0);
  fill(170);
  ellipse(circleX, circleY, 50, 50);
  circleX = circleX + 1;
}

此时，得到的结果将会是这个圆从窗口左边移动到右边。
那么他的运行轨迹就是

• 1. circleX = 0， circleY = 100
• 2. 在setup里面创建一个画布
• 3. 运行draw（）
  • 在坐标（circleX， circleY） 即（0，100）绘制圆形
  • circleX的值增量 = 0+1 = 1
• 4. 运行draw（）
  • 在坐标（circleX， circleY） 即（1，100）绘制圆形
  • circleX的值增量 = 1+1 = 2
• 5. 运行draw（）
  • 在坐标（circleX， circleY） 即（2，100）绘制圆形
  • circleX的值增量 = 2+1 = 3
• 6. 持续运行下去

此时，得到的结果将会是这个圆从窗口左边移动到右边。

系统内置变量

除了之前的mouseX 和mouseY之外，还有许多内置变量 

 

例子：

 
一个好玩的变量补充

• random（） 随机变量
• 功能1： 从屏幕的底端往上移动
• 功能2： eyes 随着运动，随机的变换颜色

条件语句 

我们在一些项目实验的时候会遇到一个问题，一个程序的运行我们是希望它具有一定的运行条件的，比如我们想实现，当鼠标滑动到屏幕右面，改变背景色，鼠标滑动到屏幕左面，背景色还原，这一个简单的操作。
常规的的代码并不能实现，因此我们需要给它加上条件，那这个也就是我们本次课的主要内容：条件语句。
条件语句涉及到一种测试： 布尔测试——表示真或者假。
那用来衡量这个真或者假的表达式叫做 ： 布尔表达式
基本逻辑例子为：

15大于20 —— 假
5等于5 —— 真
100小于200 —— 真 

 

if/else/else if
这种被写为条件语句的布尔表达式是一种被询问的方式执行的。
比如 15>20
首先询问15是不是大于20，答案是对，表示这句话是真的，运行。
答案是错，表示这句话是假的，不运行。
这个是条件语句的基本逻辑。
比如： 如果我饿了，那么我就吃饭
if（我饿了）{
我吃饭;
} 

 

还可以通过加入else进一步拓展，否则怎样这个问题
比如，如果我饿了，那么我就吃饭，否则，我就睡觉。

if（我饿了）{
我吃饭;
} else {
睡觉；
} 

 

除了最基本的条件语句，还有多重条件语句

 

如
if (mouseX < width/3){
backgroud(255);
} else if (mouseX < 2*width/3){
backgroud(127);
} else{
backgroud(0);
}
上述代码的意思为： 如果鼠标位于屏幕左侧1/3 ，背景为白色，位于中间1/3， 背景为灰色，否则，背景为黑色。

例子：
1，创建变量，分别代表R,G,B，三个颜色，
2，根据这个颜色变量，连续变化背景的颜色
3，如果鼠标在屏幕的右半侧，让R递增，如果，鼠标在屏幕的左半侧，R值递减。
4，对R值加一个区间，0-255.
限定区间的代码，
random（0，255）；
constrain（）； // 需要三个参数，进行限制的数值，最小值，最大值；
constrain（r， 0， 255）；
例子：
高级一点，根据我们鼠标的位置，和点击的状态去改变颜色。
多个条件语句叠加

逻辑运算符

关于逻辑除了简单的if逻辑还是不够的，还需要其他的执行条件，这个时候就涉及到逻辑运算符
and 且 or 或者
比如，
我发烧了，体温超过39度，或者（OR） 我开始咳嗽，就去看医生。
我发烧了，体温超过39度，并且（AND) 我开始咳嗽，就去看医生。
在processing中举例，
如果鼠标在屏幕右边，并且鼠标在屏幕的底部，那就再右下角画一个矩形。
有可能会写出一个嵌套式的if语句 

当然这样写也是没有问题的，不过可以使用逻辑运算符变得更加简单，
逻辑运算符 and 写为 &&， or 写为 || 一定要写两个
那么上面那个代码就可以写为

 

除了&& || 以外， 还有一个NOT， 写作 ！， 是不是的意思
比如，我体温没有超过37度，我不会去看医生
在processing里面举例：
如果没有敲击键盘，绘制一个圆，否则绘制一个正方形

 

布尔开关
状态的保持 - —— 真假变换

例子：
1，绘制一条水平线，一条垂直线；
2， 如果鼠标在左上区域，左上角绘制黑色方块
3，如果鼠标在右上区域，右上角绘制黑色方块
4，如果鼠标在右下区域，右下角绘制黑色方块
5，如果鼠标在左下区域，左下角绘制黑色方块
布尔变量example
弹力球example
弹性色彩转变example
边缘运动example
模拟物理学运动
位置 = 位置 + 速度 速度 = 速度 + 加速度
引入一个概念： 加速度 

循环语句

什么是重复（iteration）

• 重复就是指将一系列的规则或者步骤进行不断重复的过程，是计算机程序最基本的概念，也是图形设计中重要的概念之一。 

 

在上面例子中，竖直的线从横坐标50一直绘制到横坐标150，每条线之间间隔10个像素。
当然，我们也可以用变量去写。
有个问题出现了，从技术上将，我们使用变量应该更加高效，但是实际上来看，更复杂和笨重了，那如果我们要绘制
100条线，就需要写将近200行代码了。
解决方案： 绘制一条线，重复一百次。
这个就是本章的重点，循环语句。

while循环

在processing里面有三种循环，while循环，do-while循环，for循环。
while循环和条件语句类似，
写为： while（布尔表达式）{}
那么我们用while循环写一下上面那个例子： 

 

这段代码说明了，只要x小于150，就在x处画一条直线。我们还可以通过更改spacing变量绘制出更多的线。
如果我们用矩形而不是直线，需要思考三个问题：
1，循环的初始条件？
比如第一个矩形的Y坐标是10， 那么我们循环的值应该是以10开始
int y = 10
2，循环应该在什么时候停止？
如果希望矩形一直排列到窗口的底部，因此循环应该在y的值大于高度的时候停止。
while（y < height){
// loop
}

3，循环的操作指令是什么？
在这个例子里面，通过循环希望在前一个矩形下面绘制新的矩形，可以调用rect（）函数，以及y的增量计算
来实现
rect(100, y, 100, 10);
y = y +20;
把上面三个问题的代码合并到一起，就是我们的循环函数 

for循环

for循环相对while循环更加简洁。
for循环由三部分构成：
初始值：变量在循环里声明和初始化，这个变量常用为一个计数器使用。
布尔表达式：这个和while循环里面的布尔表达式是一样的。
循环（iteration）表达式：这个是每个循环周期里面所要执行的指令。

扩展：

 

如下循环：
for(int i = 0; i < 10; i++){
//loop
}
声明一个一个变量 i, 将其初始值设置为0；
当 i < 10 时，重复下面代码块；
在每个循环的末尾，i 的值增加1
当 i > 10 时，退出循环
把这个用while循环写出来就是：
int i = 0;
while( i < 10 ){
//loop
i++
} 

基础语句 + 运算 产生图形
循环之美
二方连续
图案
具有交互效果的色彩循环案例
abs（）；|-1| = 1 |1| = 1 0 - 255
长胳膊的机器人案例
画面中显示多个机器人案例

4.结构化

函数 

在前面学习的内容案例相对挺简短，但是如果你想要实现比较有趣的项目，写出来setup（）和draw（）代码相对会
变得冗长，复杂。
解决的办法就是将代码进行模块化。
那么模块化的方法是什么？ 是利用函数来对代码进行分解

比如一个例子：
我们要做一个类似星球大战游戏的大型processing项目
那么我们要简单把制作内容列出来：

• 背景
• 绘制宇宙飞船
• 绘制敌人
• 通过用户操作键盘来移动宇宙飞船
• 移动敌人

 

在processing中一直都在使用函数，比如line ellipse。。
这些都是预先设置好的，也叫底层函数 大豪斯
但是我们也可以自己自定义函数
那么怎样来自定义函数？
如果要定义函数，需要从三个方面构成：
1.返回类型
2，函数名称
3，实参数
returntype functionname (parameters){
// code
}
那写的时候怎么写呢？

void drawBlackCircle() { fill(0); ellipse(50,50,20,20); }
调用又如何调用？
void draw() { background(255); drawBlackCircle(); }

 

实参

在上面内容，我们暂时忽略了返回类型和实参，为了更好的理解。
函数不仅可以将processing模块化，实参和形参会发挥更大作用。
实参是传递给函数的数值。举个例子： 对于一个可以移动的物体，你可以指定移动多少步，比如移动10个像素，
那么10就是实参。
上次课程提到的例子：
void drawBlackCircle(int d) { fill(0); ellipse(50,50,d,d); }
形参事实上就是在函数定义中的括号内部的变量声明。
drawcar(100,100,64,color(200,200, 0));
drawcar(int x, int y, int thesize, color c) 

对象 

掌握面向对象的编程

对象并不是一个新的知识，而是针对函数模块化的一种应用，和一种思路的梳理，是将之前学到的知识的重新构建和
组织。
举个例子，你每天的工作：
起床
洗漱
吃早餐
上课
整个的过程主题是 你
你具有完成任务的能力。

类似一个饼干模具， 这个模具是做饼干的，它不是饼干本身，这个饼干模具就是 类
饼干才是 对象

使用对象
我们先用伪码来书写一下在汽车案例

在面对对象的编程中，把所有的变量和函数放到主程序的外部。分为两个部分，一个是数据： 颜色、位置、速度。第二部分是功能： 函数 

 

写成processing代码则为

编写对象的模具：类

类包含四种元素：名称、数据、构造函数、方法。

• 类的名称：这个名称是由你自己决定的，也就是说你可以取自己想要的名字。类的名称首字母一般都是大写。
• 数据：类的数据是一系列变量。
• 构造函数：构造函数是一种特殊的函数，它位于类的内部，用于创建对象本身的实例。当有一个新的对象从类当中创造出来的时候，它具有和类相同的名字，用new运算符进行调用： Car myCar = new Car（）；
• 函数： 通过对函数功能的设置，为对象增加自定义函数 

 

通过上面的代码我们可以看出来，类是一种全新的代码块

使用一个对象的具体步骤

第一步： 声明对象变量。
我们刚开始学习变量的时候，在写代码之前需要指定一个变量类型和变量名称
比如： int x ；
类的声明也与之类似，不同的地方是这里的变量类型是类的名称，后面的变量名是我们自定，另外对象不是初始值，
而是一种复杂的数据类型
Car myCar
第二步： 初始化对象
还是回到在学习变量之初，我们声明完变量后会给其赋值
比如： x = 1；
初始化对象相对复杂一些，和赋值不同，需要通过 new 运算符构建这个对象
myCar = new Car();
第三步：使用一个对象
当声明并初始化一个对象变量之后，就可以使用这个对象了。使用对象需要调用内置于对象之中的函数
variableName.objectMethod(method arguments);
myCar.diplay(); 

构造函数的参数

目前我们尝试了使用一个对象，就像上次的例子汽车，如果我们想要使用两个汽车对象怎么做？
Car myCar1 = new Car();
Car myCar2 = new Car();
这样我们就完成创建了两个汽车对象，但其实我们会注意到，这两个对象都是一样的颜色，一样的运动，那如何来构
造不同的汽车对象？
这里就会使用到关于汽车对象的函数。
Car myCar = new Car(color(255,0,0), 0, 100, 2);
Car(color tempC, float tempX, float tempY, float tempSpeed){
c = tempC;
x = tempX;
y = tempY;
speed = tempSpeed;
}

5.重复性 

数组

数组和变量非常相似，区别在于变量指向单个信息片段，数组指向更多的信息。
数组可以想象为一个序列的变量，
1，一个序列记录了一组元素，这些元素本身的信息非常重要。
2，这个序列要记录这些元素的位置顺序。
我们在使用数组之前需要声明和创建数组。
声明使用和变量类似
int [] array;
需要注意的是，数组有一个基本属性就是他们的长度是固定的，定义好一个数组的长度之后就不能修改了
int[] array = new int [40];
float[] score = new float[7];
int num = 50;
Car[] myCar = new Car[num];

初始化数组

数组声明完成以后怎么去使用？
首先要将数组进行初始化
比如：
int[] car = new int[3];
car[0] = red;
car[1] = green;
car[2] = blue;
通过索引值将数组每一个元素进行赋值。
思考
创建一个具有1000个数据的数组，使用0-10之间的随机数字初始化这个数组的每一个元素。
第一步： int[] values = new int[1000];
第二步：

values[0] = random(0, 10);
values[1] = random(0, 10);
values[2] = random(0, 10);
values[3] = random(0, 10);
......
values[n] = random(0, 10);
values[n+1] = random(0, 10);
values[n+2] = random(0, 10);
values[n+3] = random(0, 10);
for(int n = 0; n < 1000; n++){
values[n] = random(0, 10);
} 

鼠标拖尾案例

通过对数组的了解，我们现在编写一个比较简单的任务，一个圆跟随鼠标进行移动，但是会拖出一个轨迹出来。
首先分两部分去分析：
第一部分： 后面有拖尾是因为我们保留了鼠标的位置。通过数组的末尾储存当前的鼠标位置，然后不断的去覆盖。
比如某一帧中，鼠标位置（10，10），另一帧中位置是（15，15），在位置更新之前，将所有元素向下移动一个位
置。
50个数组
第四十九个元素会移动到第48个。
i 设置为i+1
for（int i= 0，i < x.length - 1; i++){
x[i] = x[i +1];
y[i] = y[i+1];
}
for(int i = 0; i < x.length; i++){
stroke(0); 

fill(0);
ellipse(x[i],y[i],32,32);
}
第二部分：产生这种渐变效果的是，将圆的亮度与大小和数组之间的位置产生关联。也就是说，越早的数值，亮度会
更亮，尺寸会更小。