cY = 200,

    r = 100,

    rotation = 0,

    rStep = .01,

    points = [],

    maxPoints = 100;;

​

function setup() {

  createCanvas(400, 400);

  for (var i=0; i<maxPoints; i++) {

    points[i] = cX; 

  }

}

​

function draw() {

  background(220);

  stroke(0);

  fill(255);

  push();

  translate(cX, cY);

  //rotate(TWO_PI * mouseX/width); //manual rotation

  rotate(rotation += rStep); //incrementally rotate

  circle(0, 0, 2*r, 2*r);

  line(0, 0, r, 0)

  fill(255, 0, 0);

  circle(r, 0, 10, 10);

  pop();

  //draw the horizontal and vertival components of the rotated line

  stroke(0,0,255);

  line(cX, cY, cX + cos(rotation)*r, cY);

  stroke(255, 0, 0);

  line(cX, cY, cX, cY + sin(rotation)*r);

  updateGraph();

  drawGraph();

}

​

function updateGraph() {

  points.shift(); 

  points.push(cX +sin(rotation)*r);

}

​

function drawGraph() {

  stroke(255, 0, 0);

  noFill();

  beginShape();

  for (var i=0; i<maxPoints; i++) {

    vertex(i*2, points[i]);

  }

  endShape();

}

​

function mousePressed() {

  rStep = 0;

}

​

function mouseReleased() {

  rStep = .01;

}