Skip to content

Instantly share code, notes, and snippets.

@rngtm
Last active January 19, 2017 18:06
Show Gist options
  • Save rngtm/16888f0af5226ad697ffbe0a9311d85c to your computer and use it in GitHub Desktop.
Save rngtm/16888f0af5226ad697ffbe0a9311d85c to your computer and use it in GitHub Desktop.
http://qiita.com/r-ngtm/items/e4df707d45b097999776 2番目の図のgifを出力するProcessingコード
///////////////////////////////////////////////////////////
// 動作環境: 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(); //元の座標に戻す
}
@rngtm
Copy link
Author

rngtm commented Jan 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment