Processing练习——圆球移动
0赞
最近做了一个Processing的小例子,练练手了。体察下鼠标动作如何与Processing画面各图形互动。
画面中,一条直线上方一个圆球向左或向右移动,按下直线下方的"Left_Reset"按钮,圆球回到左边初始位置,这时如果按下"Start"按钮,圆球向右移动,直至从画面消失。按下直线下方的"Right_Reset"按钮,圆球回到右边初始位置,这时如果按下"Start"按钮,圆球向左移动。并且,当用鼠标拖动圆球边沿时,圆球会随之放大或缩小。
我还发现了一个网站,它把Processing函数参考手册翻译成了中文,这真是创客精神的体现,分享和互助。
把下面程序复制到Processing 2.2.1编程环境,试试。
Processing 2.2.1下载:https://www.processing.org/download/?processing
注意:新版Processing 2.2.1可以显示中文注释了,点击File→Preferences。把“Editor and Consoles font”字体切换为“宋体”即可,另外下面的“font size”字体尺寸也可以修改,数字越大,字体尺寸越大。

Processing程序:
int x,y,r;
float move =0; //圆球相对于初始位置移动的距离
String move_state ="Stop";//圆球的移动状态,即“Start”或“Stop”
char move_DIR ='L'; //圆球的移动方向,即'L' 或 'R'
//初始化
void setup(){
size(500,300);//设置画布尺寸为X像素500,Y像素300
smooth(); //设置轮廓线条为光滑
noStroke();//设置绘制的图形不显示轮廓线
textSize(16);//字体大小为像素16
textAlign(CENTER);//字体中央对齐
ellipseMode(RADIUS);//设置椭圆的第3、4参数为半径尺寸
rectMode(CENTER);
x =50;//圆球中心的初始位置
y =height/2;
r =12;//圆球的初始半径
}
//主程序
void draw(){
background(204);//循环刷背景
button_draw();//调用按钮绘制子函数
fill(0,0,255); //绘制的狭长水平矩形条的填充色为蓝色
rect(width/2,height/2+5,width,10);//绘制的狭长水平矩形条
fill(255,0,255);//绘制的圆球的填充色为紫色
//如果鼠标按下,同时鼠标位置在画布的上半部
if(mousePressed==true && mouseY <=height/2){
//测得鼠标光标与圆球中心的尺寸,
//该尺寸为圆球的实时半径
r =(int)dist(mouseX,mouseY,x,y-r);
//如果实时半径超过40,则半径固定为40
if(r >40) r=40;
//如果实时半径小于20,则半径固定为20
if(r <20) r=20;
//以测得鼠标光标与圆球中心的尺寸为半径,画圆
ellipse(x,y-r,r,r);
println(r);//把半径r送到控制台显示
}
//如果鼠标按下,同时鼠标位置位于"Start"按钮图形区域内,
//圆球开始移动
if(mousePressed ==true && overRect() =="Start"){
move_state="Start"; //设置圆球状态为“活动”
}
//如果鼠标按下,同时鼠标位置位于"Left_Reset"按钮图形区域内,
//圆球回到左边初始位置
if(mousePressed ==true && overRect() =="Left_Reset"){
move_DIR='L'; //设置圆球状态为“静止”
move_state="Stop";
}
//如果鼠标按下,同时鼠标位置位于"Right_Reset"按钮图形区域内,
//圆球回到右边初始位置,同时设置圆球状态为“静止”。
if(mousePressed ==true && overRect() =="Right_Reset"){
move_DIR='R'; //设置圆球状态为“静止”
move_state="Stop";
}
//如果圆球状态为“静止”,则圆球回到左边初始位置
if(move_state=="Stop" && move_DIR =='L'){
x =50; //圆球初始位置回到左边
move=0;//圆球相对于初始位置移动的距离归零
ellipse(x+move,y-r,r,r);
}
//如果圆球状态为“静止”,则圆球回到右边初始位置
if(move_state=="Stop" && move_DIR =='R'){
x =450; //圆球初始位置回到右边
move=0; //圆球相对于初始位置移动的距离归零
ellipse(x+move,y-r,r,r);
}
//如果圆球状态为“活动”,同时圆球处于左边初始位置,
//则圆球以步数为两个像素的速度向右移动
if(move_state=="Start" && move_DIR =='L'){
move +=2;
ellipse(x+move,y-r,r,r);
}
//如果圆球状态为“活动”,同时圆球处于右边初始位置,
//则圆球以步数为两个像素的速度向左移动
if(move_state=="Start" && move_DIR =='R'){
move -=2;
ellipse(x+move,y-r,r,r);
}
}
//按钮绘制子函数
void button_draw(){
fill(255,255,255); //填充色为白色
rect(width/5,height/2+50,100,50);//绘制矩形按钮
fill(0); //矩形按钮上的文字为Start
text("Start",width/5,height/2+50);
fill(255,255,255); //填充色为白色
rect(width*2.5/5,height/2+50,100,50);//绘制矩形按钮
fill(0); //矩形按钮上的文字为Reset
text("Left_Reset",width*2.5/5,height/2+50);
fill(255,255,255); //填充色为白色
rect(width*4/5,height/2+50,100,50);//绘制矩形按钮
fill(0); //矩形按钮上的文字为Reset
text("Right_Reset",width*4/5,height/2+50);
}
// 子函数用于判断鼠标光标位于哪个按钮矩形框中,并返回按钮“名称”值
String overRect() {
//如果鼠标位置位于"Start"按钮图形区域内,则子函数返回值为"Start"
if(mouseY >height/2+25 && mouseY < height/2+75){
if(mouseX > width/5-50 && mouseX < width/5+50){
return "Start";
}
//如果鼠标位置位于"Left_Reset"按钮图形区域内,
//则子函数返回值为"Left_Reset"
else if(mouseX > width*2.5/5-50 && mouseX < width*2.5/5+50){
return "Left_Reset";
}
//如果鼠标位置位于"Right_Reset"按钮图形区域内,
//则子函数返回值为"Right_Reset"
else if(mouseX > width*4/5-50 && mouseX < width*4/5+50){
return "Right_Reset";
}
//否则子函数返回值为"none"
else {
return "none";
}
}
//否则子函数返回值为"none"
else {
return "none";
}
}
编程中,程序的可读性还是很重要的,对于可读性,我认为编程要注意以下几点:
1、变量名和变量参数都应该注意可读性,变量名以"英文_英文_英文“形式来表达,例如:move_state。为了增加可读性,变量参数可以用字符和字符串。
2、函数名应该注意可读性,变量名以"英文_英文_英文“形式来表达,例如void button_draw()。
3、主程序与子函数的关系就像建筑体与建筑模块的关系,主程序应该着重展示建筑模块之间的搭建逻辑,所以如果主程序中某些语句并不能展示模块之间的搭建逻辑,那么这些语句也应该想办法打包成子函数。这样才能使主程序条理清晰,可读性好。
4、子程序中不能有全局变量,子程序与调用它的程序之间的数据交流,只能通过它的输入输出参数来完成。
5、程序开始时的变量,要注释;每一个程序段前面都要有注释,解释这个程序段的作用;每个子函数要注释,解释子函数的作用;重要的和特殊的语句,要注释。
