processingで特定の点の軌跡を残したい

Question

processing で、
0. 円Aの周上を動径の回転に沿って移動する点を中心とする円Bを描き、

1. 円Bの周上を動径の回転に沿って移動する点を中心とする円Cを描き、
2. 円Cの周上を動径の回転に沿って移動する点D（下の画像の一番外側の円周上の白い点（小さくてスイマセン））の軌跡を描画する

ということをしたいのですが、うまくできません。

円A、B、Cの軌跡はいらないので毎フレームの初めに背景として黒い長方形を描画し画面を初期化してから円や動径を描画しているのですが、これをしてしまうと点Dの軌跡も初期化されてしまい軌跡を描くことができません。

processingでレイヤのようなものはあるのでしょうか？

点Dの軌跡だけ画面に残し、その他の円や動径はフレーム毎に描画しなおす方法があればご教授いただけないでしょうか。

Answer 1

PGraphics というオブジェクトを使用するとレイヤーのような描画ができます

PGraphicsはメソッドとしてpoint(),line(),vertex()といった関数を持っており
それらは画面描画する関数と機能が同じです

PGraphicsのオブジェクト名をhogeとすると
hoge.beginDraw();
hoge.point(...);
hoge.line(...);
hoge.endDraw();

というような感じで使用できます

参考のため画面に螺旋状に軌跡を描画するコードを書いてみました

PGraphics pg;//一番外側で宣言

void setup()
{
  size(640,480);
  background(255);
  noFill();
  
  pg = createGraphics(width,height);//画面の大きさで初期化
}

void draw()
{
  background(255);//背景を白に
  
  //軌跡の座標を計算する処理
  float r,theta,x0,y0;
  r = frameCount/10.0;
  theta = TWO_PI * frameCount/100.0;
  x0 = r*cos(theta) + width/2.0;
  y0 = r*sin(theta) + height/2.0;
  
  pg.beginDraw();//描画の開始
  pg.point(x0,y0);//pg上に点を描画
  pg.endDraw();//描画の終了
  
  image(pg,0,0);//pgを画面に描画
}

これでは点が描画されるのみなので
それらの間を線で繋ぎたいときは
前のフレームで定義された点の情報が必要となります
それらを踏まえて書き直すと下記のようになります
(追加した部分のみコメントつけてます)

PGraphics pg;
float px,py;//追加 前のフレームのxy

void setup()
{
  size(640,480);
  background(255);
  noFill();
  
  pg = createGraphics(width,height);
  
  px = 0.0;//追加 初期化
  py = 0.0;//追加 初期化
}

void draw()
{
  background(255);
  

  float r,theta,x0,y0;
  r = frameCount/10.0;
  theta = TWO_PI * frameCount/100.0;
  x0 = r*cos(theta) + width/2.0;
  y0 = r*sin(theta) + height/2.0;
  
  if(2<=frameCount){//追加 2フレームから描画開始
    pg.beginDraw();
    pg.line(px,py,x0,y0);//追加 線を描画
    pg.endDraw();
  }//追加
  
  image(pg,0,0);
  
  px = x0;//追加 更新
  py = y0;//追加 更新
}

PGraphicsを使うのならあえてやる必要はありませんが
固定長の配列を使って下記のように書くこともできます
(固定長なのでお尻の方から線が消えていきます)

int   arraySize;//配列のサイズ
float[]     x,y;//座標を格納する配列
int    nowIndex;//描画を行うインデックスの値
boolean  update;//配列が初期化後配列のすべてが1回更新された


void setup()
{
  size(640,480);
  background(255);
  noFill();
  
  //初期化
  arraySize = 200;
  x = new float[arraySize];
  y = new float[arraySize];
  for(int i=0;i<arraySize;i++){
    x[i] = 0.0;
    y[i] = 0.0;
  }
  nowIndex = -1;
  update   = false;
}

void draw()
{
  background(255);//背景を白に
  
  //軌跡の座標を計算する処理
  float r,theta,x0,y0;
  r = frameCount/10.0;
  theta = TWO_PI * frameCount/100.0;
  x0 = r*cos(theta) + width/2.0;
  y0 = r*sin(theta) + height/2.0;
  
  
  //インデックスの更新
  nowIndex++;
  if(arraySize <= nowIndex){
    nowIndex = 0;
    update = true;
  }
  
  
  //配列を更新
  x[nowIndex] = x0;
  y[nowIndex] = y0;
  
  
  //描画
  beginShape();
  for(int i=0;i<=nowIndex;i++){
    vertex(x[i],y[i]);
  }
  endShape();
  
  if(update){
    beginShape();
    for(int i=nowIndex+1;i<arraySize;i++){
      vertex(x[i],y[i]);
    }
    vertex(x[0],y[0]);
    endShape();
  }
}