极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3139|回复: 3

我的processing学习笔记

[复制链接]
发表于 2016-8-1 13:31:56 | 显示全部楼层 |阅读模式
本帖最后由 吃樱桃不吐胡 于 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》里的描述,具体的还是得自己编几个程才能体会:
class  xxx //1.创建一个类
{
int x;   //2.添加值域
。。。
float y;

xxx(参数1,参数2.。。。。)//3.添加构建函数
{
…..
}  
void xxxx()   //4.添加方法
{
…..
}

void yyyyy()   //
{
…..
}

}
5.用类声明一个对象:
xxx aa;
6.创建对象并传递参数
aa=new xxx;

先发几个前段时间练习的小程序:
1.弹球:一个小球在屏幕里弹来弹去:
[pre lang="processing" line="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();
}[/code]
2.加强版弹球,想起以前玩的一个弹砖块的游戏,试着编了一个不完全版的
[pre lang="processing" line="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(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[24];
void setup()
{
  size(480,480);
  smooth();
  ball=new BouncBall(width/2,height/2,20,2,2.5);
  bang=new bangbang(120);
  bks=new brick[24];///
  int k=0;
  for(int i=0;i<6;i++)
    {
      for(int j=0;j<4;j++)
      {
        
        bks[k]=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();
}[/code]
3.学习使用noise()函数,修改自《代码本色》中的一个例子:一个随机游走的小球,颜色随时间变化
  1. class Walker{
  2.   float x,y;
  3.   float tx,ty;
  4.   float r,b,g;
  5.   float tr,tb,tg;
  6.   
  7.   Walker()
  8.   {
  9.     tx=0;
  10.     ty=10000;
  11.     tr=0;
  12.     tb=1000;
  13.     tg=2000;
  14.   }
  15.   void step()
  16.   {
  17.     x=map(noise(tx),0,1,0,width);
  18.     y=map(noise(ty),0,1,0,height);
  19.     tx+=0.01;
  20.     ty+=0.01;
  21.   }
  22.   void c()  //color
  23.   {
  24.     r=map(noise(tr),0,1,0,255);
  25.     b=map(noise(tb),0,1,0,255);
  26.     g=map(noise(tg),0,1,0,255);
  27.     tr+=0.01;
  28.     tb+=0.01;
  29.     tg+=0.01;
  30.    
  31.   }
  32. }
  33. Walker w;
  34. void setup()
  35. {
  36.   size(480,480);
  37.    w=new Walker();
  38.   
  39. }
  40. void draw()
  41. {
  42.    w.step();
  43.    w.c();
  44.    fill(w.r,w.b,w.g);
  45.    ellipse(w.x,w.y,20,20);
  46.    
  47. }
复制代码
4.学习《代码本色》后编的两个相互吸引运动的小球,在边界会转到另一边去:
  1. class Mover
  2. {
  3.   PVector location1,location2;
  4.   PVector v1,v2;
  5.   PVector acceleration1,acceleration2;
  6.   Mover()
  7.   {
  8.   location1=new PVector(random(width),random(height));
  9.   v1=new PVector(random(-2,2),random(-2,2));
  10.   acceleration1=PVector.random2D();
  11.   location2=new PVector(random(width),random(height));
  12.   v2=new PVector(random(-2,2),random(-2,2));
  13.   acceleration2=PVector.random2D();

  14.   }
  15.   void update()
  16.   {
  17.   //  PVector mouse=new PVector(mouseX,mouseY);
  18.    PVector dir1=PVector.sub(location2,location1);
  19.    PVector dir2=PVector.sub(location1,location2);
  20.     dir1.normalize();
  21.     dir1.mult(0.5);
  22.     acceleration1=dir1;
  23.     v1.add(acceleration1);
  24.     v1.limit(10);
  25.     location1.add(v1);
  26.    
  27.    //acceleration2=PVector.mult(dir1,-0.1);
  28.    
  29.     dir2.normalize();
  30.     dir2.mult(0.5);
  31.     acceleration2=dir2;
  32.     v2.add(acceleration2);
  33.     v2.limit(10);
  34.     location2.add(v2);
  35.   }
  36.   void display()
  37.   {
  38.     stroke(0);
  39.     fill(175);
  40.     ellipse(location1.x,location1.y,16,16);
  41.     ellipse(location2.x,location2.y,16,16);
  42.   }
  43.   void checkEdges()
  44.   {
  45.     if(location1.x>width)
  46.     {
  47.       location1.x=0;
  48.     }
  49.     else if(location1.x<0)
  50.     {
  51.       location1.x=width;
  52.     }
  53.      if(location1.y>height)
  54.     {
  55.       location1.y=0;
  56.     }
  57.     else if(location1.y<0)
  58.     {
  59.       location1.y=height;
  60.     }
  61.   }
  62. }
  63. Mover mover;//s=new Mover[5];
  64. void setup()
  65. {
  66.    mover=new Mover();
  67.    size(480,480);
  68.    smooth();
  69.    //mover.acceleration.x=0.05;
  70.    //mover.acceleration.y=0.05;
  71. }
  72. void draw()
  73. {
  74.   mover.update();
  75.   mover.checkEdges();
  76.   mover.display();
  77. }
复制代码
5.学习数组,把上面两个小球的改为任意个数小球:
  1. int geshu=20;  //修改个数,可实现任意多小球相互运动,边界条件随机。

  2. class Mover
  3. {

  4.   PVector[] location=new PVector[geshu];
  5.    PVector[] v=new PVector[geshu];
  6.   PVector[] acceleration=new PVector[geshu];
  7.     Mover()
  8.   {
  9.    
  10.     for(int i=0;i<geshu;i++)
  11.     {
  12.         location[i]=new PVector(random(width),random(height));
  13.       
  14.         v[i]=new PVector(random(-2,2),random(-2,2));
  15.         acceleration[i]=PVector.random2D();
  16.     }

  17.   }
  18.   void update()
  19.   {
  20.   
  21.   for(int i=0;i<geshu;i++)
  22.   {
  23.    PVector dir=new PVector(0,0);
  24.         
  25.     for(int j=0;j<geshu;j++)
  26.     {
  27.       if(i==j)
  28.     {
  29.     }
  30.     else
  31.     {
  32.     PVector tempdir=PVector.sub(location[j],location[i]);
  33.     dir.add(tempdir);
  34.     }
  35.     }  
  36.    
  37.     dir.normalize();
  38.     dir.mult(0.5);
  39.     acceleration[i]=dir;
  40.     v[i].add(acceleration[i]);
  41.     v[i].limit(10);
  42.    
  43.   }
  44.   for(int i=0;i<geshu;i++)
  45.   {
  46.    location[i].add(v[i]);
  47.   }

  48.   }
  49.    
  50.   void display()
  51.   {

  52.     stroke(0);
  53.     fill(175);
  54.     for(int i=0;i<geshu;i++)
  55.     {ellipse(location[i].x,location[i].y,16,16);
  56.     //ellipse(location2.x,location2.y,16,16);
  57.     }
  58.   }
  59.   void checkEdges()
  60.   {
  61.     for(int i=0;i<geshu;i++)
  62.     {
  63.       if(location[i].x>width)
  64.     {
  65.       location[i].x=0;
  66.     }
  67.     else if(location[i].x<0)
  68.     {
  69.       location[i].x=width;
  70.     }
  71.      if(location[i].y>height)
  72.     {
  73.       location[i].y=0;
  74.     }
  75.     else if(location[i].y<0)
  76.     {
  77.       location[i].y=height;
  78.     }
  79.   }
  80.   }
  81. }
  82. Mover mover;

  83. void setup()
  84. {
  85.    size(480,480);

  86.   mover=new Mover();

  87.    smooth();
  88.    //mover.acceleration.x=0.05;
  89.    //mover.acceleration.y=0.05;
  90. }
  91. void draw()
  92. {
  93. fill(255,10);
  94.   rect(0,0,480,480);
  95.     mover.display();
  96.   mover.update();
  97.   mover.checkEdges();

  98. }
复制代码
6.继续练习数组,在网上看到一个画图连线的教程,修改了一下:
  1. int geshu=30;        //设置把圆周等分成的份数
  2. int radius=240;      //设置圆的半径
  3. class yuan
  4. {
  5.   PVector point[]=new PVector[geshu];
  6.   float angle;
  7.   yuan()
  8.   {
  9.      angle= TWO_PI/geshu;  
  10.      for(int i=0;i<geshu;i++)
  11.      {   

  12.        float x = cos(angle * i ) * radius;
  13.        float y = sin(angle * i ) * radius;
  14.        point[i] = new PVector(x,y);
  15.      }
  16.   }
  17.   void drawline()
  18.   {
  19.     smooth();
  20.     strokeWeight(0.5);
  21.     for(int i=0;i<geshu;i++)
  22.     {
  23.       for(int j=i+1;j<geshu;j++)
  24.       {
  25.         line(point[i].x,point[i].y,point[j].x,point[j].y);
  26.       }
  27.     }
  28.   }
  29. }
  30. yuan yuan1;
  31. void setup()
  32. {
  33.   size(480,480);
  34.   yuan1=new yuan();

  35. }
  36. int k=0;
  37. void draw()
  38. {
  39.   rect(0,0,width,height);
  40.   int i=k;
  41.   i++;
  42.   k=i;
  43.   translate(width/2,height/2);
  44.   rotate(0.05*i);              //实现旋转,去掉可画静态图片
  45.   yuan1.drawline();
  46.   //line(0,0,width,height);
  47. }
复制代码
7.继续数组,画个正弦波:
  1. int geshu=314;
  2. class sinx
  3. {
  4.   PVector point[]=new PVector[geshu];
  5.   sinx(float str)
  6.   {
  7.     for(int i=0;i<geshu;i++)
  8.     {
  9.       float x=TWO_PI/geshu*i;
  10.       float y=sin(x+str);
  11.       x=map(x,0,TWO_PI,0,width);
  12.       y=map(y,-1,1,-(height/2),height/2);
  13.       point[i]=new PVector(x,y);
  14.     }
  15.   }
  16.   void drawline()
  17.   {
  18.     smooth();
  19.     strokeWeight(0.5);
  20.     for(int i=0;i<geshu;i++)
  21.     {
  22.       line(point[i].x,point[i].y,point[i].x,0);
  23.     }
  24.   }
  25. }
  26. sinx sinx1;
  27. void setup()
  28. {
  29.   size(480,240);
  30.   sinx1=new sinx(0);
  31. }
  32. int k=0;
  33. void draw()
  34. {
  35.   rect(0,0,width,height);
  36.   int i=k;
  37.   i++;
  38.   k=i;
  39.   translate(0,height/2);
  40. sinx1=new sinx(i*TWO_PI/geshu);
  41. sinx1.drawline();

  42. }
复制代码
好了,先把以前学的先记着这儿了。
回复

使用道具 举报

发表于 2016-8-1 19:40:07 | 显示全部楼层
我的经历和你很像,我也很喜欢processing,也做过一些项目,现在也算在机关里面了,求微信交流
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-8-6 13:21:31 | 显示全部楼层
又好久没弄了,前两天按网上搜到的方法,写了个图片马赛克化的小程序,感觉有点问题,用这种方法运算速度好慢啊,15000个点就要等半分钟。另外学习《代码本色》第二章,力,按照书上的方法编了个小球自由下落的程序。但是发现个问题,如果小球有初速度,或者重力的值取大点,就会产生阻尼,不知道书上作者发现没有,我想了个方法把一个小球时候的问题解决了,但是多个小球的时候问题依然存在,因为用到了一个全局变量,但是多个小球的时候,一个全局变量是不够的,以后再想这个问题了。
1,图片马赛克:
  1. PImage photo;
  2. int geshu=15000; //设置取样点数,越多,图像越清楚,但速度越慢。
  3. photo=loadImage("222.jpg");  //随便找个jpg图片,改个名字放在程序目录当原始图片。
  4. int d=int(sqrt(photo.width*photo.height/(PI*geshu))*4);

  5. size(photo.width,photo.height);

  6.   for(int i=0;i<geshu;i++)
  7.     {
  8.      int x=int(random(photo.width));
  9.      int y=int(random(photo.height));
  10.   // size(photo.width,photo.height);
  11.     int xy=x+y*photo.width;
  12.     loadPixels();
  13.     float r=red(photo.pixels[xy]);
  14.     float g=green(photo.pixels[xy]);
  15.    float b=blue(photo.pixels[xy]);
  16.     fill(r,g,b);
  17.      noStroke();
  18.    //   ellipse(x,y,d,d);
  19.      rect(x,y,d,d);
  20. }
复制代码
2.随机颜色重力小球:
  1. //   int geshu=20;
  2. int flag=0;
  3. float t;

  4. class Mover
  5. {

  6.   PVector  location ;
  7.    PVector v;
  8.   PVector acceleration;
  9.   float mass;
  10.   float d;
  11.   color yanse;
  12.     Mover()
  13.   {
  14.        location=new PVector(random(width),random(height));
  15.        v=new PVector(random(-5,5),random(-5,5));
  16.         acceleration=new PVector(random(-5,5),random(-5,5));;
  17.         mass=random(1,5);
  18.       // mass=1;
  19.         d=map(mass,1,5,5,20);
  20.         yanse=color(int(random(0,255)),int(random(0,255)),int(random(0,255)));
  21.    }
  22.   void applyForce(PVector force)
  23.   {
  24.      PVector f=PVector.div(force,mass);
  25.      acceleration.add(f);
  26.   
  27.   }
  28.   void update()
  29.   {
  30.     v.add(acceleration);
  31.     location.add(v);
  32.     acceleration.mult(0);

  33.   }
  34.    
  35.   void display()
  36.   {

  37.     //noStroke();
  38.     fill(yanse);
  39. //    for(int i=0;i<geshu;i++)
  40. //    {
  41.       ellipse(location.x,location.y,d,d);
  42.    
  43. //    }
  44.   }
  45.   
  46.   
  47.   void checkEdges()
  48.   {
  49.    
  50.       if(location.x>width)
  51.     {
  52.       location.x=width;
  53.       v.x*=-1;
  54.     }
  55.     else if(location.x<0)
  56.     {
  57.       location.x=0;
  58.        v.x*=-1;
  59.     }
  60.      if((location.y>height)&&(flag==0))
  61.     {
  62.       location.y=height;
  63.       v.y*=-1;
  64.       t=v.y;
  65.        flag=1;
  66.     }
  67.     else if((location.y>height)&&(flag!=0))
  68.     {
  69.        location.y=height;
  70.           v.y=t;
  71.       
  72.     }

  73.   }
  74.   }
  75. Mover mover;

  76. void setup()
  77. {
  78.    size(480,480);

  79.   mover=new Mover();


  80.    smooth();
  81.   
  82. }

  83. void draw()

  84. {
  85.   
  86.    PVector gravity=new PVector(0,0.1*mover.mass);

  87. fill(255,0);
  88.   rect(0,0,480,480);
  89.     mover.display();
  90.     mover.applyForce(gravity);
  91.   mover.update();
  92.   mover.checkEdges();


  93. }
复制代码
3.多个小球:
  1. //   int geshu=20;
  2. int flag=0;
  3. float t;

  4. class Mover
  5. {

  6.   PVector  location ;
  7.    PVector v;
  8.   PVector acceleration;
  9.   float mass;
  10.   float d;
  11.   color yanse;
  12.     Mover()
  13.   {
  14.        location=new PVector(random(width),random(height));
  15.        v=new PVector(random(-5,5),random(-5,5));
  16.         acceleration=new PVector(random(-5,5),random(-5,5));;
  17.         mass=random(1,5);
  18.       // mass=1;
  19.         d=map(mass,1,5,5,20);
  20.         yanse=color(int(random(0,255)),int(random(0,255)),int(random(0,255)));
  21.    }
  22.   void applyForce(PVector force)
  23.   {
  24.      PVector f=PVector.div(force,mass);
  25.      acceleration.add(f);
  26.   
  27.   }
  28.   void update()
  29.   {
  30.     v.add(acceleration);
  31.     location.add(v);
  32.     acceleration.mult(0);

  33.   }
  34.    
  35.   void display()
  36.   {

  37.     //noStroke();
  38.     fill(yanse);
  39.   //  for(int i=0;i<geshu;i++)
  40.    // {
  41.       ellipse(location.x,location.y,d,d);
  42.    
  43.   //  }
  44.   }
  45.   
  46.   
  47.   void checkEdges()
  48.   {
  49.    
  50.       if(location.x>width)
  51.     {
  52.       location.x=width;
  53.       v.x*=-1;
  54.     }
  55.     else if(location.x<0)
  56.     {
  57.       location.x=0;
  58.        v.x*=-1;
  59.     }
  60.      if((location.y>height)&&(flag==0))
  61.     {
  62.       location.y=height;
  63.       v.y*=-1;
  64.       t=v.y;
  65.        flag=1;
  66.     }
  67.     else if((location.y>height)&&(flag!=0))
  68.     {
  69.        location.y=height;
  70.           v.y=t;
  71.       
  72.     }

  73.   }
  74.   }
  75. Mover[] movers=new Mover[10];

  76. void setup()
  77. {
  78.    size(480,480);
  79. for(int i=0;i<movers.length;i++)
  80. {
  81.    movers[i]=new Mover();
  82. }
  83. //  mover=new Mover();


  84.    smooth();
  85.   
  86. }

  87. void draw()

  88. {
  89.   
  90.    

  91. fill(255,10);
  92.   rect(0,0,480,480);
  93.     for(int i=0;i<movers.length;i++)
  94.     {
  95.       PVector gravity=new PVector(0,0.1*movers[i].mass);
  96.     movers[i].display();
  97.     movers[i].applyForce(gravity);
  98.   movers[i].update();
  99.   movers[i].checkEdges();
  100.   flag=0;
  101.     }

  102. }
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-8-6 13:22:57 | 显示全部楼层
雨中漫步 发表于 2016-8-1 19:40
我的经历和你很像,我也很喜欢processing,也做过一些项目,现在也算在机关里面了,求微信交流

呵呵,我就是随便学着玩玩,菜鸟一枚,就在论坛里交流吧
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|联系我们|极客工坊 ( 浙ICP备09023225号 )

GMT+8, 2019-2-18 13:10 , Processed in 0.046086 second(s), 24 queries .

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表