js实现canvas模拟绳子重力交互效果代码-html代码-BFW代码库

js实现canvas模拟绳子重力交互效果代码

代码语言：html

所属分类：其他

代码描述：js实现canvas模拟绳子重力交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        body,html {
        	background:#213;
        	color:#342345;
        	height:100%;
        	overflow:hidden;
        }
        #paper {
        	border:#190C26 solid 20px;
        	background:#0D0514;
        	position:absolute;
        	margin:auto;
        	left:0;
        	right:0;
        	top:0;
        	bottom:0;
        	width:800px;
        	height:600px;
        }
    </style>

</head>

<body>
    <canvas id="paper" width="800" height="600"><script>"use strict";

var circle = {
  x: 400,
  y: 300,
  radius: 75,
  radius2: 75*75
};

var points;

// Creates a new rope to manipulate.  This function is also called to reset after entering a bad state.
function createRope()
{
	points = (function( x0, y0, x1, y1, steps ) 
	{
		var dx = (x1-x0)/steps;
		var dy = (y1-y0)/steps;
		var d = Math.sqrt( dx*dx + dy*dy );
		var x = x0;
		var y = y0;
		var pts = [];
		
		for( var i = 0 ; i < steps ; ++i, x+=dx, y+=dy )
			pts.push({ x:x, y:y, lx:x, ly:y+10*Math.random(), distFromParent:d });
			// The random variation in the value for "last y" gives the illusion of the rope snapping in to existence.
		
		return pts;
		
	})( 50, 50, 750, 50, 75 );
}
createRope();


function motion()
{
	// Perform Verlet integration on each point, adding gravity along the y-axis.
	for( var i = 0 ; i < points.length ; ++i ) {
		var newX = points[i].x + (points[i].x - points[i].lx);
		var newY = points[i].y + (points[i].y - points[i].ly) + 0.4;
		points[i].lx = points[i].x;
		points[i].ly = points[i].y;
		points[i].x = newX;
		points[i].y = newY;		 
	}
}


function constraint()
{
	// Apply the constraint algorithm several times to improve accuracy.
	var iterations = 100;
	while( iterations-- )
	for( var i = 0 ; i < points.length ; ++i )
	{
		// The following block constrains pairs of points [i] and [i-1].
		if( i >= 1 )
		{
			// Compute distance between points.
			var distX    = points[i].x - points[i-1].x;
			var distY    = points[i].y - points[i-1].y;
			var distance = Math.sqrt( distX*distX + distY*distY );

			// Determine unit components along each axis.
			var distCompX = distX / distance;
			var distCompY = distY / distance;

			// Determine the total deviation from ideal distance and divide it by two to get the deviation of each point.
			var distDeviation = (distance - points[i].di.........完整代码请登录后点击上方下载按钮下载查看