ScriptingAnimation.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  jone</title>
    <style type="text/css">
      	*{padding: 0; margin: 0;font-size: 0;line-height: 0}
    </style>
</head>
<body>
  <svg viewbox="-400 -400 800 800 " width="800" height="800">
		<path id="links" stroke-width="1" stroke="gray"/>
	</svg>
    
</body>
<script>
	(function(){
	function Vector(x,y){
		this.x=x||0;
		this.y=y||0;
	}
	Vector.prototype={
		constructor:Vector,
		square:function(){
			return this.x*this.x+this.y*this.y;
		},
		length:function(){
			return Math.sqrt(this.square())
		},
		add:function(q){
			return new Vector(this.x+q.x,this.y+q.y)
		},
		minus:function(q){
			return new Vector(this.x-q.x,this.y-q.y)
		},
		multipy:function(scale){
			return new Vector(this.x*scale,this.y*scale)
		},
		normalize:function(length){
			if(length===undefined){
				length=1
			}
			return this.multipy(length/this.length())
		}
	};
	Vector.fromPoints=function(p1,p2){
		return new Vector(p2.x-p1.x,p2.y-p1.y)
	}
	window.Vector=Vector;
})();

var points='a,b,c,d,e,f'.split(',').map(function(name,index,arr){
			return {
				name:name,
				color:'hsl('+(360*index/arr.length)+',100%,60%)'
			}
		})
		var relation=300;
		var svg=document.querySelector('svg');
		var Vector=window.Vector;
		var k=0.05
		function random(min,max){
			return Math.round(min+(max-min)*Math.random());
		}
		points.forEach(function(points){
			var circle=document.createElementNS('http://www.w3.org/2000/svg','circle');
			var x=random(-400 , 400);
			var y=random(-400 , 400);
			circle.setAttribute('cx',x);
			circle.setAttribute('cy',y);
			circle.setAttribute('r',10);
			circle.setAttribute('fill',points.color);
			svg.appendChild(circle)
			points.circle=circle;
			points.s=new Vector(x,y);
			points.v=new Vector();
			points.a=new Vector();
		})
		
		var lastFrameTime=+new Date();
		function undate(){
			var frameTime=+new Date();
			var t =frameTime-lastFrameTime;
			t/=100;
			//点位置更新；
			points.forEach(function(pa){
				var f=new Vector();
				//计算合力
				points.forEach(function(pb){
					if(pa==pb) return;
					var x=Vector.fromPoints(pa.s,pb.s);
					var delta=x.length()-relation;
					//f=k*x;
					f=f.add(x.normalize(delta*k))
				});
				pa.a=f;
				pa.v=pa.v.add(pa.a.multipy(t)).multipy(0.98);
				pa.s=pa.s.add(pa.v.multipy(t));
				pa.circle.setAttribute('cx',pa.s.x);
				pa.circle.setAttribute('cy',pa.s.y);
			})
			// 点连线；
			var linkPath=[];
			points.forEach(function(pa){
				var sa=pa.s
				points.forEach(function(pb){
					if(pa==pb) return;
					var sb=pb.s;
					linkPath=linkPath.concat([
						'M',sa.x,sa.y,
						'L',sb.x,sb.y
					]);
				})
			})
			document.querySelector('#links').setAttribute('d',linkPath.join(' '))
			lastFrameTime=frameTime;
			requestAnimationFrame(undate)
		}
		requestAnimationFrame(undate)
</script>
</html>