http://qiita.com/r-ngtm/items/e4df707d45b097999776 2番目の図のgifを出力するProcessingコード

graph2.pde

///////////////////////////////////////////////////////////
// 動作環境: processing-2.2.1    Windows10
// Gif書き出しには GifAnimation のインストールが必須です
///////////////////////////////////////////////////////////

// import gifAnimation.*;
// GifMaker gifExport;

// 色
final color WHITE = color(255);
final color DARK_WHITE = color(202);
final color BLACK = color(0);
final color BRIGHT_BLACK = color(45);
final color ALPHA_BLACK = color(0, 0, 0, 200);
final color ALPHA_WHITE = color(255, 255, 255, 150);
final color GRAY = color(55);
final color RED = color(255, 100, 0);
final float SPEED = 1.1f;
final float DISTANCE_SCALE = 140.0f;

// 時間
float time = 0;

// 初期化
void setup(){
  size(640, 310);

  // gif出力の初期化
  // frameRate(50);
  // gifExport = new GifMaker(this, "export.gif");
  // gifExport.setRepeat(0);
  // gifExport.setQuality(10);
  // gifExport.setDelay(20);
}

// 描画
void draw() {
  time += SPEED / frameRate;
  background(WHITE);
  stroke(BLACK);
  noFill();
  rectMode(CORNER);
  rect(0, 0, width-1, height-1);

  float cameraRadian = radians(15);
  float length = width * 0.9f - 20f;
  float axisLength = length * 0.84f + 10f;
  float rayLangth = length * 1.67f;
  float rectDistance = map(-cos(time), -1, 1, DISTANCE_SCALE, DISTANCE_SCALE * 2);
  float rectSize = rectDistance * tan(cameraRadian);
  float screenX = 95.0f;
  float screenY = height / 4f;
  float projectionX = screenX;
  float projectionY = screenX * tan(cameraRadian) - 2;

  // 距離の表示
  textAlign(CENTER, CENTER);
  text("d = " + nf(rectDistance / DISTANCE_SCALE, 0, 2), width/2f + 4, height - 20f);

  // 平行移動
  translate(80, height/2);

  ///////////////////////////////////////////////////////////////////
  // 視野の表示
  ///////////////////////////////////////////////////////////////////
  strokeWeight(1);
  stroke(GRAY);
  fill(DARK_WHITE);
  arc(0, 0, rayLangth, rayLangth, -cameraRadian, cameraRadian, PIE);

  ///////////////////////////////////////////////////////////////////
  // 四角形の表示
  ///////////////////////////////////////////////////////////////////
  rectMode(CENTER);
  strokeWeight(1);
  stroke(GRAY);
  fill(WHITE);
  rect(rectDistance + rectSize, 0, rectSize * 2, rectSize * 2);

  ///////////////////////////////////////////////////////////////////
  // 矢印の表示
  ///////////////////////////////////////////////////////////////////
  stroke(BLACK);
  strokeWeight(1);
  arrow(0, 0, axisLength, 0);

  ///////////////////////////////////////////////////////////////////
  // スクリーンの表示
  ///////////////////////////////////////////////////////////////////
  stroke(BRIGHT_BLACK);
  strokeWeight(3f);
  line(screenX, -screenY, screenX, screenY);
  stroke(WHITE);
  strokeWeight(1f);
  line(projectionX, -projectionY, projectionX, projectionY);

  ///////////////////////////////////////////////////////////////////
  // 補助線の表示 (四角形とカメラの距離)
  ///////////////////////////////////////////////////////////////////
  stroke(ALPHA_BLACK);
  noFill();
  bezier(
    0, 0, // first anchor point
    64, 10,
    rectDistance - 64, 10,
    rectDistance, 0 // second  anchor  point
  );

  String rectDistanceLabel = "d";
  float rectDistanceLabelWidth = textWidth(rectDistanceLabel);
  float rectDistanceLabelX = rectDistance / 2 - 2;
  float rectDistanceLabelY = 13f;
  stroke(BLACK);
  fill(WHITE);
  textAlign(CENTER, CENTER);
  fill(BLACK);
  text(rectDistanceLabel, rectDistanceLabelX, rectDistanceLabelY);

  ///////////////////////////////////////////////////////////////////
  // 補助線の表示 (四角形サイズ)
  ///////////////////////////////////////////////////////////////////
  stroke(ALPHA_BLACK);
  noFill();
  bezier(
    rectDistance, -rectSize, // first anchor point
    rectDistance - 12, -rectSize/2,
    rectDistance - 12, +rectSize/2,
    rectDistance, rectSize // second  anchor point
  );
  stroke(BLACK);
  fill(WHITE);
  String rectSizeLabel = "d * L";
  float rectSizeLabelWidth = textWidth(rectSizeLabel);
  float rectSizeLabelX = rectDistance - rectSizeLabelWidth/2 - 2;
  float rectSizeLabelY = 0f;
  fill(BLACK);
  textAlign(CENTER, CENTER);
  text(rectSizeLabel, rectSizeLabelX - 7, rectSizeLabelY - 14);
  noFill();
  bezier(
    rectDistance, rectSize, // first anchor
    rectDistance + rectSize * 0.5, rectSize + 10,
    rectDistance + rectSize * 1.5, rectSize + 10,
    rectDistance + rectSize * 2.0, rectSize // second  anchor
  );
  text(rectSizeLabel, rectDistance + rectSize, rectSize + 14);

  ///////////////////////////////////////////////////////////////////
  // 角度の表示
  ///////////////////////////////////////////////////////////////////
  float angleLabelX = +57;
  float angleLabelY = -10;
  float angleLabelWidth = 18;
  float angleLabelHeight = 12;
  float angleSize = 85;
  strokeWeight(1);
  stroke(BLACK);
  noFill();
  arc(0, 0, angleSize, angleSize, -cameraRadian + radians(1), -radians(1));
  textAlign(CENTER, CENTER);
  fill(BLACK);
  text("θ", angleLabelX, angleLabelY);

  ///////////////////////////////////////////////////////////////////
  // 以下、テキスト表示
  ///////////////////////////////////////////////////////////////////
  fill(BLACK);
  textAlign(LEFT, CENTER);
  text("カメラの向き", axisLength + 4, -2);
  stroke(BLACK);
  fill(WHITE);
  textAlign(RIGHT, CENTER);

  String cameraLabel = "カメラ";
  float cameraX = -15 - 20;
  float cameraY = -1;
  rect(cameraX + 5, cameraY + 1, textWidth(cameraLabel) + 21, 16);
  textAlign(CENTER, CENTER);
  fill(BLACK);
  text(cameraLabel, cameraX, cameraY);

  text("画面", projectionX - 3, screenY + 10);
  text("視野", axisLength - 17, - axisLength * tan(cameraRadian) - 3);

  float projectionArrowToX = projectionX - 5;
  float projectionArrowToY = -projectionY - 5;
  float projectionArrowX = projectionArrowToX - 45;
  float projectionArrowY = projectionArrowToY - 45;
  arrow(projectionArrowX, projectionArrowY, projectionArrowToX, projectionArrowToY);
  textAlign(RIGHT, CENTER);
  text("投影図", projectionArrowX - 11, projectionArrowY - 13);

  float rectArrowToX = rectDistance - 2;
  float rectArrowToY = -rectSize - 2;
  float rectArrowX = rectArrowToX - 46;
  float rectArrowY = rectArrowToY - 46;
  arrow(rectArrowX, rectArrowY, rectArrowToX, rectArrowToY);
  textAlign(RIGHT, CENTER);
  text("オリジナル", rectArrowX - 11, rectArrowY - 13);

  float oneX = DISTANCE_SCALE;
  float twoX = DISTANCE_SCALE * 2;
  line(oneX, +3, oneX, -3);
  line(twoX, +3, twoX, -3);

  // gif書き出し
  // if (t <= 2f * PI){
  //   gifExport.addFrame();
  // }else{
  //   gifExport.finish();
  // }
}

// 矢印を描画する関数
void arrow(float x1, float y1, float x2, float y2){
  float d = dist(x1, y1, x2, y2) - 2;
  float rad = atan2(x2 - x1, y1 - y2);

  pushMatrix();    //現在の座標を保存
  translate(x1, y1);
  rotate(rad);
  stroke(0, 0, 0);
  line(0, 0, 0, -d);
  line(0, -d, 3, -d + 5);
  line(0, -d, -3, -d + 5);
  popMatrix();    //元の座標に戻す
}

以下の図を描画するProcessingコードです