HTML5引力场模拟

force field simulation

h5, physics

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 1098
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var initialConditions = {
	x: 20,		// Percent from left
	y: 50,		// Percent from top
	vx: 0.2,
	vy: 0.15
};

var scaleFactors = {
	proportional: 0.000000001,
	inverse:	0.00005,
	inverse_squared: 0.0008
}

var Orb = function( obj ) {
	
	var that = this;

this.orb = obj;
	this.radius;
	this.x;
	this.y;
	this.vx;
	this.vy;

this.maxF;

this.init = function() {
		this.radius = this.orb.offsetWidth / 2;
		var rect = this.orb.getBoundingClientRect();

var w = this.orb.parentNode.offsetWidth;
		var h = this.orb.parentNode.offsetHeight;

this.x = this.radius + ( w - this.radius * 2 ) * initialConditions.x / 100;
		this.y = this.radius + ( h - this.radius * 2 ) * initialConditions.y / 100;
		this.vx = initialConditions.vx;
		this.vy = initialConditions.vy;
		this.maxF = 0;

this.setEvents();
	}

this.setEvents = function() {
		addEvent( 'touchmove', this.orb, this.move );
		addEvent( 'mousedown', this.orb, this.initMove );
	}
	
	this.initMove = function(e) {
		if ( typeof e == 'undefined' ) e = window.event;
		addEvent( 'mousemove', that.orb, move );
		addEvent( 'mouseup', that.orb, function(e) {
			var e = e || window.event;
			removeEvent( 'mousemove', that.orb, move );
		} );
	}

this.move = function(e) {
		if ( typeof e == 'undefined' ) e = window.event;
		e.preventDefault();
		var orb = e.target;
		if ( e.changedTouches ) {
			var x = e.changedTouches[0].pageX;
			var y = e.changedTouches[0].pageY;
		}
		else {
			var x = e.clientX;
			var y = e.clientY;
		}
		
		that.x = x;
		that.y = y;
		that.setPosition();
	}

this.left = function() { return ( this.x - this.radius ); }
	this.right = function() { return ( this.x + this.radius ); }
	this.top = function() { return ( this.y - this.radius ); }
	this.bottom = function() { return ( this.y + this.radius ); }

this.applyForce = function( fx, fy, dt ) {
		this.vx = this.vx + fx*dt;
		this.vy = this.vy + fy*dt;
		this.x = this.x + this.vx*dt;
		this.y = this.y + this.vy*dt;

this.setPosition();
	}

this.setPosition = function() {
		this.orb.style.left = +this.x - +this.radius + 'px';
		this.orb.style.top = +this.y - +this.radius + 'px';
	}

this.init();
}

var Field = function( obj ) {
	
	this.field = obj;
	this.scaleFactor = 0.001;
	this.physics;
	this.width;
	this.height;
	this.scaleDimension;

this.init = function() {
		this.physics = 'proportional';
		this.width = this.field.offsetWidth;
		this.height = this.field.offsetHeight;
		this.scaleDimension = Math.max( this.width, this.height );
	}

this.f = function( x, y ) {
		// translate to center
		var tx = this.width/2 - x;
		var ty = this.height/2 - y;

if ( this.physics == 'inverse' ) {
			return this.inverseField( tx, ty );
		} else if ( this.physics == 'inverse_squared' ) {
			return this.inverseSquaredField( tx, ty );
		}
		return this.proportionalField( tx, ty );
	}

this.inverseField = function( x, y ) {
		var r = Math.sqrt( x*x + y*y );
		if ( r < 1 ) {
			return { x: 0, y: 0 };
		} else {
			return { x: scaleFactors.inverse*this.scaleDimension*x/(r*r), y: scaleFactors.inverse*this.scaleDimension*y/(r*r) }; 
		}
	}

this.inverseSquaredField = function( x, y ) {
		var r = Math.sqrt( x*x + y*y );
		if ( r < 1 ) {
			return { x: 0, y: 0 };
		} else {
			return { x: scaleFactors.inverse_squared*this.scaleDimension*x/(r*r*r), y: scaleFactors.inverse_squared*this.scaleDimension*y/(r*r*r) }; 
		}
	}

this.proportionalField = function( x, y ) {
		return { x: scaleFactors.proportional*this.scaleDimension*x, y: scaleFactors.proportional*this.scaleDimension*y };
	}
	
	this.init();
}

var Source = function( obj ) {

this.source = obj;
	this.x;
	this.y;
	
	this.init = function() {
		this.x = this.source.offsetLeft;
		this.y = this.source.offsetTop;
	}

this.glow = function( fx, fy ) {
		var fr = Math.sqrt( fx*fx + fy*fy );
		var spread = Math.floor( 200000*fr );
		var blur = spread + 10;
		var shadow = '0 0 ' + blur + 'px ' + spread + 'px rgba(255,255,255,0.9)';
		this.source.style.boxShadow = shadow;
	}

this.init();
}

var Status = function( obj ) {

this.status = obj;
	this.fieldWidth;
	this.fieldHeight;
	this.maxV;
	this.maxF;
	this.width;
	this.x;
	this.y;
	this.vx;
	this.vy;
	this.fx;
	this.fy;

this.init = function() {
		var divs = this.status.getElementsByTagName('div');
		this.x = divs[0];
		this.y = divs[3];
		this.vx = divs[1];
		this.vy = divs[4];
		this.fx = divs[2];
		this.fy = divs[5];
		this.width = this.status.offsetWidth - 32;

this.maxV = 0;
		this.maxF = 0;
	}

this.setDimensions = function( w, h ) {
		this.fieldWidth = w;
		this.fieldHeight = h;
	}

this.report = function( x, y, vx, vy, fx, fy ) {
		
		var maxV = Math.max( Math.abs( vx ), Math.abs( vy ) );
		if ( maxV > this.maxV ) this.maxV = maxV;

var maxF = Math.max( Math.abs( fx ), Math.abs( fy ) );
		if ( maxF > this.maxF ) this.maxF = maxF;

this.x.style.width = ( this.width * x / this.fieldWidth ) + 'px';
		this.x.textContent = 'X: ' + Math.floor( x );
		this.y.style.width = ( this.width * y / this.fieldHeight ) + 'px';
		this.y.textContent = 'Y: ' + Math.floor( y );

this.vx.style.width = ( this.width * Math.abs( vx ) / this.maxV ) + 'px';
		this.vx.textContent = 'Vx: ' + vx.toFixed(2);

this.vy.style.width = ( this.width * Math.abs( vy ) / this.maxV ) + 'px';
		this.vy.textContent = 'Vy: ' + vy.toFixed(2);

this.fx.style.width = ( this.width * Math.abs( fx ) / this.maxF ) + 'px';
		this.fx.textContent = 'Fx: ' + fx.toFixed(6);

this.fy.style.width = ( this.width * Math.abs( fy ) / this.maxF ) + 'px';
		this.fy.textContent = 'Fy: ' + fy.toFixed(6);
	}

this.init();
}

var run = function() {
	
	var animated = true;

var field = new Field( document.getElementsByTagName('div')[0] );
	var orb = new Orb( document.getElementById('orb') );
	var source = new Source( document.getElementById('source') );

var desc = document.getElementById('control-description');
	var status = new Status( document.getElementById('status') );
	status.setDimensions( field.width, field.height );

var dt;
	var tNow, tThen = new Date();

addEvent( 'click', document.getElementById('orb-control'), function() {
		if ( animated ) {
			animated = false;
			this.className = this.className.replace( 'orb-control-stop', 'orb-control-play' );
			desc.textContent = 'Touch the orb to the source to reset the velocity';
	 	} else {
			animated = true;
			this.className = this.className.replace( 'orb-control-play', 'orb-control-stop' );
			desc.textContent = 'Stop the orb and drag it to a new position';
		}
	} );

addEvent( 'change', document.getElementById('force'), function(e) {
		if ( typeof e == 'undefined' ) e = window.event;
		field.physics = e.target.value;
	} );

setInterval( function() {
		tNow = new Date();
		dt = tNow - tThen;
		var f = field.f( orb.x, orb.y );

if ( animated == true ) {
			animate( f.x, f.y, dt );
		}
		else {
			// Test if the orb touches the source. Reset velocity.
			var y = Math.abs( orb.y - source.y );
			var x = Math.abs( orb.x - source.x );
			if ( Math.sqrt( x*x + y*y ) < orb.radius ) {
				orb.vx = 0;
				orb.vy = 0;
			}
		}

testBounds();
		source.glow( f.x, f.y );
		status.report( orb.x, orb.y, orb.vx, orb.vy, f.x, f.y );

tThen = tNow;

}, 1000/60 );

var animate = function( fx, fy, dt ) {
		orb.applyForce( fx, fy, dt );
	}

var addEvent = function( type, obj, func ) {
	if ( obj && obj.addEventListener ) {
		obj.addEventListener( type, func, false );
	}
	else if ( obj && obj.attachEvent ) {
		obj.attachEvent( 'on' + type, func );
	}
}

var removeEvent = function( type, obj, func ) {
	if ( obj && obj.removeEventListener ) {
		obj.removeEventListener( type, func, false );
	}
	else if ( obj && obj.detachEvent ) {
		obj.detachEvent( 'on' + type, func );
	}
}

run();

编译

CSS

body {
  margin: 0;
}

.field {
	position: relative;
	width: 100%;
	height: 500px;
	background: #001;
}

#source {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px 30px rgba(255,255,255,0.5);
}

#orb {
	position: absolute;
	width: 40px;
	height: 40px;
	background: #ccf;
	border-radius: 50%;
	box-shadow: inset 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1);
}

#orb:before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 10px;
	height: 10px;
	background: #ddf;
	border-radius: 50%;
}

.panel {
	padding: 10px;
	font-family: helvetica, arial, "sans serif";
	background: #f8f8f8;
}

.orb-control {
	float: left;
	position: relative;
	margin: 0 0 20px 0;
	width: 64px;
	height: 64px;
	background: #222;
	border: 1px solid #222;
	border-radius: 4px;
}

.orb-control-stop:before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 44px;
	height: 44px;
	background: #f00;
}

.orb-control-play:before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 44px solid #0f0;
}

.control-description {
	float: left;
	margin: 20px 0 0 20px;
	font-family: helvetica, arial, 'sans serif';
	font-size: 24px;
}

#status {
	clear: both;
	margin: 0 0 20px 84px;
	background: #f8f8f8;
}

#status div {
	margin: 4px 0;
	font-weight: 600;
	white-space: nowrap;
	background: red;
}

HTML

force field simulation

h5, physics

编辑器支持Emmet

快捷键

force field simulation

h5, physics

HTML5 Canvas流体动力学模拟动画

使用HTML5绘制麦克斯韦电磁场 | 磁力线延伸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：