爱上Processing－4 高阶
这一次介绍Processing中的函数、对象和数组，是不是很熟悉？C++之类面向对象的语言里差不多都学过了。
1 函数
下面是一个画猫头鹰的代码，调用了两次函数，画出了两只猫头鹰。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
void setup() { size(480, 120); smooth(); } void draw() { background(204); owl(110, 110); owl(180, 110); } void owl(int x, int y) { pushMatrix(); translate(x, y); stroke(0); strokeWeight(70); line(0, -35, 0, -65); noStroke(); fill(255); ellipse(-17.5, -65, 35, 35); ellipse(17.5, -65, 35, 35); arc(0, -65, 70, 70, 0, PI); fill(0); ellipse(-14, -65, 8, 8); ellipse(14, -65, 8, 8); quad(0, -58, 4, -51, 0, -44, -4, -51); popMatrix(); } |
当然，函数也可以有返回值，在函数声明中用返回值的类型代替void即可，然后在函数的最后加上return语句。
再来一个画很多不同猫头鹰的例子吧。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
void setup() { size(480, 120); smooth(); } void draw() { background(204); randomSeed(0); for (int i = 35; i < width + 40; i += 40) { int gray = int(random(0, 102)); float scalar = random(0.25, 1.0); owl(i, 110, gray, scalar); } } void owl(int x, int y, int g, float s) { pushMatrix(); translate(x, y); scale(s); stroke(g); strokeWeight(70); line(0, -35, 0, -65); noStroke(); fill(255 - g); ellipse(-17.5, -65, 35, 35); ellipse(17.5, -65, 35, 35); arc(0, -65, 70, 70, 0, PI); fill(g); ellipse(-14, -65, 8, 8); ellipse(14, -65, 8, 8); quad(0, -58, 4, -51, 0, -44, -4, -51); popMatrix(); } |
2 对象
对象将相关的数据和行为包装了起来，接下来写一个机器人类，啊，又是它……
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Robot bot1; Robot bot2; void setup() { size(720, 480); bot1 = new Robot("robot1.svg", 90, 80); bot2 = new Robot("robot2.svg", 440, 30); smooth(); } void draw() { background(204); // 更新和显示第一个机器人 bot1.update(); bot1.display(); // 更新和显示第二个机器人 bot2.update(); bot2.display(); } class Robot { float xpos; float ypos; float angle; PShape botShape; float yoffset = 0.0; // 在构造函数中设置初始值 Robot(String svgName, float tempX, float tempY) { botShape = loadShape(svgName); xpos = tempX; ypos = tempY; angle = random(0, TWO_PI); } // 更新字段 void update() { angle += 0.05; yoffset = sin(angle) * 20; } // 绘制机器人到屏幕上 void display() { shape(botShape, xpos, ypos + yoffset); } } |
3 数组
数组就更没啥好说了，python里面的list，php里面的array，异曲同工。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
float[] x = new float[3000]; void setup() { size(240, 120); smooth(); noStroke(); fill(255, 200); for (int i = 0; i < x.length; i++) { x[i] = random(-1000, 200); } } void draw() { background(0); for (int i = 0; i < x.length; i++) { x[i] += 0.5; float y = i * 0.4; arc(x[i], y, 12, 12, 0.52, 5.76); } } |
再来看一个跟随鼠标并渐变的例子，其实就是用两个数组保存一系列鼠标位置。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
int num = 60; int x[] = new int[60]; int y[] = new int[60]; void setup() { size(240, 120); smooth(); noStroke(); } void draw() { background(0); for (int i = x.length - 1; i > 0; i--) { x[i] = x[i - 1]; y[i] = y[i - 1]; } x[0] = mouseX; y[0] = mouseY; for (int i = x.length - 1; i >= 0; i--) { fill(255 - i * 4); ellipse(x[i], y[i], 40, 40); } } |
23
2016-06