沙丁鱼

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var RENDERER = {
	SARDIN_COUNT : 1000,
	OCEAN_COLOR_TOP : 'hsla(180, 100%, %l%, 0.6)',
	OCEAN_COLOR_BOTTOM : 'hsla(240, 100%, %l%, 0.6)',
	
	init : function(){
		this.setParameters();
		this.reconstructMethod();
		this.createSardins();
		this.render();
	},
	setParameters : function(){
		this.$container = $('#jsi-sardin-container');
		this.width = this.$container.width();
		this.height = this.$container.height();
		this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
		this.sardins = [];
	},
	reconstructMethod : function(){
		this.render = this.render.bind(this);
	},
	createSardins : function(){
		for(var i = 0, length = this.SARDIN_COUNT; i < length; i++){
			this.sardins.push(new SARDIN(this.width, this.height, i, this.sardins));
		}
	},
	render : function(){
		requestAnimationFrame(this.render);
		
		var vy = 0;
		
		for(var i = 0, length = this.SARDIN_COUNT; i < length; i++){
			vy += this.sardins[i].vy;
		}
		var gradient = this.context.createLinearGradient(0, 0, 0, this.height),
			luminance = Math.round(50 - 5 * vy / this.SARDIN_COUNT);
		
		gradient.addColorStop(0, this.OCEAN_COLOR_TOP.replace('%l', luminance));
		gradient.addColorStop(1, this.OCEAN_COLOR_BOTTOM.replace('%l', luminance));
		
		this.context.fillStyle = gradient;
		this.context.fillRect(0, 0, this.width, this.height);
		
		for(var i = 0, length = this.SARDIN_COUNT; i < length; i++){
			this.sardins[i].render(this.context);
		}
	}
};
var SARDIN = function(width, height, index, sardins){
	this.width = width;
	this.height = height;
	this.index = index;
	this.sardins = sardins;
	
	this.init();
};
SARDIN.prototype = {
	SARDIN_COLOR : '#FFFFFF',
	SCATTERING_LIMIT : 30,
	GATHERING_LIMIT : 50,
	MAX_VELOCITY : 2,
	TAIL_FREQUENCY : Math.PI / 10,
	FIELD_OFFSET : 1.2,
	
	init : function(){
		this.x = Math.random() * this.width;
		this.y = Math.random() * this.height;
		this.vx = 0;
		this.vy = 0;
		this.phi = Math.PI * 2 * Math.random();
	},
	render : function(context){
		context.save();
		context.translate(this.x, this.y);
		context.rotate(Math.atan2(this.vy, this.vx) + Math.PI);
		context.fillStyle = this.SARDIN_COLOR;
		
		context.save();
		context.scale(1, 0.8 + Math.sin(this.phi) * 0.2);
		context.beginPath();
		context.moveTo(-12, 0);
		context.bezierCurveTo(-8, -3, -4, -3, 0, -0.5);
		context.lineTo(0, 0.5);
		context.bezierCurveTo(-4, 3, -8, 3, -12, 0);
		context.fill();
		context.restore();
		
		context.save();
		context.scale(0.6 + Math.sin(this.phi) * 0.4, 1);
		context.beginPath();
		context.moveTo(0, -0.5);
		context.bezierCurveTo(1, -1, 2, -2, 3, -2);
		context.lineTo(3, 2);
		context.bezierCurveTo(2, 2, 1, 1, 0, 0.5);
		context.closePath();
		context.fill();
		context.restore();
		context.restore();
		
		this.phi += this.TAIL_FREQUENCY;
		this.phi %= Math.PI * 2;
		
		this.adjustVelocity();
		this.update();
	},
	adjustVelocity : function(){
		var scatteringVelocity = {count : 0, vx : 0, vy : 0},
			gatheringVelocity = {count : 0, vx : 0, vy : 0},
			synchronizingVelocity = {count : 0, vx : 0, vy : 0};
			
		for(var i = 0, length = this.sardins.length; i < length; i++){
			if(i == this.index){
				continue;
			}
			var sardin = this.sardins[i],
				dx = sardin.x - this.x,
				dy = sardin.y - this.y,
				distance = Math.sqrt(dx * dx + dy * dy);
			
			if(distance > this.GATHERING_LIMIT){
				continue;
			}
			if(distance < this.SCATTERING_LIMIT){
				var offset = distance / (this.SCATTERING_LIMIT - distance) * 3;
				
				scatteringVelocity.vx -= dx / offset;
				scatteringVelocity.vy -= dy / offset;
				scatteringVelocity.count++;
			}else{
				var offset = distance * 10;
				
				gatheringVelocity.vx += dx / offset;
				gatheringVelocity.vy += dy / offset;
				gatheringVelocity.count++;
			}
			synchronizingVelocity.vx += sardin.vx;
			synchronizingVelocity.vy += sardin.vy;
			synchronizingVelocity.count++;
		}
		if(scatteringVelocity.count){
			this.vx += scatteringVelocity.vx / scatteringVelocity.count;
			this.vy += scatteringVelocity.vy / scatteringVelocity.count;
		}
		if(gatheringVelocity.count){
			this.vx += gatheringVelocity.vx / gatheringVelocity.count;
			this.vy += gatheringVelocity.vy / gatheringVelocity.count;
		}
		if(synchronizingVelocity.count){
			this.vx += synchronizingVelocity.vx / synchronizingVelocity.count;
			this.vy += synchronizingVelocity.vy / synchronizingVelocity.count;
		}
		var velocity = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
		
		if(velocity > this.MAX_VELOCITY){
			var rate = this.MAX_VELOCITY / velocity;
			
			this.vx *= rate;
			this.vy *= rate;
		}
	},
	update : function(){
		var fieldLeft = this.width * (1 - this.FIELD_OFFSET),
			fieldRight = this.width * this.FIELD_OFFSET,
			fieldTop = this.height * (1 - this.FIELD_OFFSET),
			fieldBottom = this.height * this.FIELD_OFFSET;
			
		if(this.x < fieldLeft){
			this.x = fieldLeft;
			this.vx *= -1;
		}else if(this.x > fieldRight){
			this.x = fieldRight;
			this.vx *= -1;
		}
		if(this.y < fieldTop){
			this.y = fieldTop;
			this.vy *= -1;
		}else if(this.y > fieldBottom){
			this.y = fieldBottom;
			this.vy *= -1;
		}
		this.x += this.vx;
		this.y += this.vy;
	}
};
$(function(){
	RENDERER.init();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>沙丁鱼-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号