A Pen By
Marko Švaljek

` ````
<canvas id="canvas" width="400px" height="250px"
```

` ````
canvas {
border: 1px solid black;
}
```

` ````
// https://msvaljek.blogspot.com/2013/09/tan-function-visualization.html
/*
solution for:
https://i.imgur.com/CuzTPTR.gif
by @msvaljek
*/
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cwidth = canvas.width,
cheight = canvas.height,
hsplit = 65,
circlewidth = 60,
circlehalf = circlewidth / 2,
circlex = cwidth / 2,
circley = cheight - hsplit + circlehalf,
angle = 0,
dangle = -0.05,
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, 20);
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers