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

相关推荐

  1. 代码绘梦:Processing艺术编程入门

    2024-07-09 17:12:06       9 阅读
  2. libevent入门教程

    2024-07-09 17:12:06       41 阅读
  3. LaTeX入门教程

    2024-07-09 17:12:06       33 阅读
  4. notebook入门使用教程

    2024-07-09 17:12:06       37 阅读

最近更新

  1. SQL Server报告服务的艺术:在SSRS中打造专业报告

    2024-07-09 17:12:06       0 阅读
  2. 探索Sklearn的分层抽样:数据科学中的精确艺术

    2024-07-09 17:12:06       0 阅读
  3. SQL Server分布式查询:跨数据库的无缝数据探索

    2024-07-09 17:12:06       0 阅读
  4. Vue的渲染函数:深入探索与应用实践

    2024-07-09 17:12:06       0 阅读
  5. mac os 去除压缩包下的__MACOSX

    2024-07-09 17:12:06       0 阅读

热门阅读

  1. Docker

    Docker

    2024-07-09 17:12:06      7 阅读
  2. C++多线程学习笔记

    2024-07-09 17:12:06       8 阅读
  3. 实现基于Spring Cloud的事件驱动微服务

    2024-07-09 17:12:06       8 阅读
  4. js使用websocket,vue使用websocket,copy即用

    2024-07-09 17:12:06       5 阅读
  5. PostgreSQL的扩展(extensions)-常用的扩展-pg_profile

    2024-07-09 17:12:06       5 阅读
  6. Spring Boot整合MongoDB实现事务管理

    2024-07-09 17:12:06       6 阅读
  7. Solana RPC 的工作原理

    2024-07-09 17:12:06       6 阅读
  8. 音频demo:使用faad2将AAC数据解码出PCM数据

    2024-07-09 17:12:06       6 阅读
  9. SQLAlchemy配置连接多个数据库

    2024-07-09 17:12:06       8 阅读
  10. Android C++系列:Linux常用函数和工具

    2024-07-09 17:12:06       5 阅读