博客简介
最近出于兴趣爱好,在学习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.设置加载图片大小随机,出现位置随机
 
 运行一下,查看效果:随机产生了很多大小不一、位置不一的兔子。
 


















