# Processing 008 平移、放缩、旋转变换、相对变换和绝对变换

Processing 008 平移、放缩、旋转变换、相对变换和绝对变换

平移变换

用 translate 函数可以平移坐标

translate(x, y); // 将坐标向右平移x， 向下平移 y

这个函数可以作用在此函数之后所有的绘图上，例如我们想绘制很多的椭圆

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
  x = 100;
  y = 100;
  
  translate(-34, -24);
  for(int i = 0; i < 10; i++){
    translate(0, 48);
    for(int j = 0; j < 10; j++){
      translate(68, 0);
      ellipse(0, 0, 60, 40);
    }
    translate(-680, 0);
  }
}

所以这里的translate相当于是相对平移，即在上一次结果上平移，如果想用绝对坐标，可以在每一次平移后调用 resetMatrix

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
  x = 100;
  y = 100;
  
  for(int i = 0; i < 10; i++){
    for(int j = 0; j < 10; j++){
      translate(i * 68 + 34, j * 48 + 24);
      ellipse(0, 0, 60, 40);
      resetMatrix();
    }
  }
}

上面两段代码的运行效果是一样的。

也可以在 draw 函数中绘制，需要注意的是 draw 函数每次调用完会自动 resetMatrix

float x, y;

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
  x = 0;
  y = 0;
}

void draw(){
  translate(x * 68 + 34, y * 48 + 24);
  ellipse(0, 0, 60, 40);
  x += 1;
  if(x == 10){
    x = 0;
    y += 1;
    if(y == 10){
      y = 0;
    }
  }
}

放缩变换

用 scale 进行放大缩小

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
  ellipse(200, 200 , 100, 50);
  scale(2, 2);
  ellipse(200, 200 , 100, 50);
}

需要注意的是所有的变换都是针对整个坐标系的而不是单个图形，所以如果想原地缩放的话，需要平移到原点之后再缩放，或者是直接以原点为基准绘制，绘制完成的基础上再平移到指定位置。

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
  translate(width / 2 , height / 2);
  scale(4, 3);
  ellipse(0, 0 , 50, 50);
}

旋转变换

用 rotate 进行旋转变换

float alpha = 0;

void setup() {
  background(255);
  size(680, 480);
  fill(#00FF00, 255);
}


void draw(){
    translate(width / 2 , height / 2);
    rotate(alpha);
    ellipse(0, 0 , 200, 100);
    alpha += 0.05;
}

需要注意的是rotate 旋转的是弧度而非角度，可以用下列函数进行转换

rotate(radians(degree)); // 角度转弧度

弧度转角度

degrees(rad);