Rings

index.html

%canvas#canvas-club

Rings.markdown

Rings

Another canvas experiment. Move mouse, or touch/swipe for effects.

A Pen by Nate Wiley on CodePen.

License.

script.js

window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

var c = document.getElementById("canvas-club");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var ctx = c.getContext("2d");
var maxParticles = 200;
var particles = [];
var mouseSize = 120;

var mouse = {
	size: mouseSize,
	x: w/2 - mouseSize/2,
	y: h/2 - mouseSize/2,
	tx: w/2,
	ty: h/2
};


var clearColor = "rgba(0, 0, 0, .08)";

function random(min, max){
	return Math.random() * (max - min) + min
}

function distance(x1, y1, x2, y2){
	return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );
}


function P(){}

P.prototype = {
	init: function(){
		this.size = this.origSize = random(3, 15);
		this.bigSize = this.size * 10;
		this.x = random(0, w);
		this.y = -this.size;
	},
	
	draw: function(){
		this.distanceFromMouse = distance(this.x, this.y, mouse.x, mouse.y);
		ctx.strokeStyle = "hsla("+this.distanceFromMouse/2+", 100%, 50%, 1)";
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
		ctx.closePath();
		ctx.lineWidth = 3;
		ctx.stroke();
		this.update();
	},
	
	update: function(){
		this.y += this.origSize / 4;
		if(this.y - this.size > h){
			this.init();
		}
		if(this.distanceFromMouse < mouse.size){
			if(this.bigSize - this.size > .1){
				this.size += (this.bigSize - this.size) * .08;
			}
		} else {
			if(this.origSize - this.size < .1){
				this.size += (this.origSize - this.size) * .08;
			}
		}
	}
}



mouse.move = function(){
	if(!distance(mouse.x, mouse.y, mouse.tx, mouse.ty) <= .1){
  	mouse.x += (mouse.tx - mouse.x) * .2;
		mouse.y += (mouse.ty - mouse.y) * .2;
	} 
};

mouse.touches = function(e) {
	var touches = e.touches;
	if(touches){
		mouse.tx = touches[0].clientX;
		mouse.ty = touches[0].clientY;
	} else {
		mouse.tx = e.clientX;
	  mouse.ty = e.clientY;
	}
	e.preventDefault();
};

mouse.mouseleave = function(e){
	mouse.tx = w/2 - mouse.size/2;
	mouse.ty = h/2 - mouse.size/2;
};

window.addEventListener("mousemove", mouse.touches);
window.addEventListener("touchstart", mouse.touches);
window.addEventListener("touchmove", mouse.touches)

c.addEventListener("mouseleave", mouse.mouseleave)

window.addEventListener("resize", function(){
	w = c.width = window.innerWidth;
	h = c.height = window.innerHeight;
});

for(var i=1; i<=maxParticles; i++) {
	setTimeout(function(){
		var p = new P();
		p.init();
		particles.push(p);
	}, i * 50);
}


function anim(){
	ctx.fillStyle = clearColor;
	ctx.globalCompositeOperation = "source-over";
	ctx.fillRect(0,0,w, h);
	mouse.move();

	for(var i in particles){
		var p = particles[i];
		p.draw();
	}
	requestAnimationFrame(anim);
}

anim();

style.css

body {
	background: black;
	overflow: hidden;
	/* cursor: none; */
}