Processingのサンプルコードの改良し、軌跡を描きたいのですが分かりません

Question

前提

Processingにて、どれだけ調べてもコードがわからず完全に手詰まりになりました。
サンプルコードの「Exercise_3_02_cannon」を改良して、発射された球に線の軌跡が出るようにしたいです。

実現したいこと

・発射された球に軌跡が線で出るようにする。

発生している問題・エラーメッセージ

色々とネットなどで調べてはみたのですが、該当しそうな情報がなく、完全に手づまりな状況です

該当のソースコード①

float angle = -PI/4;
PVector position = new PVector(50, 300);
boolean shot = false;

CannonBall ball;

void setup() {
  size(640, 360);
  ball = new CannonBall(position.x, position.y);
}

void draw() {
  background(255); 

  pushMatrix();
  translate(position.x, position.y);
  rotate(angle);
  rect(0, -5, 50, 10);
  popMatrix();

  if (shot) {
    PVector gravity = new PVector(0, 0.2);
    ball.applyForce(gravity);
    ball.update();
  }
  ball.display();

  if (ball.position.y > height) {
    ball = new CannonBall(position.x, position.y);  
    shot = false;
  }
}

void keyPressed() {
  if (key == CODED && keyCode == RIGHT) {
    angle += 0.1;
  } 
  else if (key == CODED && keyCode == LEFT) {
    angle -= 0.1;
  } 
  else if (key == ' ') {
    shot = true;
    PVector force = PVector.fromAngle(angle);
    force.mult(10);
    ball.applyForce(force);
  }
}

該当のソースコード②

class CannonBall { 
  // All of our regular motion stuff
  PVector position;
  PVector velocity;
  PVector acceleration;

  // Size
  float r = 8;
  
  float topspeed = 10;

  CannonBall(float x, float y) {
    position = new PVector(x,y);
    velocity = new PVector();
    acceleration = new PVector();
  } 

  // Standard Euler integration
  void update() { 
    velocity.add(acceleration);
    velocity.limit(topspeed);
    position.add(velocity);
    acceleration.mult(0);
  }

  void applyForce(PVector force) {
    acceleration.add(force);
  }

  
  void display() { 
    stroke(0);
    strokeWeight(2);
    pushMatrix();
    translate(position.x,position.y);
    ellipse(0,0,r*2,r*2);
    popMatrix();
  }
}

試したこと

どこから変更すればよいのかわからなくて完全に困っています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[TN8001]

ProcessingはJavaScriptも使用できますが、提示コードはJavaScriptではありません。
「JavaScript」タグは外してください。
つけるのであれば「Java」タグです。

Answer 1

サンプルコードの「Exercise_3_02_cannon」

「The Nature of Code」あるいはその翻訳本ですね？
The Nature of Code - Google 検索

noc-examples-processing/chp03_oscillation/Exercise_3_02_cannon at master · nature-of-code/noc-examples-processing

出典ははっきり明示してください。
もしコード先頭にクレジット表記があるなら外さないでください。

・発射された球に軌跡が線で出るようにする。

例えばbackground(255)をやめるだけで前の描画が残るため連続写真？のようになりますが、そういうことでいいんでしょうか？

void draw() {
  //background(255);

あるいは残像を残すようなテクニックがあります。
これはNOC_1_2_bouncingball_vectorsで使われています。
nature-of-code/noc-examples-processing: Repository for example code from The Nature of Code book

void draw() {
  //background(255);
  fill(255, 10);
  rect(0, 0, width, height);

色々とネットなどで調べてはみたのですが、該当しそうな情報がなく、完全に手づまりな状況です

どういうキーワードで検索していますか？
Processing 軌跡 - Google 検索

---

それとも軌跡が「線で出る」というところが重要ですか？

その瞬間の弾の位置はわかってるので、ArrayList<PVector>にため込んでいく感じでしょうか。
ArrayList of objects / Examples / Processing.org