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 = p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0