clockhand1.js

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

class ClockHand {
  constructor(center, r, theta=0){
    this.center = center
    this.r = r
    this.theta = theta
  }
  get x1(){
    return this.center.x
  }
  get y1(){
    return this.center.y
  }
  get x2(){
    return this.x1 + Math.cos(this.theta) * this.r
  }
  get y2(){
    return this.y1 - Math.sin(this.theta) * this.r
  }
  get pt1() {
    return this.center
  }
  get pt2() {
    return new Point(this.x2, this.y2)
  }
  
  draw() {
    line(this.x1, this.y1, this.x2, this.y2)
  }
}

class Locus {
  constructor(buffer=50) {
    this.arr = new Array(buffer)
  }
  add(item) {
    this.arr.unshift(item)
    return this.arr.pop()
  }
  draw(d=0) {
    for (let i = 0; i < this.arr.length; i++){
      let item = this.arr[i]
        if (item !== undefined) {
          stroke(i/this.arr.length*160)
          circle(item.x, item.y, d)
        }
    }
  }
}

let pt1
let ch1
let locus


function setup() {
  pt1 = new Point(200, 200)
  ch1 = new ClockHand(pt1, 100)
  locus = new Locus(400)
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0)
  ch1.draw()
  locus.draw(0)
  locus.add(ch1.pt2)
  ch1.theta +=0.01
}

clockhand2.js

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

class ClockHand {
  constructor(center, r, theta=0){
    this.center = center
    this.r = r
    this.theta = theta
  }
  get x1(){
    return this.center.x
  }
  get y1(){
    return this.center.y
  }
  get x2(){
    return this.x1 + Math.cos(this.theta) * this.r
  }
  get y2(){
    return this.y1 - Math.sin(this.theta) * this.r
  }
  get pt1() {
    return this.center
  }
  get pt2() {
    return new Point(this.x2, this.y2)
  }
  
  draw() {
    line(this.x1, this.y1, this.x2, this.y2)
  }
}

class Locus {
  constructor(buffer=50) {
    this.arr = new Array(buffer)
  }
  add(item) {
    this.arr.unshift(item)
    return this.arr.pop()
  }
  draw(d=0) {
    for (let i = 0; i < this.arr.length; i++){
      let item = this.arr[i]
        if (item !== undefined) {
          stroke(i/this.arr.length*160)
          circle(item.x, item.y, d)
        }
    }
  }
}

let pt1
let ch1, ch2
let locus


function setup() {
  pt1 = new Point(200, 200)
  ch1 = new ClockHand(pt1, 100)
  ch2 = new ClockHand(ch1.pt2, 50)
  locus = new Locus(1000)
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0)
  ch1.draw()
  
  ch2.center = ch1.pt2
  
  ch2.draw()
  
  ch1.theta += 0.01
  ch2.theta += 0.02
  
  locus.draw(0)
  locus.add(ch2.pt2)
}

clockhand3.js

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

class Locus {
  constructor(buffer=50) {
    this.arr = new Array(buffer)
  }
  add(item) {
    this.arr.unshift(item)
    return this.arr.pop()
  }
  draw(d=0) {
    for (let i = 0; i < this.arr.length; i++){
      let item = this.arr[i]
        if (item !== undefined) {
          stroke(i/this.arr.length*160)
          circle(item.x, item.y, d)
        }
    }
  }
}

class ClockHand {
  constructor(center, r, theta = 0, depth = 3) {
    this.center = center
    this.r = r
    this.theta = theta
    this.depth = depth
  }
  get x1(){
    return this.center.x
  }
  get y1(){
    return this.center.y
  }
  get x2(){
    return this.x1 + Math.cos(this.theta) * this.r
  }
  get y2(){
    return this.y1 - Math.sin(this.theta) * this.r
  }
  get pt1() {
    return this.center
  }
  get pt2() {
    return new Point(this.x2, this.y2)
  }
  draw(r=0.5, s=2){
    if (this.depth > 0) {
      let child = new ClockHand(this.pt2, this.r*r, this.theta*s, this.depth-1)
      line(this.x1, this.y1, child.x1, child.y1)
      return child.draw(r, s) 
    } else {
      return this.pt1
    }
  }
}

let locus
let h 

function setup() {
  locus = new Locus(600)
  h = new ClockHand(new Point(150, 200), 80, PI, 5)
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0)
  let item = h.draw(0.7, 2)
  h.theta += 0.01
  
  locus.draw(0)
  locus.add(item)
}

clockhand3_save_as_gif.js

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

class Locus {
  constructor(buffer=50) {
    this.arr = new Array(buffer)
  }
  add(item) {
    this.arr.unshift(item)
    return this.arr.pop()
  }
  draw(d=0) {
    for (let i = 0; i < this.arr.length; i++){
      let item = this.arr[i]
        if (item !== undefined) {
          stroke(i/this.arr.length*160)
          circle(item.x, item.y, d)
        }
    }
  }
}

class ClockHand {
  constructor(center, r, theta = 0, depth = 3) {
    this.center = center
    this.r = r
    this.theta = theta
    this.depth = depth
  }
  get x1(){
    return this.center.x
  }
  get y1(){
    return this.center.y
  }
  get x2(){
    return this.x1 + Math.cos(this.theta) * this.r
  }
  get y2(){
    return this.y1 - Math.sin(this.theta) * this.r
  }
  get pt1() {
    return this.center
  }
  get pt2() {
    return new Point(this.x2, this.y2)
  }
  draw(r=0.5, s=2){
    if (this.depth > 0) {
      let child = new ClockHand(this.pt2, this.r*r, this.theta*s, this.depth-1)
      line(this.x1, this.y1, child.x1, child.y1)
      return child.draw(r, s) 
    } else {
      return this.pt1
    }
  }
}

let locus
let h 

function setup() {
  locus = new Locus(200)
  h = new ClockHand(new Point(150, 200), 80, 0, 5)
  createCanvas(400, 400);
  
  frameRate(30);
  //   <script src="https://unpkg.com/[email protected]/dist/p5.createloop.js"></script>
  //     3.14*2/0.03/30 = 7
  createLoop({duration:7, gif:true});
}

function draw() {
  background(color(180, 255, 222));
  stroke(0)
  let item = h.draw(0.6, 2)
  h.theta += 0.03
  locus.draw(1)
  locus.add(item)
}