http://processingjs.org/articles/PomaxGuide.html
通過前邊的學習，我們知道了可以寫processing，可以寫js，也可以混寫。。。具體有什麼區別呢，我們從實際問題角度出發考慮。
什麼是Processing?
Processing語言是一門着重於數據可視化的編程語言。數據是一個寬泛的概念。從在屏幕上畫線畫圓，到交互動畫，它可以用來做很多事。事實上，一個基本的P5程序只幾行代碼就能做個動畫了。
像這樣
1 void setup() { size(..., ...); }
2 void draw() {}下面來個完整的動畫
hello processing.html
<!DOCTYPE html>
<html>
<head>
<title>hello processing</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<script src="processing.js"></script>
<canvas data-processing-sources="controling.pde"></canvas>
</body>
</html>controling.pde
float framerate = 24; //草圖幀率
int ball_x; // 小球x座標
int ball_y; // 小球y座標
int ball_radius = 20; // 小球半徑
void setup() {
size(200,200); // 區域
frameRate(framerate); // 設置幀率
ball_x = width/2; // 設置小球x座標
ball_y = ball_radius; // 設置小球y座標
stroke(#003300); // 邊框顏色
fill(#0000FF); // 邊框內顏色
}
void draw() {
//計算小球的高度
float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
//左上角（0,0）
float ball_height = height - (bounce_height+ball_radius);
// 清空畫圖區
background(#FFFFEE);
// 設置新位置
ball_y = (int) (ball_height);
// 畫球
ellipse(ball_x,ball_y,ball_radius,ball_radius);
}processing.js
http://processingjs.org/download/ 下載
效果：
變量的類型：boolean
bype
char
color
int
long
float
double
更爲複雜的：object
string
ArrayList
HashMap （存儲{, }對）
XMLElement
基本函數：
size(int, int) 設置畫圖區域的尺寸
frameRate(int) 幀率
stroke(color)邊框色
fill(color) 內部色
abs(number) 計算絕對值
sin(number) 計算三角函數值
background(color) 設置背景色
ellipse(int, int, int, int)畫一個圓(位置x，位置y，半徑r，半徑r）
支持面向對象編程，栗子可以改寫爲面向對象形式：
1 Bouncer bouncer;
2
3 void setup() {
4 size(200,200);
5 frameRate(24);
6 stroke(#003300);
7 fill(#0000FF);
8 bouncer = new Ball(width/2,20,20);
9 }
10
11 void draw() {
12 bouncer.computeNextStep(width, height, frameRate);
13 background(#FFFFEE);
14 bouncer.draw();
15 }
16
17 interface Bouncer {
18 void computeNextStep(int width, int height, float framerate);
19 void draw();
20 }
21
22 class Ball implements Bouncer
23 {
24 int x,y,radius;
25 int step = 0;
26
27 Ball(int x, int y, int r) {
28 this.x = x;
29 this.y = y;
30 this.radius = r;
31 }
32
33 void computeNextStep(int sketch_width, int sketch_height, float frame_rate) {
34 step++;
35 float sin_value = abs(sin(PI*step/(float)frame_rate));
36 float bounce_height = sketch_height/2 * sin_value;
37 float ball_height = sketch_height - (bounce_height + radius);
38 y = (int) (ball_height);
39 }
40
41 void draw() {
42 ellipse(x,y,radius,radius);
43 }
44 }效果不變。但是在這種方式下，我們就能很容易的更改一些東西，比如彈跳對象：球——>方塊；
修改controling.pde
Bouncer bouncer;
void setup() {
size(200,200);
frameRate(24);
stroke(#003300);
fill(#0000FF);
bouncer = new Box(width/2,20,20,20);
}
void draw() {
bouncer.computeNextStep(width, height, frameRate);
background(#FFFFEE);
bouncer.draw();
}
interface Bouncer {
void computeNextStep(int width, int height, float framerate);
void draw();
}
class Box implements Bouncer
{
int x,y,w,h;
int step = 0;
Box(int x, int y, int w,int h) {
this.x = x;
this.y = y;
this.w=w;
this.h=h;
}
void computeNextStep(int sketch_width, int sketch_height, float frame_rate) {
step++;
float sin_value = abs(sin(PI/2.0 + (PI*step/(float)frame_rate)));
float bounce_height = sketch_height/2 * sin_value;
float ball_height = sketch_height - (bounce_height + h);
y = (int) (ball_height);
}
void draw() {
rect(x,y,w,h);
}
}
今天先到這兒，明天我們讓多物體一起彈彈彈！