A Pen By
Artem Zubkov

` ````
canvas#test Your browser doesn't support canvas
```

` ````
* {
padding: 0;
margin: 0;
}
body,
html,
canvas {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
```

` ````
var ctx = test.getContext("2d");
var from = {
x : 50,
y : window.innerHeight / 2
}
, to = {
x : window.innerWidth - 50,
y : window.innerHeight / 2
}
, point = {
from: from,
to: to,
x : from.x,
y : from.y,
dx : from.x,
dy : from.y
}
;
point.there = to;
var al = 0;
function dist(a, b) {
return Math.sqrt(Math.pow(a,2) + Math.pow(b, 2));
}
function update() {
if (dist(point.there.x - point.x, point.there.y - point.y) < (point.there.m > 1 ? point.there.m : 5)) {
point.there.m = 40;
point.there = point.there == to ? from : to;
}
var d = dist(from.x - to.x, from.y - to.y)
, r = d/2
;
point.px = point.x;
point.py = point.y;
var dx = point.there.x - point.dx;
var dy = point.there.y - point.dy;
point.dx += (dx) * .1;
point.dy += (dy) * .1;
dx = point.there.x - point.dx;
dy = point.there.y - point.dy;
var sx = dx < 0 ? 1 : -1;
var sy = dy > 0 ? 1 : -1;
dx = Math.abs(dx) - r;
dy = Math.abs(dy) - r;
var k = .5;
point.x = point.dx;// - sx * k * Math.sqrt(r*r - dy*dy);
point.y = point.dy - k * Math.sqrt(r*r - dx*dx);
}
var alt = 0, alf = 0, k = 1;
function render() {
requestAnimationFrame(render);
if (test.width != window.innerWidth)
test.width = window.innerWidth;
if (test.height != window.innerHeight)
test.height = window.innerHeight;
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(0, 0, 0, .15)";
ctx.fillRect(0, 0, test.width, test.height);
ctx.globalCompositeOperation = "lighter";
alf += .003;
alt += .003;
if(!Math.floor(Math.cos(alt)))
k = Math.cos(alf * alt);
from.x = -test.width/3 + test.width/2 - k * from.x/2 * Math.cos(alf);
from.y = test.height/2 + from.y/2 * Math.sin(alf);
to.x = test.width/3 + to.x/2 * Math.cos(alt);
to.y = test.height/2 - k * to.y/2 * Math.sin(alt);
from.m = from.m > 1 ? from.m : 5 * Math.random();
to.m = to.m > 1 ? to.m : 5 * Math.random();
to.m -= .3;
from.m -= .3;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(from.x, from.y, (from.m || 5), 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "green";
ctx.arc(to.x, to.y, (to.m || 5), 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
update();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.moveTo(point.px, point.py);
ctx.lineTo(point.x, point.y);
//ctx.arc(point.x, point.y, 1, 0, Math.PI * 2);
ctx.stroke();
//ctx.fill();
ctx.closePath();
}
render();
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

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

Alt
Opt
Find & Replace

Also see: Tab Triggers