目录:
- 课程前言
- 认识PROCESSING - 关于像素
- 图形代码
- 色彩与填充
- 练习
- 交互
- 关于setup()和draw()
- 第一次进行移动
- 进一步复杂的交互操作
- 代码实现如下:
 
- 进一步了解PROCESSING - 变量
- 使用变量
- 系统内置变量
- 条件语句
- 逻辑运算符
- 循环语句
- while循环
- for循环
 
- 结构化 - 函数
- 实参
- 对象
- 掌握面向对象的编程
- 编写对象的模具:类
- 使用一个对象的具体步骤
- 构造函数的参数
 
- 重复性 - 数组
- 初始化数组
- 鼠标拖尾案例
 
1.课程前言
PROCESSING通常用来制作什么?
- 沉浸式交互场景。
- 大型灯光秀场
- AI交互式场景
- 互动游戏制作
关于资源

什么是processing?
这是一个故事,关于解放和自由~
- processing是非常开源的语言,脱胎于JAVA语言。
- processing可以做很多工作,且门槛不高,不需要太多的计算机语言背景。
- 现在processing应用最多的地方还是视觉艺术和交互艺术中。
- 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”
我们了解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()接下来就是看案例 

思考题:现在我们来进行举一反三,怎样来更进一步的把代码应用起来,比如上次课绘制出的机器人,我们想要
- 将它的整个身体跟随鼠标移动
- 眼睛的颜色由鼠标的位置移动
- 腿部由之前的鼠标位置到当前的鼠标位置进行绘制
代码实现如下:

 
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);
 }
 第二部分:产生这种渐变效果的是,将圆的亮度与大小和数组之间的位置产生关联。也就是说,越早的数值,亮度会
 更亮,尺寸会更小。