素材网 素材网

canvas个性特效拖动大树摇摆叶子

下载资源()次

阅读次数()次

发布时间:2015-03-16

canvas个性特效拖动大树摇摆叶子
分享到:

用法简介:

来源:xw素材网

canvas个性特效拖动大树摇摆叶子。
文件引用:

<script type="text/javascript">
function lerp(a, b, p) {
	return (b - a) * p + a;
}
VerletJS.prototype.tree = function (origin, depth, branchLength, segmentCoef, theta) {
	var lineCoef = 0.7;
	this.origin = origin;
	this.base = new Particle(origin);
	this.root = new Particle(origin.add(new Vec2(0, 10)));
	var composite = new this.Composite();
	composite.particles.push(this.base);
	composite.particles.push(this.root);
	composite.pin(0);
	composite.pin(1);
	var branch = function (parent, i, nMax, coef, normal) {
		var particle = new Particle(parent.pos.add(normal.scale(branchLength * coef)));
		composite.particles.push(particle);
		var dc = new DistanceConstraint(parent, particle, lineCoef);
		dc.p = i / nMax; // a hint for drawing
		composite.constraints.push(dc);
		particle.leaf = !(i < nMax);
		if (i < nMax) {
			var a = branch(particle, i + 1, nMax, coef * coef, normal.rotate(new Vec2(0, 0), -theta));
			var b = branch(particle, i + 1, nMax, coef * coef, normal.rotate(new Vec2(0, 0), theta));
			var jointStrength = lerp(0.7, 0, i / nMax);
			composite.constraints.push(new AngleConstraint(parent, particle, a, jointStrength));
			composite.constraints.push(new AngleConstraint(parent, particle, b, jointStrength));
		}
		return particle;
	}
	var firstBranch = branch(this.base, 0, depth, segmentCoef, new Vec2(0, -1));
	composite.constraints.push(new AngleConstraint(this.root, this.base, firstBranch, 1));
	// animates the tree at the beginning
	var noise = 10;
	var i;
	for (i = 0; i < composite.particles.length; ++i)
		composite.particles[i].pos.mutableAdd(new Vec2(Math.floor(Math.random() * noise, Math.floor(Math.random() * noise))));
	this.composites.push(composite);
	return composite;
}
window.onload = function () {
	var canvas = document.getElementById("scratch");
	// canvas dimensions
	var width = parseInt(canvas.style.width);
	var height = parseInt(canvas.style.height);
	// retina
	var dpr = window.devicePixelRatio || 1;
	canvas.width = width * dpr;
	canvas.height = height * dpr;
	canvas.getContext("2d").scale(dpr, dpr);
	// simulation
	var sim = new VerletJS(width, height, canvas);
	sim.gravity = new Vec2(0, 0);
	sim.friction = 0.98;
	// entities
	var tree1 = sim.tree(new Vec2(width / 4, height - 120), 5, 70, 0.95, (Math.PI / 2) / 3);
	var tree2 = sim.tree(new Vec2(width - width / 4, height - 120), 5, 70, 0.95, (Math.PI / 2) / 3);
	tree2.drawParticles = function (ctx, composite) {
		var i;
		for (i = 0; i < composite.particles.length; ++i) {
			var particle = composite.particles[i];
			if (particle.leaf) {
				ctx.beginPath();
				ctx.arc(particle.pos.x, particle.pos.y, 25, 0, 2 * Math.PI);
				ctx.fillStyle = "#679d7c";
				ctx.fill();
			}
		}
	}
	tree2.drawConstraints = function (ctx, composite) {
		var i;
		ctx.save();
		ctx.strokeStyle = "#543324";
		ctx.lineCap = "round";
		for (i = 0; i < composite.constraints.length; ++i) {
			var constraint = composite.constraints[i];
			if (!(constraint instanceof DistanceConstraint && typeof constraint.p != "undefined"))
				continue;
			ctx.beginPath();
			ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
			ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
			ctx.lineWidth = lerp(10, 2, constraint.p);
			ctx.stroke();
		}
		ctx.restore();
	}
	// animation loop
	var loop = function () {
		sim.frame(16);
		sim.draw();
		requestAnimFrame(loop);
	};
	loop();
};
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。