[ 课件 ] DAY2 - Processing Workshop @ xinchejian

[RavenKwok]

pdf 下载链接。

http://vdisk.weibo.com/s/UkxC/1319464380

2012年2月8日更新pdf 下载链接。（由于第二期课程时间压缩的关系，该版本是原第一期课程的DAY1 与DAY2 的合并版）

http://vdisk.weibo.com/s/1y7NR

内容涉及进阶的2D绘制，变量与条件句的概念与应用。

欢迎下载，交流。

[RavenKwok]

DAY1 的课程中有介绍了Processing 默认的二维绘制的坐标系。这里再提一下，左上角为(0,0) 位置，越往右，x值越大，这点与笛卡尔坐标系相同。而不同的是，越往下，y值越大，这点与笛卡尔坐标系正好相反。

如下图。



而后，DAY1 作业中布置的Stan Marsh 绘制，由于其眼睛的两个椭圆略有一定角度的旋转倾斜。所以很多童鞋想知道如何用Processing 中的命令来实现这个效果。
这里就来介绍一下两个函数，translate(); & rotate();

先讲一下translate()，在二维绘制的情况下，我们可以给这个函数加入两个参数，即坐标系在x 方向与y 方向上的偏移值。translate(x 方向的偏移值,y 方向的偏移值);
执行完translate 之后，默认的坐标系就发生了一定程度的偏移。如下图。



执行了translate(250,250); 之后原来的坐标系的位置（蓝色）被平移到了红色位置。若在该translate 命令之前绘制一个半径为50 的正圆 ellipse(0,0,100,100); 正圆将被绘制在场景的左上角，而若在该translate 命令之后同样执行ellipse(0,0,100,100); 正圆则将被绘制在场景的正中央（由于坐标系发生了偏移）。

各位童鞋可以复制以下的代码到Processing 中运行观看效果。

程序代码

void setup(){
  size(500,500);
  smooth();
}
void draw(){
  background(255);
  fill(100);
  noStroke();
  ellipse(0,0,100,100);
  translate(250,250);
  ellipse(0,0,100,100);
}

平移之后，接着讲一下rotate() 旋转。
与translate() 一样，rotate() 也是作用于坐标系（而非绘制的图形）。他能使得坐标系进行旋转偏移。rotate(需要旋转的弧度); 注意！是弧度而非角度。当然我们也可以用radians() 函数来完成角度到弧度的转化。
譬如，当执行了rotate(PI/4); 命令后，原来的坐标系的位置（蓝色），以(0,0) 为旋转中心，被旋转到了红色位置。如下图。



需要注意的是若translate() 与rotate() 执行的先后顺序不同，最终效果是完全不同的，这里上图例说明。

translate(250,0);
rotate(PI/4);
//先在x轴方向平移250个像素，然后整体坐标系顺时针旋转45度。



而若改变执行顺序，效果则完全不同。

rotate(PI/4);
translate(250,0);
//整体坐标系先顺时针旋转45度，然后在旋转后的x轴方向平移250个像素。

[Timo]

課程真心搞笑！！！我不行啦！！！

[RavenKwok]

@Timo

为何搞笑?

[yuanyuan]

我在看那本中文的书，有些地方不懂，麻烦告诉一下，不知道发在这里可不可以。。
这个音频可以顺利播放，可是程序有的地方看不太懂。
在附件图片中的红色块部分的1024是代表什么意思，指定采样缓冲是什么？
麻烦了。。。

[RavenKwok]

@yuanyuan

不客气拉。

1024 表示的是音频的缓冲区大小。具体大小根据你电脑的硬件性能来定，太大容易造成延迟，太小容易造成爆音。（1024就是一个比较理想的数值）具体的参数位置所指代的内容其实可以参考Minim 的Javadoc。

http://code.compartmental.net/minim/javadoc/