目录:
- 课程前言
- 认识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”
这个是用来调用功能函数用的,只有在功能函数之前输入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);
}
第二部分:产生这种渐变效果的是,将圆的亮度与大小和数组之间的位置产生关联。也就是说,越早的数值,亮度会
更亮,尺寸会更小。