博客简介
最近出于兴趣爱好,在学习Processing创意编程。此篇博客用来记录我学习Processing
创意编程的基础知识
,在我学习Processing的过程中,我会持续修改、更新这篇博客。运用Processing写的一些有趣的小项目,会更新在Procesing
专栏的其他文章中。
什么是Processing
Processing
是一门由Java开发的编程语言,用来生成图片、动画和交互软件的编程语言,专门为电子艺术和视觉交互设计而创建,用于表达数字创意。
下载Processing
前往Processing官网下载
Processing安装和使用
下载好压缩包后,IDE无
需我们自己安装,解压得到一个文件夹如下:
打开这个文件夹,找到processing.exe
直接双击就能运行,为了使用方便使用,可以发送processing.exe
快捷键到桌面。
IDE界面
Processing编译器的界面非常整洁,方便用户使用。
左上角的播放键和停止键是最常用的。
基础知识篇
函数setup和函数draw
setup
是启动程序时用到的代码,可以理解为入口函数。draw
是程序持续运行的代码,也就是程序的主体部分,比如哪里有图像出现、哪里有颜色变化,就可以将代码写在这个函数里面。
播放窗口
点击播放键,会出现一个灰色小窗口,就是processing播放界面,它默认大小是100x100像素:
也可以通过代码设置播放窗口大小。
属性size
用来设置播放窗口大小,比如将播放窗口设置为400x400像素大小:
void setup(){
size(400,400);
}
void draw(){
}
注意命令后有一个英文分号,写完每个命令后都要加英文分号作为结尾,否则会报错。
设置背景色
设置背景色的代码是持续运行的,所以要写在draw
函数里面,processing使用的色彩模式是RGB 255模式
,RGB 255模式中红绿蓝三种基本色会分别以0-255之间的数字表示,三种基本色可以混合成超过1600万种颜色。
设置背景色的命令是background,
void setup(){
size(400,400);
}
void draw(){
background(255,0,0);
}
考虑到很多颜色的RGB值我们是不知道的,processing给我们提供了一个很好用的工具——颜色选择器,在工具——》颜色选择器就能找到,我们可以选择自己喜欢的颜色,然后它会显示颜色的RGB值。
绘制图形
1.绘制矩形
命令为rect
如图:左上角坐标为(0,0),绘制矩形命令为rect(100,50,100,20)
,以左上角为参考,表示该矩形在x轴上坐标为100,在y轴上坐标是50,长100,宽20。
2.绘制椭圆形(或者圆形)
命令是ellipse
。
如:ellipse(300,200,100,200)
表示这个椭圆圆心x轴坐标是300,y轴坐标是200,椭圆宽是100,高是200。
println()
变量
- 全局变量
- 局部变量
//定义一个全局变量
int xpos = 0;
void setup(){
size(800,800);
}
void draw(){
background(255,255,255);
rect(xpos,100,50,50);
// 需求:通过增加xpos的值让小方块运动起来
xpos = xpos + 1;
println(xpos);
}
参数mouseX,mouseY
这两个参数可以让图形跟随鼠标移动。
设置一个矩形:
rect(mouseX,mouseY,50,50)
运行时,这个矩形的位置将会随鼠标变化。
UleadGIFAnimator5.10软件压缩动图。
以上是鼠标交互
下面学习键盘交互
函数keyPressed
当按下任意键盘上一个键时,函数会被执行。
注意P是大写。
函数中可以使用变量key,key是Processing程序中的预制变量,它记录的是我们的按键信息。
示例:运行代码后,随意点击一个按键,矩形将向右移动两个像素。
int xpos = 0;
void setup(){
size(800,800);
}
void draw(){
background(255,255,255);
rect(xpos,0,50,50);
}
void keyPressed(){
println(key);
xpos = xpos + 2;
}
如果想按下特定按键时对象向特定方向移动,比如玩游戏时wasd移动人物那种,需要学习processing中的if条件语句。
if条件语句
当预制变量(记录按键信息的一个系统自带变量)等于d时,矩形xpos
会向右移动2个像素。
void keyPressed(){
println(key);
if(key == 'd'){
xpos = xpos + 2;
}
}
如何在Processing中加载图片
1.速写本——》打开程序目录
能看见一个.pde
文件,这是我们正在编辑的文件。
2.在该文件夹新建一个文件夹,名为data
,注意名称一定为英文小写。
3.将想用的图片拷贝到data
文件夹下
4.定义全局变量PImage bunny;
5.用image
属性将图片加载到屏幕
image
有三个参数,第一个是图片,二三是位置参数。
例如:image(bunny,0,0)
表示将图片bunny加载到(0,0)位置。
可以自定义图片宽度和高度,在image中设置第四个和第五个参数即可。
PImage bunny;
void setup(){
size(800,800);
bunny = loadImage("bunny.png");
}
void draw(){
background(0,255,0);
image(bunny,0,0,100,100);
}
将兔子的坐标设置为image(bunny,mouseX,mouseY,200,200);
,兔子会跟随我们鼠标移动。
属性imageMode(CENTER)
可以将锚点从(0,0)改为鼠标所在位置。
随机数random
random(a,b)可以产生a到b之间的随机数,我们可以使用随机数设置加载图片的大小和出现位置。
1.加载兔子和萝卜图片:
2.设置加载图片大小随机,出现位置随机
运行一下,查看效果:随机产生了很多大小不一、位置不一的兔子。