平移、旋转、缩放和媒体

一、平移

1.1translate（）函数

做转换工作可以用translate()函数，这个函数可以改变坐标系。通过改变默认的坐标系，我们可以创建不同的转换方式，包括平移、旋转和缩放。

1.2平移位置案例

案例代码如图1

图1

保存运行如图2

图2

这个案例中圆的位置是（0，0），但它在整个屏幕中移动，因为它受translate（）函数影响。代码中translate（）函数设置屏幕中（0，0）的坐标为（mouseX，mouseY），每次draw（）函数运行，ellipse（）函数会在新的位置绘制圆，也就是当前鼠标位置。

注意：如果没有写background（）函数，那么圆会随着鼠标的移动不断更新位置并绘制新的圆，代码如图3

图3

保存运行如图4

图4

1.3多重变换

当一个平移被执行之后，它会被应用于接下来所有的绘图方法中。案例代码如图5

图5

保存并运行如图6

图6

此案例中，第二个小圆的位置被移动了mouseX+40，mouseY+15的距离。这两个圆的位置都是（0，0），但translate（）函数使得两个圆都移动到不同的位置。当然，再draw()函数中位移的信息叠加起来，但它们都会在每次运行draw()函数开始被重置。

二、旋转

2.1rotate()函数

rotate()函数会旋转整个坐标系。它有一个参数，是要旋转的角度（用弧度制表示）。它总是相对于（0，0）旋转，也就是沿着原点旋转。

2.2沿角旋转

案例代码如图7

图7

保存运行如图8

图8

此案例size()函数设定的窗口高度为240，所以mouseX会是0~120，mouseX/100.0会是0~2.4。（注意：120是除以100.0，而不是100）。

2.3中心旋转

一个图形想沿自己的中心上进行旋转，则它的中心必须绘制在（0，0）上。案例代码如图9

图9

保存并运行如图10

图10

图9中图形由rect（）函数设定宽为160，高20像素的矩形。因此设置矩形中心的位置是（-80，-10）的坐标上代替（0，0）成为图形的中心。

2.4移动然后再旋转

为了让一个图形沿中心旋转并在屏幕中沿着原点移动。我们可以先用translate（）函数，接着用rotate（）函数，最后绘制图形让它的原点在（0，0）上。代码如图11

图11

保存并运行如图12

图12

2.5旋转然后再移动

代码如图13

图13

保存并运行如图14

图14

代码运行时，矩形是沿着窗口左上角进行旋转的，距离顶角的位置由translate（）函数决定，而translate（）函数设的值是（mouseX，mouseY），由鼠标决定。

2.6一个关节臂

在这个例子中，我们使用一系列translate（）函数和rotate（）函数来创造一个前后弯曲的连接臂。每一个translate（）函数都进一步移动线的位置，每一个rotate（）函数都叠加在上一个旋转以上进一步弯曲。代码如下

float angle=0.0;
float angleDirection=1;
float speed=0.005;
void setup(){
size(240,120);
}
void draw(){
background(204);
translate(20,25);
rotate(angle);
strokeWeight(12);
line(0,0,40,0);
translate(40,0);
rotate(angle*2.0);
strokeWeight(6);
line(0,0,30,0);
translate(30,0);
rotate(angle*2.5);
strokeWeight(3);
line(0,0,20,0);
angle+=speed*angleDirection;
if((angle>QUARTER_PI)||(angle<0)){
angleDirection=-angleDirection;
}
}

保存并运行如图15

图15

angle变量从0增长到QUARTET_PI(1/4Π），然后开始减少直至小于0，接着继续循环重复。angleDirection变量的值是1或者-1.这使得angle的值持续增加或者减少。

三、缩放

3.1scale（）函数

scale（）函数可以延展屏幕中的坐标，由于坐标按缩放尺度放大或缩小每一个绘制在窗口的图形也会按尺度放大或缩小，使用scale（3）使原图形放大3悲，scale（0.5）是缩小一半。像rotate（）函数，scale（）函数也沿原点进行变换。为了让一个图形沿中心进行缩放，先移动在缩放，然后将图形的中心绘制在坐标（0，0）上。案例代码如图16

图16

保存并运行如图17

图17

3.2保持描边一致

在图17中，我们可以发现矩形的描边不一致，为了保持描边的一致，需要用所期望的描边粗细除以一个标量值。案例代码如图18

图18

保存并运行如图19

图19

3.3独立的变换

为了使每次变换的效果独立并且不相互影响，可以使用pushMatrix（）和popMatrix（）函数。当pushMatrix（）运行的时候，它保存一个当前坐标系的备份，然后在调用popmatrix()函数之后还原。当希望变换的效果应用在另一个图形中并且不希望影响其他图形时，这是非常有用的。

案例代码如图20

图20

保存并运行如图21

图21

在图21中我们可以看到小矩形总在同一个地方绘制，这是因为translate（mouseX，mouseY）函数的效果被popMatrix()函数抵消了。

3.4机器人

代码如下

float x=60;
float y=440;
int radius=45;
int bodyHeight=180;
int neckHeight=40;
float easing=0.04;
void setup(){
size(360,480);
ellipseMode(RADIUS);
}
void draw(){
strokeWeight(2);
float neckY=-1*(bodyHeight+neckHeight+radius);
background(0,153,204);
translate(mouseX,y);
if(mousePressed){
scale(1.0);
}else{
scale(0.6);
}
//body
noStroke();
fill(255,204,0);
ellipse(0,-33,33,33);
fill(0);
rect(-45,-bodyHeight,90,bodyHeight-33);
//neck
stroke(255);
line(12,-bodyHeight,12,neckY);
//hair
pushMatrix();
translate(12,neckY);
float angle=-PI/30.0;
for(int i=0;i<=30;i++){
line(80,0,0,0);
rotate(angle);
}
popMatrix();
//head
noStroke();
fill(0);
ellipse(12,neckY,radius,radius);
fill(255);
ellipse(24,neckY-6,14,14);
fill(0);
ellipse(24,neckY-6,3,3);
}