"

From 2014.igem.org

Revision as of 02:52, 5 September 2014 (view source) Anuvedverma (Talk | contribs) ← Older edit		Revision as of 03:02, 5 September 2014 (view source) Anuvedverma (Talk | contribs) Newer edit →
Line 49:		Line 49:
	</div>		</div>
-	<canvas id="c"></canvas>	+	<!--NET ANIMATION-->
		+	<style type="text/css">
		+	body {
		+	background: white;
		+	}
		+	#c {
		+	display: block;
		+	margin: 20px auto 0;
		+	}
		+	</style>
		+	<script type="text/javascript">
		+	var physics_accuracy = 3,
		+	mouse_influence = 20,
		+	mouse_cut = 5,
		+	gravity = 1200,
		+	cloth_height = 20,
		+	cloth_width = 100,
		+	start_y = 20,
		+	spacing = 7,
		+	tear_distance = 60;
		+
		+
		+	window.requestAnimFrame =
		+	window.requestAnimationFrame ||
		+	window.webkitRequestAnimationFrame ||
		+	window.mozRequestAnimationFrame ||
		+	window.oRequestAnimationFrame ||
		+	window.msRequestAnimationFrame ||
		+	function (callback) {
		+	window.setTimeout(callback, 1000 / 60);
		+	};
		+
		+	var canvas,
		+	ctx,
		+	cloth,
		+	boundsx,
		+	boundsy,
		+	mouse = {
		+	down: false,
		+	button: 1,
		+	x: 0,
		+	y: 0,
		+	px: 0,
		+	py: 0
		+	};
		+
		+	var Point = function (x, y) {
		+
		+	this.x = x;
		+	this.y = y;
		+	this.px = x;
		+	this.py = y;
		+	this.vx = 0;
		+	this.vy = 0;
		+	this.pin_x = null;
		+	this.pin_y = null;
		+
		+	this.constraints = [];
		+	};
		+
		+	Point.prototype.update = function (delta) {
		+
		+	if (mouse.down) {
		+
		+	var diff_x = this.x - mouse.x,
		+	diff_y = this.y - mouse.y,
		+	dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
		+
		+	if (mouse.button == 1) {
		+
		+	if (dist < mouse_influence) {
		+	this.px = this.x - (mouse.x - mouse.px) * 1.8;
		+	this.py = this.y - (mouse.y - mouse.py) * 1.8;
		+	}
		+
		+	} else if (dist < mouse_cut) this.constraints = [];
		+	}
		+
		+	this.add_force(0, gravity);
		+
		+	delta *= delta;
		+	nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
		+	ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
		+
		+	this.px = this.x;
		+	this.py = this.y;
		+
		+	this.x = nx;
		+	this.y = ny;
		+
		+	this.vy = this.vx = 0
		+	};
		+
		+	Point.prototype.draw = function () {
		+
		+	if (this.constraints.length <= 0) return;
		+
		+	var i = this.constraints.length;
		+	while (i--) this.constraints[i].draw();
		+	};
		+
		+	Point.prototype.resolve_constraints = function () {
		+
		+	if (this.pin_x != null && this.pin_y != null) {
		+
		+	this.x = this.pin_x;
		+	this.y = this.pin_y;
		+	return;
		+	}
		+
		+	var i = this.constraints.length;
		+	while (i--) this.constraints[i].resolve();
		+
		+	if (this.x > boundsx) {
		+
		+	this.x = 2 * boundsx - this.x;
		+
		+	} else if (this.x < 1) {
		+
		+	this.x = 2 - this.x;
		+	}
		+
		+	if (this.y > boundsy) {
		+
		+	this.y = 2 * boundsy - this.y;
		+
		+	} else if (this.y < 1) {
		+
		+	this.y = 2 - this.y;
		+	}
		+	};
		+
		+	Point.prototype.attach = function (point) {
		+
		+	this.constraints.push(
		+	new Constraint(this, point)
		+	);
		+	};
		+
		+	Point.prototype.remove_constraint = function (lnk) {
		+
		+	var i = this.constraints.length;
		+	while (i--)
		+	if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
		+	};
		+
		+	Point.prototype.add_force = function (x, y) {
		+
		+	this.vx += x;
		+	this.vy += y;
		+	};
		+
		+	Point.prototype.pin = function (pinx, piny) {
		+	this.pin_x = pinx;
		+	this.pin_y = piny;
		+	};
		+
		+	var Constraint = function (p1, p2) {
		+
		+	this.p1 = p1;
		+	this.p2 = p2;
		+	this.length = spacing;
		+	};
		+
		+	Constraint.prototype.resolve = function () {
		+
		+	var diff_x = this.p1.x - this.p2.x,
		+	diff_y = this.p1.y - this.p2.y,
		+	dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
		+	diff = (this.length - dist) / dist;
		+
		+	if (dist > tear_distance) this.p1.remove_constraint(this);
		+
		+	var px = diff_x * diff * 0.5;
		+	var py = diff_y * diff * 0.5;
		+
		+	this.p1.x += px;
		+	this.p1.y += py;
		+	this.p2.x -= px;
		+	this.p2.y -= py;
		+	};
		+
		+	Constraint.prototype.draw = function () {
		+
		+	ctx.moveTo(this.p1.x, this.p1.y);
		+	ctx.lineTo(this.p2.x, this.p2.y);
		+	};
		+
		+	var Cloth = function () {
		+
		+	this.points = [];
		+
		+	var start_x = canvas.width / 2 - cloth_width * spacing / 2;
		+
		+	for (var y = 0; y <= cloth_height; y++) {
		+
		+	for (var x = 0; x <= cloth_width; x++) {
		+
		+	var p = new Point(start_x + x * spacing, start_y + y * spacing);
		+
		+	x != 0 && p.attach(this.points[this.points.length - 1]);
		+	y == 0 && p.pin(p.x, p.y);
		+	y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
		+
		+	this.points.push(p);
		+	}
		+	}
		+	};
		+
		+	Cloth.prototype.update = function () {
		+
		+	var i = physics_accuracy;
		+
		+	while (i--) {
		+	var p = this.points.length;
		+	while (p--) this.points[p].resolve_constraints();
		+	}
		+
		+	i = this.points.length;
		+	while (i--) this.points[i].update(.016);
		+	};
		+
		+	Cloth.prototype.draw = function () {
		+
		+	ctx.beginPath();
		+
		+	var i = cloth.points.length;
		+	while (i--) cloth.points[i].draw();
		+
		+	ctx.stroke();
		+	};
		+
		+	function update() {
		+
		+	ctx.clearRect(0, 0, canvas.width, canvas.height);
		+
		+	cloth.update();
		+	cloth.draw();
		+
		+	requestAnimFrame(update);
		+	}
		+
		+	function start() {
		+
		+	canvas.onmousedown = function (e) {
		+	mouse.button = e.which;
		+	mouse.px = mouse.x;
		+	mouse.py = mouse.y;
		+	var rect = canvas.getBoundingClientRect();
		+	mouse.x = e.clientX - rect.left,
		+	mouse.y = e.clientY - rect.top,
		+	mouse.down = true;
		+	e.preventDefault();
		+	};
		+
		+	canvas.onmouseup = function (e) {
		+	mouse.down = false;
		+	e.preventDefault();
		+	};
		+
		+	canvas.onmousemove = function (e) {
		+	mouse.px = mouse.x;
		+	mouse.py = mouse.y;
		+	var rect = canvas.getBoundingClientRect();
		+	mouse.x = e.clientX - rect.left,
		+	mouse.y = e.clientY - rect.top,
		+	e.preventDefault();
		+	};
		+
		+	canvas.oncontextmenu = function (e) {
		+	e.preventDefault();
		+	};
		+
		+	boundsx = canvas.width - 1;
		+	boundsy = canvas.height - 1;
		+
		+	ctx.strokeStyle = '#888';
		+	cloth = new Cloth();
		+	update();
		+	}
		+
		+	window.onload = function () {
		+
		+	canvas = document.getElementById('c');
		+	ctx = canvas.getContext('2d');
		+
		+	canvas.width = 1000;
		+	canvas.height = 250;
		+
		+	start();
		+	};
		+	</script>
		+	<canvas id="c"></canvas>
	</html>		</html>

---

Revision as of 03:02, 5 September 2014