float prevX, prevY;
PGraphics canvas;
float goldenRatio = 1.61803398875;

void setup() {
  size(400, 400, P2D);
  background(0);
  canvas = createGraphics(width, height, P2D);
  canvas.beginDraw();
  canvas.background(0);
  canvas.endDraw();
}

void draw() {
  //get some x and y coordinates that go in a circle with time
  float t = frameCount*.05f;
  float radius = min(width, height)*.3;
  float originR = radius*.3;
  float originX = originR*cos(t*goldenRatio);
  float originY = originR*sin(t*goldenRatio);
  float x = originX+radius*cos(t); // polar to cartesian conversion
  float y = originY+radius*sin(t);

  if (prevX != 0 && prevY != 0) {
    canvas.beginDraw(); // no background is drawn over the canvas so that every line on it stays drawn
    canvas.translate(canvas.width/2, canvas.height/2); //move canvas origin to canvas center
    canvas.stroke(255);
    canvas.strokeWeight(2);
    canvas.line(x, y, prevX, prevY); //draw a line between this and the last wobbly coordinate
    canvas.endDraw();
  }
  prevX = x; //remember this position as the next last position
  prevY = y;

  translate(width/2, height/2); //move main matrix origin to center of window
  strokeWeight(2);
  fill(0);
  stroke(255);
  pushMatrix();
  rotate(-t); //rotate backwards around center, comment this to see lines being drawn by a moving pen on a stationary canvas
  imageMode(CENTER);
  image(canvas, 0, 0); //draw rotated canvas as the background
  ellipse(0, 0, originR*2, originR*2);
  line(x, y, originX, originY); //the same rotation is used for the pen so that it appears stationary rotation-wise
  ellipse(originX, originY, 10, 10);
  popMatrix();

  if(t < 20*TWO_PI){
   //saveFrame("capture/####.jpg");
  }
}