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 F
Opt F
Find & Replace

Also see: Tab Triggers