let movers = [];

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  // Specify your moves here

  let moves = [{

      sf: 30, // start frame of movement

      ef: 240, // end frame of movement

      cx : width/4, // center-x of circle

      cy : 3*height/4, // center-y of circle

      r : 150, // radius of circle

      aspeed: 0.67, // overall speed of movement

      f: 0 // facing relative to angle of movement

    }

  ]

​

  // Ad the mover

  movers.push(new CMover(90, moves));

}

​

function draw() {

  background(220);

  // Loop through all of the movers

  for (let mover of movers) {

    // Update each of them

    mover.update();

    // Display each of them

    mover.display();

  }

}

​

// Define the Mover class

class CMover {

​

  // Movers have x,y position

  // xpseed and yspeed for speed and direction of movement

  // start frame (sf) and end frame (ef) for timing

  constructor(a, moves) {

    this.a = a;

    this.f = a;

    this.moves = moves;

​

    // Get things going

    this.m = 0;

    this.next();

  }

​

  next() {

    let move = this.moves[this.m];

    this.msf = move.sf;

    this.mef = move.ef;

    this.cx = move.cx,

    this.cy = move.cy,

    this.r = move.r,

    this.aspeed = move.aspeed;      

    this.f = move.f;

​

    // Advance if we haven't reached the end yet.

    if (this.m < this.moves.length - 1) {

      this.m++;

      // Grab the "next move start frame" (nmsf)

      this.nsf = this.moves[this.m].sf;

    }

  }

​

  // Update the mover's position when it's time to move

  update() {

    // Move

    if (frameCount > this.msf && frameCount < this.mef) {

      this.a += this.aspeed;

      this.x = cos(this.a)*this.r + this.cx;

      this.y = sin(this.a)*this.r + this.cy;

    }

​

    // Check to see if it's time to do next move

    if (frameCount > this.nsf) this.next();

​

  }

​

  // Display the mover

  display() {

    strokeWeight(10);

    point(this.x, this.y);

    let R = 10;

    let x = cos(this.a + this.f + 90) * R + this.x;

    let y = sin(this.a + this.f + 90) * R + this.y;

    strokeWeight(5);

    point(x, y);

  }

​

}