let minSide;

​

const factor = 2;

const velocity = 1;

let theta;

let r, R;

let center;

let tail = [];

​

function setup() {

  // Canvas configuration

  minSide = windowWidth < windowHeight? windowWidth : windowHeight;

  createCanvas(minSide * p, minSide * p);

  // Radius of the circles

  r = width / (10 - factor); // Centered circle

  R = r / (factor - 1); // Outside moving circle

  theta = PI / (factor - 1);

}

​

function draw() {

  background(0);

  // Draw the circles

  push();

  translate(width/2, width/2);

  noFill();

  stroke(255);

  center = createVector(cos(theta) * (r + R), sin(theta) * (r + R));

  circle(0, 0, 2 * r);

  circle(center.x, center.y, 2 * R);

  // Draw the red path

  push();

  let redColor = color(255, 0, 0, 50);

  //translate(width/2, width/2);

  noFill();

  stroke(redColor);

  strokeWeight(5);

  let angle = theta * factor;

  x = center.x + cos(angle) * R;

  y = center.y + sin(angle) * R;

  tail.push(createVector(x, y));

  let n = tail.length;

  let points = 360 / velocity;

  if(n > points) {

    tail = [];

    n = 0;

  }

  beginShape();

  for(let i = 0; i < n; i++) {

    vertex(tail[i].x, tail[i].y);

  }

  endShape();

  redColor.setAlpha(255);

  stroke(redColor);

  point(x, y);

  pop();

  pop();

  theta += radians(velocity);

}

​