我的processing学习笔记
本帖最后由 吃樱桃不吐胡 于 2016-8-6 13:28 编辑楼主作为一个纯粹的工科男，却阴差阳错到了机关坐办公室，沦落为天天写材料为生，内心实在是千万个草泥马在狂奔。为了保持工科男的本性，也为了不被这些无聊的材料压成神经病，决定给自己找点乐趣。去年先是接触了一下arduino，编程完成了一个遥控小车，利用appinventor编了个手机遥控软件，基本实现了在手机屏幕上画图形，小车就在地上按画的路径行走。开始心挺大，想进一步学习做个小四轴， 自平衡小车，激光雕刻机等，但是由于现在每天下班第一任务是陪孩子玩，加之学习硬件还是比较烧钱，结果就荒废了。上个月无意中发现了processing，又看了一些大神的作品，觉得很有意思，而且学习软件比学习硬件时间上比较灵活（比如每天中午可以学习半小时），所以决定学习一下，丰富一下自己的业余生活。为了避免再次半途而废特开此贴记录过程（不过还是很难说，哈哈）。
今天先补上前段时间零星学习的内容：
学习用教材：《爱上processing》、《代码本色》。
一、已学习的常用简单命令
1. 设置屏幕尺寸：size（宽，高）；
2. 画点：point（x，y）；
3. 划线：line（x1,y1,x2,y2）;
4. 画三角形：triangle（x1,y1,x2,y2,x3,y3）;
5. 四边形：quad（x1,y1,x2,y2,x3,y3,x4,y4）；
6. 角度换算为弧度：radians（角度）；
7. 长方形：rect（x，y，宽，高）；
8. 椭圆:ellipse(x,y,宽，高)；//目前用这个命令用的最多，嘿嘿
9. 平滑曲线：smooth（）；
10. 关闭平滑曲线：noSmooth();
11. 设置线宽：strokeWeight(x);
12. 背景颜色：background(x,x,x);//只填一个参数为灰度，0为黑255为白；填三个参数为RGB颜色
13. fill（x,x,x,x）//颜色同上，第四个参数为透明度
14. 鼠标当前坐标：mouseX,mouseY
15. 上一帧鼠标坐标：pmouseX,pmouseY
16. 测量两点之间的距离：dist（x1,y1,x2,y2）;
17. mousePressed:布尔量，鼠标按下后为真（true，false）
18. mouseButton:返回值：LEFT,CENTER,RIGHT 用来判断哪个键按下
。。。。。
还有一些图形命令，目前用的还很少，暂时没学。
二、编程格式
1.首先创建不在setup（）和draw（）函数的变量（全局变量）
2.setup（）{…};内的命令执行一遍
3.draw(){…};内的命令持续执行
三、面向对象编程
由于《代码本色》完全用的是面向对象的编程方式，而本人大学时学的计算机语言是老掉牙的FORTRAN，基本上就没听说过面向对象的编程，只有重新学习面向对象的编程方法，不过学习了两天，试着编了几个小程序，发现这种编程方法确实很强大。这里就照搬一下《爱上processing》里的描述,具体的还是得自己编几个程才能体会：
classxxx //1.创建一个类
{
int x； //2.添加值域
。。。
float y;
xxx（参数1，参数2.。。。。）//3.添加构建函数
{
…..
}
void xxxx() //4.添加方法
{
…..
}
…
void yyyyy() //
{
…..
}
}
5.用类声明一个对象：
xxx aa；
6.创建对象并传递参数
aa=new xxx；
先发几个前段时间练习的小程序：
1.弹球：一个小球在屏幕里弹来弹去：
class BouncBall
{
float x;
float y;
int d;
float xspeed;
float yspeed;
BouncBall(float tempX,float tempY,int tempD,float tempXspeed,float tempYspeed)
{
x=tempX;
y=tempY;
d=tempD;
xspeed=tempXspeed;
yspeed=tempYspeed;
}
void move()
{
x+=xspeed;
y+=yspeed;
if(x>width||x<d/2)
{
xspeed=xspeed*-1;
}
if(y>height||y<d/2)
{
yspeed=yspeed*-1;
}
}
void display()
{
ellipse(x,y,d,d);
}
}
BouncBall ball;
void setup()
{
size(480,480);
smooth();
ball=new BouncBall(width/2,height/2,20,2,2.5);
}
void draw()
{
ball.move();
fill(255,10);
rect(0,0,width,height);
fill(255,0,0);
ball.display();
}
2.加强版弹球，想起以前玩的一个弹砖块的游戏，试着编了一个不完全版的
class BouncBall
{
float x;
float y;
int d;
float xspeed;
float yspeed;
BouncBall(float tempX,float tempY,int tempD,float tempXspeed,float tempYspeed)
{
x=tempX;
y=tempY;
d=tempD;
xspeed=tempXspeed;
yspeed=tempYspeed;
}
void move(bangbang bang1)
{
x+=xspeed;
y+=yspeed;
if(x>width||x<d/2)
{
xspeed=xspeed*-1;
}
if((y>(height-30)&&(mouseX<x&&x<mouseX+bang1.ShapeWidth)))
{
xspeed=xspeed+(mouseX-pmouseX)*0.1;
yspeed=yspeed*(-1);
}
if(y<d/2)
{
yspeed=yspeed*(-1);
}
}
void crash(brick bb,BouncBall BB)
{
if(dist((bb.x+bb.w/2),(bb.y+bb.h/2),BB.x,BB.y)<(23+BB.d/2))
{
BB.yspeed=BB.yspeed*-1;
bb.x=0;
bb.y=0;
bb.w=0;
bb.h=0;
}
}
void display()
{
ellipse(x,y,d,d);
}
}
class bangbang
{
int ShapeWidth;
//int ShapeHeight;
//float x;
//float y;
//int x;
bangbang(int tempW)
{
//x=tempx;
ShapeWidth=tempW;
}
void display()
{
fill(0);
rect(mouseX,height-20,ShapeWidth,10);
}
}
class brick
{
float x;
float y;
float w;
float h;
brick(float tmpx,float tmpy,float tmpw,float tmph)
{
x=tmpx;
y=tmpy;
w=tmpw;
h=tmph;
}
void display()
{
fill(100);
stroke(255);
rect(x,y,w,h);
}
}
BouncBall ball;
bangbang bang;
brick[] bks;//=new brick;
void setup()
{
size(480,480);
smooth();
ball=new BouncBall(width/2,height/2,20,2,2.5);
bang=new bangbang(120);
bks=new brick;///
int k=0;
for(int i=0;i<6;i++)
{
for(int j=0;j<4;j++)
{
bks=new brick(i*80,j*20,80,20);
k++;
}
}
}
void draw()
{
for(int i=0;i<bks.length;i++)
{
bks.display();
ball.crash(bks,ball);
}
ball.move(bang);
fill(255,10);
noStroke();
rect(0,0,width,height-20);
noStroke();
fill(255,255);
rect(0,height-20,width,20);
fill(255,0,0);
//stroke(255);
ball.display();
bang.display();
}
3.学习使用noise（）函数，修改自《代码本色》中的一个例子：一个随机游走的小球，颜色随时间变化class Walker{
float x,y;
float tx,ty;
float r,b,g;
float tr,tb,tg;
Walker()
{
tx=0;
ty=10000;
tr=0;
tb=1000;
tg=2000;
}
void step()
{
x=map(noise(tx),0,1,0,width);
y=map(noise(ty),0,1,0,height);
tx+=0.01;
ty+=0.01;
}
void c()//color
{
r=map(noise(tr),0,1,0,255);
b=map(noise(tb),0,1,0,255);
g=map(noise(tg),0,1,0,255);
tr+=0.01;
tb+=0.01;
tg+=0.01;
}
}
Walker w;
void setup()
{
size(480,480);
w=new Walker();
}
void draw()
{
w.step();
w.c();
fill(w.r,w.b,w.g);
ellipse(w.x,w.y,20,20);
}4.学习《代码本色》后编的两个相互吸引运动的小球，在边界会转到另一边去：class Mover
{
PVector location1,location2;
PVector v1,v2;
PVector acceleration1,acceleration2;
Mover()
{
location1=new PVector(random(width),random(height));
v1=new PVector(random(-2,2),random(-2,2));
acceleration1=PVector.random2D();
location2=new PVector(random(width),random(height));
v2=new PVector(random(-2,2),random(-2,2));
acceleration2=PVector.random2D();
}
void update()
{
//PVector mouse=new PVector(mouseX,mouseY);
PVector dir1=PVector.sub(location2,location1);
PVector dir2=PVector.sub(location1,location2);
dir1.normalize();
dir1.mult(0.5);
acceleration1=dir1;
v1.add(acceleration1);
v1.limit(10);
location1.add(v1);
//acceleration2=PVector.mult(dir1,-0.1);
dir2.normalize();
dir2.mult(0.5);
acceleration2=dir2;
v2.add(acceleration2);
v2.limit(10);
location2.add(v2);
}
void display()
{
stroke(0);
fill(175);
ellipse(location1.x,location1.y,16,16);
ellipse(location2.x,location2.y,16,16);
}
void checkEdges()
{
if(location1.x>width)
{
location1.x=0;
}
else if(location1.x<0)
{
location1.x=width;
}
if(location1.y>height)
{
location1.y=0;
}
else if(location1.y<0)
{
location1.y=height;
}
}
}
Mover mover;//s=new Mover;
void setup()
{
mover=new Mover();
size(480,480);
smooth();
//mover.acceleration.x=0.05;
//mover.acceleration.y=0.05;
}
void draw()
{
mover.update();
mover.checkEdges();
mover.display();
}5.学习数组，把上面两个小球的改为任意个数小球：int geshu=20;//修改个数，可实现任意多小球相互运动，边界条件随机。
class Mover
{
PVector[] location=new PVector;
PVector[] v=new PVector;
PVector[] acceleration=new PVector;
Mover()
{
for(int i=0;i<geshu;i++)
{
location=new PVector(random(width),random(height));
v=new PVector(random(-2,2),random(-2,2));
acceleration=PVector.random2D();
}
}
void update()
{
for(int i=0;i<geshu;i++)
{
PVector dir=new PVector(0,0);
for(int j=0;j<geshu;j++)
{
if(i==j)
{
}
else
{
PVector tempdir=PVector.sub(location,location);
dir.add(tempdir);
}
}
dir.normalize();
dir.mult(0.5);
acceleration=dir;
v.add(acceleration);
v.limit(10);
}
for(int i=0;i<geshu;i++)
{
location.add(v);
}
}
void display()
{
stroke(0);
fill(175);
for(int i=0;i<geshu;i++)
{ellipse(location.x,location.y,16,16);
//ellipse(location2.x,location2.y,16,16);
}
}
void checkEdges()
{
for(int i=0;i<geshu;i++)
{
if(location.x>width)
{
location.x=0;
}
else if(location.x<0)
{
location.x=width;
}
if(location.y>height)
{
location.y=0;
}
else if(location.y<0)
{
location.y=height;
}
}
}
}
Mover mover;
void setup()
{
size(480,480);
mover=new Mover();
smooth();
//mover.acceleration.x=0.05;
//mover.acceleration.y=0.05;
}
void draw()
{
fill(255,10);
rect(0,0,480,480);
mover.display();
mover.update();
mover.checkEdges();
}6.继续练习数组，在网上看到一个画图连线的教程，修改了一下：int geshu=30; //设置把圆周等分成的份数
int radius=240; //设置圆的半径
class yuan
{
PVector point[]=new PVector;
float angle;
yuan()
{
angle= TWO_PI/geshu;
for(int i=0;i<geshu;i++)
{
float x = cos(angle * i ) * radius;
float y = sin(angle * i ) * radius;
point = new PVector(x,y);
}
}
void drawline()
{
smooth();
strokeWeight(0.5);
for(int i=0;i<geshu;i++)
{
for(int j=i+1;j<geshu;j++)
{
line(point.x,point.y,point.x,point.y);
}
}
}
}
yuan yuan1;
void setup()
{
size(480,480);
yuan1=new yuan();
}
int k=0;
void draw()
{
rect(0,0,width,height);
int i=k;
i++;
k=i;
translate(width/2,height/2);
rotate(0.05*i); //实现旋转，去掉可画静态图片
yuan1.drawline();
//line(0,0,width,height);
}
7.继续数组，画个正弦波：int geshu=314;
class sinx
{
PVector point[]=new PVector;
sinx(float str)
{
for(int i=0;i<geshu;i++)
{
float x=TWO_PI/geshu*i;
float y=sin(x+str);
x=map(x,0,TWO_PI,0,width);
y=map(y,-1,1,-(height/2),height/2);
point=new PVector(x,y);
}
}
void drawline()
{
smooth();
strokeWeight(0.5);
for(int i=0;i<geshu;i++)
{
line(point.x,point.y,point.x,0);
}
}
}
sinx sinx1;
void setup()
{
size(480,240);
sinx1=new sinx(0);
}
int k=0;
void draw()
{
rect(0,0,width,height);
int i=k;
i++;
k=i;
translate(0,height/2);
sinx1=new sinx(i*TWO_PI/geshu);
sinx1.drawline();
}好了，先把以前学的先记着这儿了。
我的经历和你很像，我也很喜欢processing，也做过一些项目，现在也算在机关里面了，求微信交流 又好久没弄了，前两天按网上搜到的方法，写了个图片马赛克化的小程序，感觉有点问题，用这种方法运算速度好慢啊，15000个点就要等半分钟。另外学习《代码本色》第二章，力，按照书上的方法编了个小球自由下落的程序。但是发现个问题，如果小球有初速度，或者重力的值取大点，就会产生阻尼，不知道书上作者发现没有，我想了个方法把一个小球时候的问题解决了，但是多个小球的时候问题依然存在，因为用到了一个全局变量，但是多个小球的时候，一个全局变量是不够的，以后再想这个问题了。
1，图片马赛克：PImage photo;
int geshu=15000; //设置取样点数，越多，图像越清楚，但速度越慢。
photo=loadImage("222.jpg");//随便找个jpg图片，改个名字放在程序目录当原始图片。
int d=int(sqrt(photo.width*photo.height/(PI*geshu))*4);
size(photo.width,photo.height);
for(int i=0;i<geshu;i++)
{
int x=int(random(photo.width));
int y=int(random(photo.height));
// size(photo.width,photo.height);
int xy=x+y*photo.width;
loadPixels();
float r=red(photo.pixels);
float g=green(photo.pixels);
float b=blue(photo.pixels);
fill(r,g,b);
noStroke();
// ellipse(x,y,d,d);
rect(x,y,d,d);
}
2.随机颜色重力小球：// int geshu=20;
int flag=0;
float t;
class Mover
{
PVectorlocation ;
PVector v;
PVector acceleration;
float mass;
float d;
color yanse;
Mover()
{
location=new PVector(random(width),random(height));
v=new PVector(random(-5,5),random(-5,5));
acceleration=new PVector(random(-5,5),random(-5,5));;
mass=random(1,5);
// mass=1;
d=map(mass,1,5,5,20);
yanse=color(int(random(0,255)),int(random(0,255)),int(random(0,255)));
}
void applyForce(PVector force)
{
PVector f=PVector.div(force,mass);
acceleration.add(f);
}
void update()
{
v.add(acceleration);
location.add(v);
acceleration.mult(0);
}
void display()
{
//noStroke();
fill(yanse);
// for(int i=0;i<geshu;i++)
// {
ellipse(location.x,location.y,d,d);
// }
}
void checkEdges()
{
if(location.x>width)
{
location.x=width;
v.x*=-1;
}
else if(location.x<0)
{
location.x=0;
v.x*=-1;
}
if((location.y>height)&&(flag==0))
{
location.y=height;
v.y*=-1;
t=v.y;
flag=1;
}
else if((location.y>height)&&(flag!=0))
{
location.y=height;
v.y=t;
}
}
}
Mover mover;
void setup()
{
size(480,480);
mover=new Mover();
smooth();
}
void draw()
{
PVector gravity=new PVector(0,0.1*mover.mass);
fill(255,0);
rect(0,0,480,480);
mover.display();
mover.applyForce(gravity);
mover.update();
mover.checkEdges();
}
3.多个小球：// int geshu=20;
int flag=0;
float t;
class Mover
{
PVectorlocation ;
PVector v;
PVector acceleration;
float mass;
float d;
color yanse;
Mover()
{
location=new PVector(random(width),random(height));
v=new PVector(random(-5,5),random(-5,5));
acceleration=new PVector(random(-5,5),random(-5,5));;
mass=random(1,5);
// mass=1;
d=map(mass,1,5,5,20);
yanse=color(int(random(0,255)),int(random(0,255)),int(random(0,255)));
}
void applyForce(PVector force)
{
PVector f=PVector.div(force,mass);
acceleration.add(f);
}
void update()
{
v.add(acceleration);
location.add(v);
acceleration.mult(0);
}
void display()
{
//noStroke();
fill(yanse);
//for(int i=0;i<geshu;i++)
// {
ellipse(location.x,location.y,d,d);
//}
}
void checkEdges()
{
if(location.x>width)
{
location.x=width;
v.x*=-1;
}
else if(location.x<0)
{
location.x=0;
v.x*=-1;
}
if((location.y>height)&&(flag==0))
{
location.y=height;
v.y*=-1;
t=v.y;
flag=1;
}
else if((location.y>height)&&(flag!=0))
{
location.y=height;
v.y=t;
}
}
}
Mover[] movers=new Mover;
void setup()
{
size(480,480);
for(int i=0;i<movers.length;i++)
{
movers=new Mover();
}
//mover=new Mover();
smooth();
}
void draw()
{
fill(255,10);
rect(0,0,480,480);
for(int i=0;i<movers.length;i++)
{
PVector gravity=new PVector(0,0.1*movers.mass);
movers.display();
movers.applyForce(gravity);
movers.update();
movers.checkEdges();
flag=0;
}
} 雨中漫步 发表于 2016-8-1 19:40 static/image/common/back.gif
我的经历和你很像，我也很喜欢processing，也做过一些项目，现在也算在机关里面了，求微信交流
呵呵，我就是随便学着玩玩，菜鸟一枚，就在论坛里交流吧
页:
[1]