Relax Your Mind

Tap on screen to see the magic 

;(function(main) { main(window, document); })(function(window, document, undefined) {

“use strict”;

var c = document.getElementById(“c”), ctx = c.getContext(“2d”), WIDTH = c.width = 750, particles = [], particle = null, particleCount = 100, HEIGHT = c.height = window.innerHeight;

var mouse = { x: WIDTH / 2, y: HEIGHT / 1.5 };

var Vector = function(x, y) { this.x = x || 0; this.y = y || 0; };

Vector.prototype = { constructor: Vector, add: function(v) { this.x += v.x; this.y += v.y; }, sub: function(v) { this.x -= v.x; this.y -= v.y; }, mul: function(v) { this.x *= v.x; this.y *= v.y; } };

var Particle = function(position, radius) { this.position = position; this.velocity = new Vector(0, 0); this.acceleration = new Vector( Math.random() * 0.8 – 0.4, Math.random() * -0.3 – 0.2 ); this.drag = new Vector(1.02, 1); this.radius = radius; this.delay = Math.random() * 200; this.delayCtr = 0; this.fillColor = “hsl(” + (Math.random() * 360) + “, 100%, 50%)”; this.flag = false; this.radiusSpeed = 0.2 + Math.random(); };

Particle.prototype = { construtor: Particle, update: function() {

if(this.delayCtr++ < this.delay) { return; } else if(!this.flag) { this.flag = true; this.position.x = mouse.x + Math.random() * 20 – 10; this.position.y = mouse.y + Math.random() * 20 – 10; }

this.acceleration.x = Math.random() * 0.8 – 0.4; this.acceleration.y = Math.random() * -0.3 – 0.2;

this.velocity.add(this.acceleration); this.velocity.mul(this.drag); this.position.add(this.velocity);

this.radius -= this.radiusSpeed; this.radius = Math.max(0, this.radius);

if(this.position.y WIDTH || this.x < 0 || this.radius <= 0) { this.velocity.x = 0; this.velocity.y = 0; this.radius = Math.random() * 30; this.radiusSpeed = 0.4 + Math.random(); this.position.x = mouse.x + Math.random() * 20 – 10; this.position.y = mouse.y + Math.random() * 20 – 10; }

}, render: function(ctx) {

if(!this.flag) return;

ctx.save(); ctx.globalAlpha = 0.5; ctx.fillStyle = this.fillColor; ctx.translate(this.position.x, this.position.y); ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, Math.PI * 2); ctx.fill();

ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(0, 0, this.radius * 0.5, 0, Math.PI * 2); ctx.fill();

ctx.restore();

} };

for(var i = 0; i < particleCount; i++) { particle = new Particle( new Vector(mouse.x, mouse.y), Math.random() * 40 ); particles.push(particle); }

document.body.addEventListener("mousemove", function(e) { mouse.x = e.clientX; mouse.y = e.clientY; });

requestAnimationFrame(function loop() { requestAnimationFrame(loop);

ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0, 0, 0, 0.98)"; ctx.fillRect(0, 0, WIDTH, HEIGHT); ctx.globalCompositeOperation = "lighter";

for(var i = 0, len = particles.length; i < len; i++) { particle = particles[i]; particle.update(); particle.render(ctx); } ctx.font = "25px Arial"; ctx.fillStyle = "rgba(255, 255, 255, 0.2)"; ctx.textAlign = "left"; ctx.textBaseline = "bottom"; ctx.fillText("Rajashekar Agurla acinom", WIDTH / 4, HEIGHT / 2); });

});