Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="800px" height="500px"></canvas>
</body>
</html>
 
/*
      solution for:
      http://i.imgur.com/CuzTPTR.gif
      
      by @msvaljek
*/
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    cwidth = canvas.width,
    cheight = canvas.height,
    hsplit = 90,
    circlewidth = 80,
    circlehalf = circlewidth / 2,
    circlex = cwidth / 2,
    circley = cheight - hsplit + circlehalf,
    angle = 0,
    dangle = -0.0256,
    anglex,
    angley,
    drawdotx,
    drawdoty,
    linex,
    draw;
draw = function () {
  ctx.clearRect(0, 0, cwidth, cheight);
  ctx.strokeStyle = 'black';
  // vertical split
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(circlex, cheight);
  ctx.lineTo(circlex, 0);
  ctx.stroke();
  
  // horizontal split
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, cheight - hsplit);
  ctx.lineTo(cwidth, cheight - hsplit);
  ctx.stroke();
  
  //circle
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(circlex, circley, circlehalf, 0, 2 * Math.PI);
  ctx.stroke();
  
  //circle center
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(circlex, circley, 1, 0, 2 * Math.PI);
  ctx.stroke();
  
  angle = (angle + dangle) % ( 2 * Math.PI);  
  anglex = Math.cos(angle) * circlehalf;
  angley = Math.sin(angle) * circlehalf;
  drawdotx = circlex + anglex;
  drawdoty = circley + angley;
  
  linex = circlehalf / Math.tan(angle);
  linex2 = circlehalf / Math.tan(angle + Math.PI);
  
  //first line part
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(circlex, circley);
  ctx.lineTo(circlex - linex, cheight - hsplit);
  ctx.stroke();
  
  //green dot
  ctx.strokeStyle = 'green';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(drawdotx, drawdoty, 1, 0, 2 * Math.PI);
  ctx.stroke();
  
  //black dot
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(circlex - linex, cheight - hsplit, 1, 0, 2 * Math.PI);
  ctx.stroke();
  
  //secondlinepart
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(circlex, circley);
  ctx.lineTo(circlex + linex2, cheight - hsplit + circlewidth);
  ctx.stroke();
  
  for (var i = cheight; i > 0; i-- ) {
    ctx.beginPath();
    ctx.moveTo(circlex - linex, cheight - hsplit - i - 1);
    linex = circlehalf / Math.tan(angle - i * dangle);
    ctx.lineTo(circlex - linex, cheight - hsplit - i);
    if ((circlex - linex) < cwidth) {
      ctx.stroke();
    }
  }
  
};
setInterval(draw, 10);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
msvalpro
0viewers