分享

个人见到的processing(优质且全的教程,一定看原文)

 hh3755 2013-08-28

介绍

语法可以认为就是Java

运行:

processing-java --output=/tmp/processing-xx --run --force --sketch=/home/ning/soft/processing-2.0b8/modes/java/examples/Demos/Graphics/

基础

每個sketch( 也就是每個Processing project)在電腦中是以一個 [資料夾]存在,資料夾中存放sketch相關的程式碼(.pde檔)及影音資料(另存放在[data]資料夾中)

变量

区分大小写 类型: - int 整數 例:3, 20, -5, 0 - float 浮點數 例:1.2301, -0.02 - String 字串 例:"互動程式設計" - boolean 布林值 例:True/False

坐标

X軸是向右漸增, Y軸是向下漸增, Z軸是向外漸增

imgs/processing-cord.png

判断

< == > != >= <= && || !

Object & Class

3D

pushMatrix();
translate(width/2, height/2);
rotateX(1);
box(150);
popMatrix();

这在需要多个坐标系的情况下很有用. 比如地球绕太阳公转.

lights(); //在draw里面调用即可.

看教程

Processing Tutorial 视频01-24 (7:29:00)

这个教程的一个好处是,还会介绍一些常用的库. 不介绍每个函数, ellipse, box 的参数, 很适合有程序经验的同学.

imgs/processing-tutorial.png

多个文件之间,想当于直接把多个文件放在一起执行. 同一个project 里面,不需要import

循环

for (int i=0;i<20;i++) {
  for (int j=0;j<20;j++) {
    if (i<10) {
      fill(255, 0, 0);
    }else{
      fill(255, 255, 0);
    }

    ellipse(i*20, j*20, 20, 20);

  }
}

函数

函数可以写在函数里面.

class

Ball myBall;
void setup() {
  size(600, 600);
  background(0);
  myBall = new Ball(500, 100);
}

void draw()
{
  myBall.display();
}

class Ball{
  int x = 500;
  int y = 500;

  Ball(int x, int y){
    this.x = x;
    this.y = y;
  }
  void display(){
    ellipse(x, y, 20, 20);
  }
}

Ball bounce & gravity 跳跃和重力

这就是我当年在文曲星上写的啊.. 当时我还加了阻力.

imgs/processing-turorial-ning1.png
void bounce() {
  if (x>width || x < 0) {
    speedX *= -1;
  }
  if (y >height || y<0) {
    speedY *= -1;
  }
}
void gravity(){
  speedY += 0.2;
}

数组

Ball[] balls = new Ball[20];

for (int i=0;i<balls.length;i++){
    balls[i] = new Ball(random(0, width), random(0, height), 5, 5);
}

ArrayList

发现和Java几乎一样, 不过Java 几乎都忘了.

不需要范型. 哈哈:

ArrayList myList;
mylist.add(new Ball(200, 200));
mylist.size();
mylist.get(1);

External Libraries

http:///reference/libraries/

如: http:///

放在 sketchbook 的libraries 下:

(ENV)ning@ning-laptop ~/idning/langtest/processing/sketchbook/libraries$ ll
total 32K
5022553 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 verletphysics
5022577 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 volumeutils
5022429 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 audioutils
5022441 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 colorutils
5022457 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 datautils
5022470 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 simutils
5022505 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 toxiclibscore
5022495 drwx------ 5 ning ning 4.0K 2013-03-09 11:29 toxiclibs_p5

重启processing.

我们可以通过 $ cp -r libraries/ libs2 把libraries 当成一个sketch 浏览. 看它的例子:

imgs/processing-turorial-libraries.png
toxiclib.Vec3d (11-12)

一个 Vec 表示一个点. (有x, y, z)

toxi 库里面的:

Vec3D loc = new Voc3D(0, 0, 0);
ellipse(loc.x, loc.y, 20, 20);

Vec3D speed = new Voc3D(1, 0, 0);

可以加减:

loc.addSelf(speed);
loc.normalize(); //变成1.
loc.scaleSelf(100); //乘以100.

注意, 向量加法(平行四边形)
Vec3D newVec = loc.add(speed) ; 不一样. 产生一个新的vec.
imgs/processing-turorial-vec3d-add.png

Agents

全局变量, 不分文件.

imgs/processing-turorial-cool1.png

这是一个稍微复杂的 粒子模型. 可以模拟扩散, 聚合. (应该不是按照物理规律的.)

imgs/processing-turorial-cool2.png

3D

PeasyCam

不兼容Processing 2.0

camera()

camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ)

The default values are camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0)

PeasyCam

实现鼠标控制的Cam, 很好.

A mouse driven camera-control library for 3D sketches.

UI

提供 滑块 等元素

Follow Mouse

这个我在flash 做过.

输出&输入

imgs/processing-turorial-17_3d_grid.png

这个3d图不错.

PrintWriter output;
output = createWrite("data/points.csv");

if (keyPressed) {
  for (int i=0; i<cols; i++) {
    for (int j=0; j<cols; j++) {
      Vec3D loc = grid[i][j].loc;
      output.println(loc.x + "," + loc.y + "," + loc.z);
    }
  }

  output.flush();
  output.close();
}

注意单引号,双引号不同.

例子

递归(t19, 520)

很简单, 可以自己实现

实现Spring

这也是我从前用Flash 搞过 . 它用的是 toxi 的VerletPhyiscs 库.

verlet VerletParticle. 粒子. VerletSpring. 弹簧.

GravityBehavior()

imgs/processing-turorial-spring.png

Eclipse

比Processing 编辑器好.

proclipsing, 它是用java 来的:

package eclipseprocessingprj;
import processing.core.PApplet;

public class EclipseProcessingPrj extends PApplet {
    public void setup() {
        size(600, 600);

    }

    public void draw() {
        background(0);
        stroke(255, 0, 0);
        fill(255);
        ellipse(mouseX, mouseY, 15, 15);
    }

    public static void main(String _args[]) {
        PApplet.main(new String[] { eclipseprocessingprj.EclipseProcessingPrj.class.getName() });
    }
}
imgs/processing-eclipse-cool.png

原来, size, background, stroke, fill 等等都是PApplet 类的方法. processing 就是一个完整彻底的java, 它每次把写的代码包在一个.java 里面去run 就行了. 所以在Eclipse 里面能够有完整的代码提示. 错误检查 不过用Class 的方法略有不同.(在Processing 环境里面是把所有代码合在一起包在 PApplet 里面.)

资料

视频

hello world Processing: http://www.tudou.com/programs/view/ilYm5UpnXMw/

视频教程:

processing 的下载包中包含了多本书的Demo:

- Getting STarted
- Nature of Code
- Processing Handbook
- Visualizing Data

范例网站

[Processing作品收集] http://www./ (closed) http://www.open/ [Processing範例搜尋] http://builtwith/browser/browse.php

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多