ByqNde

ByqNde.markdown

ByqNde

A Pen by Artem Zubkov on CodePen.

License.

index.jade

canvas#test Your browser doesn't support canvas

script.js

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();

style.css

* {
  padding: 0;
  margin: 0;
}

body, 
html,
canvas {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}