<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
background: #000;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
canvas.interactive {
cursor: none;
}
</style>
</HEAD>
<BODY>
<canvas id="canvas"></canvas>
<script>
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Canvas = function () {
function Canvas(element, ctx, w, h) {
_classCallCheck(this, Canvas);
this.element = element;
this.ctx = ctx;
this.width = w;
this.height = h;
this.interactive = false;
this.playing = true;
this.point = {
value: 150,
speed: 0.25,
limit: 70,
floor: 10,
up: true,
animating: false
};
this.multiplier = {
value: 1,
speed: 0.005,
limit: 20,
floor: 1,
up: true,
animating: true
};
this.center = {
x: w / 2,
y: h / 2,
targetX: w / 2,
targetY: h / 2,
easing: 0.02
};
this.radius = {
val: h / 2.2,
targetVal: h / 2.2,
easing: 0.02
};
document.body.addEventListener('click', this.click.bind(this));
document.body.addEventListener('mousemove', this.move.bind(this));
document.body.addEventListener('keyup', this.keyup.bind(this));
this.hue = 160;
}
_createClass(Canvas, [{
key: 'click',
value: function click(e) {
this.interactive = !this.interactive;
if (!this.interactive) {
this.center.targetX = this.width / 2;
this.center.targetY = this.height / 2;
this.radius.targetVal = this.height / 2.2;
this.element.classList.remove('interactive');
} else {
this.element.classList.add('interactive');
}
}
}, {
key: 'move',
value: function move(e) {
if (!this.interactive) {
return;
}
var h3 = this.height / 3;
this.center.targetX = e.pageX;
this.center.targetY = Math.max(e.pageY, h3);
this.radius.targetVal = h3 + e.pageY * 0.8;
}
}, {
key: 'keyup',
value: function keyup(e) {
if (e.which != 32) {
return;
}
this.playing = !this.playing;
if (this.playing && this.drawLoop) {
this.drawLoop();
}
}
}, {
key: 'update',
value: function update() {
this.clear();
this.animate(this.point);
this.animate(this.multiplier);
this.ease(this.center);
this.ease(this.radius);
this.hue += 0.3;
var h = this.hue % 360;
this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)';
this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)';
this.ctx.globalCompositeOperation = 'lighter';
}
}, {
key: 'clear',
value: function clear() {
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.fillStyle = 'rgba(0,0,0,0.1)';
this.ctx.rect(0, 0, this.width, this.height);
this.ctx.fill();
}
}, {
key: 'draw',
value: function draw() {
var radius = this.radius.val;
var w2 = this.center.x,
h2 = this.center.y;
this.ctx.beginPath();
this.ctx.shadowBlur = 0;
this.ctx.shadowColor = 'black';
var points = this.point.value;
var multiplier = this.multiplier.value;
for (var p = 0; p < points; p++) {
var t = p / points * Math.PI * 2;
var t2 = p * multiplier / points * Math.PI * 2;
var x = radius * Math.cos(t) + w2;
var y = radius * Math.sin(t) + h2;
var x2 = radius * Math.cos(t2) + w2;
var y2 = radius * Math.sin(t2) + h2;
this.ctx.moveTo(x, y);
this.ctx.lineTo(x2, y2);
}
this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI);
this.ctx.stroke();
this.ctx.closePath();
}
}, {
key: 'animate',
value: function animate(object) {
if (!object.animating) {
return;
}
if (object.up) {
object.value += object.speed;
} else {
object.value -= object.speed;
}
if (object.value > object.limit) {
object.up = false;
} else if (object.value < object.floor) {
object.up = true;
}
}
}, {
key: 'ease',
value: function ease(object) {
if (object.val) {
var dv = object.targetVal - object.val;
object.val += dv * object.easing;
return;
}
var dx = object.targetX - object.x;
var dy = object.targetY - object.y;
object.x += dx * object.easing;
object.y += dy * object.easing;
}
}, {
key: 'random',
value: function random(from, to) {
return from + Math.rand() * (to - from);
}
}, {
key: 'resize',
value: function resize(w, h) {
this.width = w;
this.height = h;
this.center.targetX = w / 2;
this.center.targetY = h / 2;
this.radius.targetVal = h / 2.2;
}
}]);
return Canvas;
}();
(function (_) {
var canvasElement = document.getElementById('canvas'),
ctx = canvasElement.getContext('2d');
var w = canvasElement.width = window.innerWidth,
h = canvasElement.height = window.innerHeight,
density = 1;
var canvas = new Canvas(canvasElement, ctx, w, h);
function setup() {
window.addEventListener('resize', resize);
density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;
canvasElement.width = w * density;
canvasElement.height = h * density;
canvas.width = w;
canvas.height = h;
canvas.drawLoop = draw;
ctx.scale(density, density);
draw();
}
function draw() {
canvas.update();
canvas.draw();
if (canvas.playing) {
window.requestAnimationFrame(draw);
}
}
function resize() {
w = canvasElement.width = window.innerWidth;
h = canvasElement.height = window.innerHeight;
canvasElement.width = w * density;
canvasElement.height = h * density;
canvas.resize(w, h);
ctx.scale(density, density);
}
setup();
})();
</script>
</BODY>
</HTML>
