sketch_calculus.pde

boolean tangent = false;
 
float theta = 0;
float radius = 100;
 
float x_t = 0;
float y_t = 0;
 
float x_0;
float y_0;
 
void setup() {
  size(640, 360);  // Size must be the first statement
}
 
void draw() {
 
  // Check to see if we are drawing a circle or tangent line 
  if ( tangent ) {
    
    // The tangent line can be constructed thusly in terms of theta
    //
    // So whenever the mouse is clicked the current point x_t and y_t is 
    // captured. This is a point on the line we want. In addition, the 
    // mighty calculus gives us the ability to get the slope of that line
    // given any theta. 
    // 
    // (x_0, y_0) is the point where the tangent lies
    // 
    // m = -sin(theta)/cos(theta) is the slope of the tangent line
    //
    // Using these two pieces of information we can use the point-slope form
    // of a line to compute a point on the line.
    //
    // y = m(x - x_0) + y_0
    // 
    // or
    //
    // y_t = -sin(theta)/cos(theta) * (x_t - x_0) + y_0
    //
    // We then calculate y and increment x for the next frame.
    y_t = -sin(theta)/cos(theta) * (x_t - x_0) + y_0;
    
    
    // You could determine the quadrant and either decrement or increment to make all lines
    // emit in the same direction. I am lazy so I left it out.
    x_t += 0.5;
 
    // Draw point at computed spot
    ellipse(x_t + 320, y_t + 180, 5, 5);
    
  } else {
    
    // Circle is computed parametrically using trigonometric
    // functions. You already had this.
    x_t = radius * sin(theta);
    y_t = radius * cos(theta);
    
    ellipse(x_t + 320, y_t + 180, 5, 5);
    theta += 0.01;
    
  } 
}
 
void mouseClicked() {
  
  // Make a circle on the tangent point
  fill(255,0,0);
  ellipse(x_t + 320, y_t + 180, 15, 15);
  fill(255);
  
  // capture the tangent point
  x_0 = x_t;
  y_0 = y_t;
 
  // Invert whether to draw circle or tangent
  tangent = ! tangent;
}