EffectHub.com: your best source for gaming

Recommendation

More Effects...

! function() {

"use strict";

// chain constructor
	function Chain (N, img, w, h, rad, r, g, ox, oy) {
		this.ox     = ox;
		this.oy     = oy;
		this.points = [];
		var image   = new Image();
		image.src   = img;
		for (var i = 0; i < N; i++) {
			this.points[i] = new Point(image, w, h, rad, r, g);
			if (i > 0) {
				this.points[i - 1].links.push(this.points[i]);
				this.points[i - 1].next = this.points[i];
			}
		}
		this.first = this.points[0];
		this.last  = this.points[N - 1];

// point constructor
		function Point (img, w, h, rad, r, g) {
			this.img   = img;
			this.r     = r;
			this.g     = g;
			this.x     = canvas.width  * 0.5;
			this.y     = canvas.height * 0.5;
			this.xb    = canvas.width  * 0.5;
			this.yb    = canvas.height * 0.5;
			this.w     = w;
			this.h     = h;
			this.rad   = rad;
			this.links = [];
			this.next  = null;
		}

// point verlet animation + chain links
		Point.prototype.anim = function() {
			// draw
			ctx.drawImage(this.img, this.x - this.w, this.y - this.h);
			// integrate 
			var x   = this.x;
			var y   = this.y;
			this.x += (this.x - this.xb);
			this.y += (this.y - this.yb) - this.g;
			this.xb = x;
			this.yb = y;
			// constraints
			for (var i = 0, n = this.links.length; i < n; i++) {
				var link = this.links[i];
				var dx = this.x - link.x;
				var dy = this.y - link.y;
				var d = Math.sqrt(dx * dx + dy * dy) //+ 0.001;
				d = 0.5 * (d - (this.rad + link.rad) * this.r) / d;
				dx *= d;
				dy *= d;
				this.x -= dx;
				this.y -= dy;
				link.x += dx;
				link.y += dy;
			}
			//  next point
			if (this.next) this.next.anim();
	    }
	}

// chain animation
	Chain.prototype.anim = function () {
		// mouse collision 
		var p = this.last;
		var dx = pointer.x - p.x;
		var dy = pointer.y - p.y;
		var d = Math.sqrt(dx * dx + dy * dy);
		if (d < p.rad) {
			var a = Math.atan2(dy, dx);
			p.x -= Math.cos(a) * (p.rad - d);
			p.y -= Math.sin(a) * (p.rad - d);
		}
		// head weight
		p.y += (canvas.height - p.y) / 400;
		// start position
		this.first.x = canvas.width  * this.ox;
		this.first.y = canvas.height * this.oy;
		// start chain animation
		this.first.anim();
	}

// chain collisions
	Chain.prototype.collide = function (c1) {
		var n0 = this.last;
		var n1 = c1.last;
		var dx = n0.x - n1.x;
		var dy = n0.y - n1.y;
		var d = Math.sqrt((dx * dx) + (dy * dy));
		if (d < (n0.rad + n1.rad)) {
			n0.x -= 1 / Math.max(1, dx);
			n1.x += 1 / Math.max(1, dx);
			n0.y -= 1 / Math.max(1, dy);
			n1.y += 1 / Math.max(1, dy);
		}
	}
	
	// modify head
	function head (p, img, w, h, rad, r) {
		var image   = new Image();
		image.src   = img;
		p.img       = image;
		p.w         = w;
		p.h         = h;
		p.rad       = rad;
		p.r         = r;
	}

// main loop
	function run() {
		// request next frame
		requestAnimationFrame(run);
		// clear screen
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		// verlet animation
		chain[0].anim();
		chain[1].anim();
		chain[2].anim();
		// collisions
		chain[0].collide(chain[1]);
		chain[0].collide(chain[2]);
		chain[1].collide(chain[2]);
	}

// canvas
	var canvas  = ge1doot.canvas("canvas");
	var ctx     = canvas.ctx;
	var pointer = canvas.pointer;
	var chain   = [];
	/* ==== create chains ==== */
	for (var i = 0; i < 3; i++) {
		// chain
		chain.push(
			new Chain(
				50,                       // number of links
				"https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/sphere-s.png",
				19,                       // half width image
				19,                       // half height image
				10,                       // radius
				0.6,                      // links strength
				0.1,                      // gravity
				((i + 1) * .166) + .166,  // x-origin
				1                         // y-origin
			)
		);
		// head
		head(chain[i].points[49], "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/sphere.png", 300, 300, 150, 0.95);
	}
	
	// zyva!
	run();
}();

CSS

HTML

Recommendation

Join Effecthub.com