下降时间

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

! function ()
{
	"use strict";

/* ==== screen setup ==== */

screen.elem.onselectstart = function ()
	{
		return false;
	}
	screen.elem.ondrag = function ()
	{
		return false;
	}
	var ctx = screen.elem.getContext("2d");
	window.addEventListener('resize', screen.resize, false);

/* ==== pointer setup ==== */

if ('ontouchstart' in window)
	{
		screen.elem.ontouchstart = function (e)
		{
			pointer.down(e, true);
		}.bind(pointer);
		screen.elem.ontouchmove = function (e)
		{
			pointer.move(e, true);
		}.bind(pointer);
		screen.elem.ontouchend = function (e)
		{
			pointer.up(e, true);
		}.bind(pointer);
		screen.elem.ontouchcancel = function (e)
		{
			pointer.up(e, true);
		}.bind(pointer);
	}
	document.addEventListener("mousedown", function (e)
	{
		pointer.down(e, false);
	}.bind(pointer), true);
	document.addEventListener("mousemove", function (e)
	{
		pointer.move(e, false);
	}.bind(pointer), true);
	document.addEventListener("mouseup", function (e)
	{
		pointer.up(e, false);
	}.bind(pointer), true);

/* ==== vector 2D library ==== */

// SIMD Array vectors

array: function (n, values)
		{
			var array = new Array(n);
			array.min = new Vector();
			array.max = new Vector();
			for (var i = 0; i < n; i++)
			{
				array[i] = new Vector(
					values ? values[i * 2 + 0] : 0.0,
					values ? values[i * 2 + 1] : 0.0
				);
			}
			array.transform = function (v, m)
			{
				for (var i = 0, len = this.length; i < len; i++)
				{
					var vi = v[i],
						elem = this[i];
					var x = m.cos * vi.x - m.sin * vi.y + m.pos.x;
					var y = m.sin * vi.x + m.cos * vi.y + m.pos.y;
					if (x < this.min.x) this.min.x = x;
					if (y < this.min.y) this.min.y = y;
					if (x > this.max.x) this.max.x = x;
					if (y > this.max.y) this.max.y = y;
					elem.x = x;
					elem.y = y;
				}
				return this;
			}
			array.rotate = function (v, m)
			{
				for (var i = 0, len = this.length; i < len; i++)
				{
					var vi = v[i],
						elem = this[i];
					elem.x = m.cos * vi.x - m.sin * vi.y;
					elem.y = m.sin * vi.x + m.cos * vi.y;
				}
				return this;
			}
			array.resetMinmax = function ()
			{
				this.min.x = 100000.0;
				this.min.y = 100000.0;
				this.max.x = -100000.0;
				this.max.y = -100000.0;
			}
			array.normal = function (points)
			{
				for (var i = 0; i < this.length; i++)
				{
					this[i].normal(
						points[(i + 1) % this.length],
						points[i]
					);
				}
				return this;
			}
			return array;
		}
	}

/* ==== Matrix container ==== */

function Matrix()
	{
		this.cos = 0.0;
		this.sin = 0.0;
		this.pos = new Vector();
		this.ang = 0.0;
	}

Matrix.prototype = {
		set: function (a, x, y, w, h)
		{
			this.cos = Math.cos(a);
			this.sin = Math.sin(a);
			this.ang = a;
			this.pos.x = x;
			this.pos.y = y;
			this.w = w;
			this.h = h;
			return this;
		},
		copy: function (matrix)
		{
			this.cos = matrix.cos;
			this.sin = matrix.sin;
			this.ang = matrix.ang;
			this.pos.x = matrix.pos.x;
			this.pos.y = matrix.pos.y;
			return this;
		},
		integrate: function (va, vx, vy, kTimeStep)
		{
			this.pos.x += vx * kTimeStep;
			this.pos.y += vy * kTimeStep;
			this.ang += va * kTimeStep;
			this.cos = Math.cos(this.ang);
			this.sin = Math.sin(this.ang);
			return this;
		}
	}

/* ==== PHY2D continuous collision engine ==== */

var PHY2D = function (ctx, pointer, Vector, Matrix)
	{
		var kGravity = 5;
		var kTimeStep = 1 / 60;
		var kFriction = 0.5;
		var objects = [];
		var drag = false;
		var v0 = new Vector();
		var v1 = new Vector();
		var v2 = new Vector();
		var v3 = new Vector();
		var v4 = new Vector();
		var v5 = new Vector();

// contacts list

var contacts = [];
		contacts.index = 0;
		contacts.create = function (A, B, pa, pb, nx, ny)
		{
			if (!this[this.index]) this[this.index] = new Contact();
			this[this.index++].set(A, B, pa, pb, nx, ny);
		}

// AABB container

function AABB()
		{
			this.x = 0.0;
			this.y = 0.0;
			this.w = 0.0;
			this.h = 0.0;
		}

// Polygon constructor

function Polygon(x, y, w, h, vertices, invMass, angle, img)
		{
			this.img = img;
			this.vel = new Vector();
			this.angularVel = 0.0;
			this.invMass = invMass;
			this.matrix = new Matrix().set(angle, x, y, w, h);
			this.aabb = new AABB();
			this.drag = false;
			this.static = false;
			this.length = (vertices.length / 2) | 0;
			this.localSpacePoints = new Vector().array(this.length, vertices);
			this.localSpaceNormals = new Vector().array(this.length).normal(this.localSpacePoints);
			this.worldSpaceNormals = new Vector().array(this.length);
			this.worldSpacePoints = new Vector().array(this.length);
			this.invI = (invMass > 0) ? 1 / ((1 / invMass) * (w * w + h * h) / 3) : 0
			this.c1 = new Vector();
			this.c0 = new Vector();
			objects.push(this);
		}

Polygon.prototype = {

// calculate aabb & transform world space points

motionAABB: function ()
			{
				this.worldSpacePoints.resetMinmax();
				this.worldSpacePoints.transform(this.localSpacePoints, this.matrix);
				this.worldSpaceNormals.rotate(this.localSpaceNormals, this.matrix);
				var min = this.worldSpacePoints.min;
				var max = this.worldSpacePoints.max;
				this.aabb.x = (min.x + max.x) * 0.5;
				this.aabb.y = (min.y + max.y) * 0.5;
				this.aabb.w = (max.x - min.x) * 0.5;
				this.aabb.h = (max.y - min.y) * 0.5;
			},

// Poly vs poly collision detection (Minkowski Difference)

contact: function (that)
			{
				var face, vertex, vertexRect, faceRect, fp, va, vb, vc, nx, ny, wsN, wdV0, wdV1, wsV0, wsV1;
				mostSeparated.set(100000, -1, -1, 0, 100000);
				mostPenetrating.set(-100000, -1, -1, 0, 100000);
				this.featurePairJudgement(that, 2);
				that.featurePairJudgement(this, 1);
				
				if (mostSeparated.dist > 0 && mostSeparated.fpc !== 0)
				{
					face = mostSeparated.edge;
					vertex = mostSeparated.closestI;
					fp = mostSeparated.fpc;
				}
				else if (mostPenetrating.dist <= 0)
				{
					face = mostPenetrating.edge;
					vertex = mostPenetrating.closestI;
					fp = mostPenetrating.fpc;
				}
				
				if (fp === 1) vertexRect = this, faceRect = that;
				else vertexRect = that, faceRect = this;
				
				wsN = faceRect.worldSpaceNormals[face];
				va = vertexRect.worldSpacePoints[(vertex - 1 + vertexRect.length) % vertexRect.length];
				vb = vertexRect.worldSpacePoints[vertex];
				vc = vertexRect.worldSpacePoints[(vertex + 1) % vertexRect.length];
				if (v0.project(vb, va, wsN) < v1.project(vc, vb, wsN))
				{
					wdV0 = va;
					wdV1 = vb;
				}
				else
				{
					wdV0 = vb;
					wdV1 = vc;
				}
				wsV0 = faceRect.worldSpacePoints[face];
				wsV1 = faceRect.worldSpacePoints[(face + 1) % faceRect.length];
				if (fp === 1)
				{
					this.projectPointOntoEdge(wsV0, wsV1, wdV0, wdV1);
					that.projectPointOntoEdge(wdV1, wdV0, wsV0, wsV1);
					nx = -wsN.x;
					ny = -wsN.y;
				}
				else
				{
					this.projectPointOntoEdge(wdV1, wdV0, wsV0, wsV1);
					that.projectPointOntoEdge(wsV0, wsV1, wdV0, wdV1);
					nx = wsN.x;
					ny = wsN.y;
				}
				contacts.create(this, that, this.c0, that.c0, nx, ny);
				contacts.create(this, that, this.c1, that.c1, nx, ny);
			},

featurePairJudgement: function (that, fpc)
			{
				var wsN, closestI, closest, dist;
				for (var edge = 0; edge < this.length; edge++)
				{
					wsN = this.worldSpaceNormals[edge];
					v5.rotateIntoSpaceOf(wsN, that.matrix);
					var closestI = -1,
						closestD = -100000;

for (var i = 0; i < that.length; i++)
					{
						var d = v5.dot(that.localSpacePoints[i]);
						if (d > closestD)
						{
							closestD = d;
							closestI = i;
						}
					}

var closest = that.worldSpacePoints[closestI];
					v0.sub(closest, this.worldSpacePoints[edge]);
					var dist = v0.dot(wsN);

if (dist > 0)
					{
						v1.sub(closest, this.worldSpacePoints[(edge + 1) % this.length]);
						dist = this.projectPointOntoEdgeZero(v0, v1).lenSqr();

if (dist < mostSeparated.dist)
						{
							mostSeparated.set(dist, closestI, edge, fpc);
						}
					}
					else
					{
						if (dist > mostPenetrating.dist)
						{
							mostPenetrating.set(dist, closestI, edge, fpc);
						}
					}
				}
			},

projectPointOntoEdge: function (p0, p1, e0, e1)
			{
				var l = v2.sub(e1, e0).lenSqr() + 0.0000001;
				this.c0.addScale(e0, v2, v3.clamp(v3.sub(p0, e0).dot(v2) / l, 0, 1));
				this.c1.addScale(e0, v2, v3.clamp(v3.sub(p1, e0).dot(v2) / l, 0, 1));
			},

projectPointOntoEdgeZero: function (e0, e1)
			{
				var l = v2.sub(e1, e0).lenSqr() + 0.0000001;
				return this.c0.addScale(e0, v2, v3.clamp(v3.inv(e0).dot(v2) / l, 0, 1));
			},

// integrate

integrate: function ()
			{
				if (this.drag)
				{
					this.vel.x += (pointer.pos.x - this.matrix.pos.x);
					this.vel.y += (pointer.pos.y - this.matrix.pos.y);
				}
				else
				{
					if (this.invMass > 0) this.vel.y += kGravity;
				}

this.matrix.integrate(this.angularVel, this.vel.x, this.vel.y, kTimeStep);

if (!this.static) this.motionAABB();
				else
				{
					if (this.invMass === 0)
					{
						this.static = true;
						this.motionAABB();
					}
				}
			},

// draw image

draw: function ()
			{
				if (this.img)
				{
					var m = this.matrix;
					ctx.save();
					ctx.translate(m.pos.x, m.pos.y);
					ctx.rotate(m.ang);
					ctx.drawImage(this.img, -m.w * 0.5, -m.h * 0.5, m.w, m.h);
					ctx.restore();

if (pointer.active)
					{
						if (!drag && this.invMass)
						{
							ctx.beginPath();
							for (var j = 0; j < this.length; j++)
							{
								var a = this.worldSpacePoints[j];
								ctx.lineTo(a.x, a.y);
							}
							ctx.closePath();
							if (ctx.isPointInPath(pointer.pos.x, pointer.pos.y))
							{
								this.drag = true;
								drag = true;
							}
						}
					}
					else
					{
						if (drag)
						{
							for (var i = 0; i < objects.length; i++) objects[i].drag = false;
							drag = false;
						}
					}
				}
			}
		}

// Feature pair container

function FeaturePair()
		{
			this.dist = 0;
			this.closestI = 0;
			this.edge = 0;
			this.fpc = 0;
		}

FeaturePair.prototype.set = function (dist, closestI, edge, fpc)
		{
			this.dist = dist;
			this.closestI = closestI;
			this.edge = edge;
			this.fpc = fpc;
		}

var mostSeparated = new FeaturePair();
		var mostPenetrating = new FeaturePair();

// Contacts Constructor

function Contact()
		{
			this.a = null;
			this.b = null;
			this.normal = new Vector();
			this.normalPerp = new Vector();
			this.ra = new Vector();
			this.rb = new Vector();
			this.dist = 0;
			this.impulseN = 0;
			this.impulseT = 0;
			this.invDenom = 0;
			this.invDenomTan = 0;
		}

Contact.prototype = {

// set new contact

set: function (A, B, pa, pb, nx, ny)
			{
				var ran, rbn;
				this.a = A;
				this.b = B;
				this.normal.set(nx, ny);
				this.normalPerp.set(-ny, nx);
				this.dist = v1.sub(pb, pa).dot(this.normal);
				this.impulseN = 0;
				this.impulseT = 0;
				this.ra.sub(pa, A.matrix.pos).perp();
				this.rb.sub(pb, B.matrix.pos).perp();
				ran = this.ra.dot(this.normal);
				rbn = this.rb.dot(this.normal);
				this.invDenom = 1 / (A.invMass + B.invMass + (ran * ran * A.invI) + (rbn * rbn * B.invI));
				ran = this.ra.dot(this.normalPerp);
				rbn = this.rb.dot(this.normalPerp);
				this.invDenomTan = 1 / (A.invMass + B.invMass + (ran * ran * A.invI) + (rbn * rbn * B.invI));
			},

applyImpulse: function (imp)
			{
				// linear
				this.a.vel.addScale(this.a.vel, imp, this.a.invMass);
				this.b.vel.subScale(this.b.vel, imp, this.b.invMass);

// angular
				this.a.angularVel += imp.dot(this.ra) * this.a.invI;
				this.b.angularVel -= imp.dot(this.rb) * this.b.invI;
			},

// solve contacts

solve: function ()
			{
				var newImpulse, absMag, dv = v1;

// relative velocities
				dv.sub(
					v2.addScale(this.b.vel, this.rb, this.b.angularVel),
					v3.addScale(this.a.vel, this.ra, this.a.angularVel)
				);

// new impulse
				newImpulse = (dv.dot(this.normal) + this.dist / kTimeStep) * this.invDenom + this.impulseN;
				if (newImpulse > 0) newImpulse = 0;
				this.applyImpulse(v2.scale(this.normal, newImpulse - this.impulseN));
				this.impulseN = newImpulse;

// friction impulse
				absMag = Math.abs(this.impulseN) * kFriction;
				newImpulse = v2.clamp(dv.dot(this.normalPerp) * this.invDenomTan + this.impulseT, -absMag, absMag);
				this.applyImpulse(v3.scale(this.normalPerp, newImpulse - this.impulseT));
				this.impulseT = newImpulse;
			}
		}

function render()
		{
			// aabb broadphase
			
			contacts.index = 0;
			for (var i = 0, len = objects.length; i < len - 1; i++)
			{
				var A = objects[i];
				for (var j = i + 1; j < len; j++)
				{
					var B = objects[j];
					if (A.invMass || B.invMass)
					{
						var a = A.aabb,
							b = B.aabb;
						if (
							Math.abs(b.x - a.x) - (a.w + b.w) < 0 &&
							Math.abs(b.y - a.y) - (a.h + b.h) < 0
						) A.contact(B);
					}

}
			}

// solver

var len = contacts.index;

for (var j = 0; j < 5; j++)
			{
				for (var i = 0; i < len; i++)
				{
					contacts[i].solve();
				}
			}

// integration

for (var i = 0, len = objects.length; i < len; i++)
			{
				objects[i].integrate();
			}

// draw polygons

for (var i = 0; i < len; i++)
			{
				var rb = objects[i];
				rb.draw();

}
		}

// public interface

return {

render: render,

// create new rectangle

rectangle: function (x, y, w, h, mass, angle, img)
			{
				var vertices = [
					w / 2, -h / 2, -w / 2, -h / 2, -w / 2, h / 2,
					w / 2, h / 2
				];

var invMass = mass ? 1 / mass : 0;
				return new Polygon(x, y, w, h, vertices, invMass, angle, img);
			},

// delete static objects

deleteStatic: function ()
			{
				var k = objects.length;
				while (k--)
				{

var p = objects[k];
					if (!p.invMass) objects.splice(k, 1);

}
			},

// draw numbers

number: function (w, h, text)
			{
				var img = document.createElement("canvas");
				var context = img.getContext("2d");
				img.width = w;
				img.height = h;
				context.font = "bold " + (w * 0.92) + "px arial";
				context.fillStyle = hsl;
				context.fillText(text, 0, h * 0.97);
				return img;
			},

// delete objects

delete: function (object)
			{
				for (var i = 0, len = objects.length; i < len; i++)
				{

if (objects[i] === object)
					{
						objects.splice(i, 1);
						return;
					}

}
			}
		}
	}(ctx, pointer, Vector, Matrix);

/* ==== clock logic ==== */

screen.resize();

function n(n)
	{
		return n > 9 ? "" + n : "0" + n;
	}

var hb = "",
		mb = "",
		hsl = "",
		hue = 0,
		lum = 0,
		xp = 0;
	var hour, minut, seconds = [];

function addNumber(w, x, t, m, a)
	{
		var h = (w * 0.69) | 0;
		var img = PHY2D.number(w, h, t);
		return PHY2D.rectangle(x, -w, w, h, m, a, img);

}

function toc()
	{
		// what time is it ?

var t = new Date(),
			hr = n(t.getHours()),
			mn = n(t.getMinutes()),
			sc = n(t.getSeconds()),
			w, h, img, sec;

// hour

if (hr != hb)
		{
			hue = (Math.random() * 360) | 0;
			hsl = "hsl(" + hue + ", 70%, 80%)";
			w = (screen.width / 3) | 0;
			PHY2D.delete(hour);
			hour = addNumber(w, w * 1.2, hr, 1, 0);
			hb = hr;
		}

// minute

if (mn != mb)
		{
			// new color hue
			hue = (Math.random() * 360) | 0;
			hsl = "hsl(" + hue + ", 70%, 60%)";

// change hour color
			w = (screen.width / 3) | 0;
			h = (w * 0.69) | 0;
			img = PHY2D.number(w, h, hr);
			hour.img = img;

// delete old minute and create new one
			w = (screen.width / 5) | 0;
			PHY2D.delete(minut);
			minut = addNumber(w, screen.width - w * 1.2, mn, 1, 0);
			mb = mn;

// delete old seconds
			for (var i = 0; i < seconds.length; i++)
			{
				setTimeout(function ()
				{
					PHY2D.delete(seconds.shift());
				}, i * 60)
			}
			xp = 0;
		}

// seconds
		hsl = "hsl(" + hue + ",70%," + ((20 + Math.random() * 80) | 0) + "%)";
		w = (screen.width / 15) | 0;
		sec = addNumber(w, w + (xp * w) % (screen.width - (w * 2)), sc, 0.1, Math.random() * 2 * Math.PI);
		seconds.push(sec);
		xp++;
	}

toc();
	setInterval(toc, 1000);
	
	/* ==== main loop ==== */

function run()
	{
		requestAnimationFrame(run);
		ctx.clearRect(0, 0, screen.width, screen.height);
		PHY2D.render();

}

requestAnimationFrame(run);

}();

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