// http://jsfiddle.net/1fgqpu6x/4/

  let dx = cx - px;

  let dy = cy - py;

  let dd = Math.sqrt(dx * dx + dy * dy);

  let a = Math.asin(r / dd);

  let b = Math.atan2(dy, dx);

​

  let t = b - a;

  let ta = { x: r * Math.sin(t), y: r * -Math.cos(t) };

​

  t = b + a;

  let tb = { x: r * -Math.sin(t), y: r * Math.cos(t) };

  return [cx + ta.x, cy + ta.y, cx + tb.x, cy + tb.y];

}

​

function setup() {

  createCanvas(512, 512);

}

​

function draw() {

  background(24);

  noStroke();

  // return;

​

  let cx = width / 2;

  let cy = height / 2;

  let r = 50;

  // see parallels

  // let px = width/2 + r + map(mouseX, 0, width, 0, 10000);

  // let py = cy;

  // light follow mouse

  let px = mouseX;

  let py = mouseY;

  let rl = 4;

​

  // Light rays

  fill("green");

  const [x1, y1, x2, y2] = findTangentPoint(cx, cy, r, px, py);

​

  fill(100);

  beginShape();

  vertex(px, py);

  vertex((x1-px)*20000+px, (y1-py)*20000+py);

  vertex((x2-px)*20000+px, (y2-py)*20000+py);

  endShape();

  // Ball

  fill("#D91232");

  circle(cx, cy, 2*r);

​

  // Light

  fill(255);

  circle(px, py, 2*rl);

​

  // Wall

  fill(100);

  rect(0, 0, 10, height);

  // noLoop();

}

​