3D Turtle Graph

Posted on 2019/12/27, 3:01 PM By admin22

シンプルな手順で複雑なグラフィックが描画できるタートルグラフ。座標を与えてラインを描画する方法でなく、描く主体に指示をして描画します。この主体をタートルと呼び、2Dではその動きが比較的簡単にイメージできるのですが、3Dとなると上下左右の回転を意識する必要があり、なかなか頭を使います。自分主体の回転なので、角度の考え方は以下の過去記事が参考になります。

http://decode.red/blog/20171230780/ 「クォータニオン」

ここでは飛行機などの動きでよく用いられる、ロール、ピッチ、ヨーの考え方で動かしてみました。

参考) https://forum.processing.org/two/discussion/20706/#Comment_104904

ロールは、機体の進行方向を軸にした回転、ピッチは上下(Tilt up,down)、ヨーは左右(Pan)で、ここではロールとヨーだけ使います。

import peasy.*;
PeasyCam camera;

PVector v;
int yaw  = 0;
int roll = 0;

void setup() {
  size(1200, 1200, P3D);
  camera = new PeasyCam(this, 0, 0, 0, 1000);
}

void draw() {
  background(111);
  colorMode(HSB);

  v = new PVector(0, 0, 0);
  yaw = 0;
  roll = 0;
  
  pushMatrix();
  for(int i=0;i<255;i++){
    rollAngle(10);
    stroke(i, 255, 255);
    forward(5);
    yawAngle(90);
    forward(200);
    yawAngle(-90);
    forward(5);
    yawAngle(-90);
    forward(200);
    yawAngle(90);
  }
  popMatrix();
}
void yawAngle (float a) {
  yaw += a;
}
void rollAngle (float a) {
  roll += a;
}
 
void forward(  float len  ) {
 
  float psi = radians(yaw);
  float phi = radians(roll);
 
  PVector prev =  v.copy();
 
  v.x =prev.x+ len * cos(phi) * sin(psi);
  v.y =prev.y+ len * sin(phi) * sin(psi); 
  v.z =prev.z+ len * cos(psi);
 
  line (prev.x, prev.y, prev.z, v.x, v.y, v.z) ;
}

import peasy.*;

PeasyCam camera;

PVector v;

int yaw = 0;

int roll = 0;

void setup() {

size(1200, 1200, P3D);

camera = new PeasyCam(this, 0, 0, 0, 1000);

}

void draw() {

background(111);

colorMode(HSB);

v = new PVector(0, 0, 0);

yaw = 0;

roll = 0;

pushMatrix();

for(int i=0;i<255;i++){

rollAngle(10);

stroke(i, 255, 255);

forward(5);

yawAngle(90);

forward(200);

yawAngle(-90);

forward(5);

yawAngle(-90);

forward(200);

yawAngle(90);

}

popMatrix();

}

void yawAngle (float a) {

yaw += a;

}

void rollAngle (float a) {

roll += a;

}

void forward( float len ) {

float psi = radians(yaw);

float phi = radians(roll);

PVector prev = v.copy();

v.x =prev.x+ len * cos(phi) * sin(psi);

v.y =prev.y+ len * sin(phi) * sin(psi);

v.z =prev.z+ len * cos(psi);

line (prev.x, prev.y, prev.z, v.x, v.y, v.z) ;

}

ロールで傾けて、ヨーで向きを変えて、これを繰り返していますが、動きをわかりやすくするためラインの色を赤から順に変化させています。

まずは簡単な例でイメージトレーニングでした。

About admin22

Categories: Graphics タグ: Processing

About admin22

Recent Posts

Tag

Links

Archive