planck+p5模拟重力下滑动画效果代码-html代码-BFW代码库

planck+p5模拟重力下滑动画效果代码

代码语言：html

所属分类：其他

代码描述：planck+p5模拟重力下滑动画效果代码，鼠标单击产生许多自由落体的方块。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
  body {  margin: 0;  padding: 0;  width: 100vw;  height: 100vh;  display: flex;  align-items: center;  justify-content: center;  background-color: rgb(0, 0, 0, .9)}
</style>
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/planck.js"></script>
    <script>
        const boxes = [];
        
        let world;
        
        const scaleScalar = 20;
        
        const createChainBoundary = (x, y) => {
          const w = 200;
          const h = 8;
        
          const position = convertPixelToWorld(x, y);
          const bodyDef = {
            type: 'static',
            position: planck.Vec2(position.x, position.y) };
        
        
          const vertices = [{ x: 50, y: 100 }, { x: 200, y: 30 }, { x: 200, y: 50 }, { x: 50, y: 100 }].map(vertice => ({ x: vertice.x + x, y: vertice.y + y }));
        
          const worldVertices = vertices.map(point => {
            const worldPosition = convertPixelToWorld(point.x, point.y);
            return planck.Vec2(worldPosition.x, worldPosition.y);
          });
        
          console.log('worldVertices2', worldVertices);
        
          const chainShape = planck.Chain(worldVertices);
        
          const body = world.createBody();
        
          body.createFixture(chainShape, 1);
        
          const draw = () => {
            fill(255);
            stroke(0);
            strokeWeight(0);
        
            beginShape();
            vertices.forEach(vertice => {
              vertex(vertice.x, vertice.y);
            });
            endShape();
          };
        
          return {
            draw };
        
        };
        
        const convertPixelToWorld = (x, y) => {
          const transX = width / 2;
          const transY = height / 2;
        
          const newX = map(x, transX, transX + scaleScalar, 0, 1);
          const newY = map(y, transY, transY + scaleScalar, 0, 1);
        
          return {
            x: newX,
            y: newY };
        
        };
        
        const convertDimensionPixelToWorld = (x, y) => {
          return {
            x: x / scaleScalar,
            y: y / scaleScalar };
        
        };
        
        const convertWorldToPixel = (x, y) => {
          const transX = width / 2;
          const transY = height / 2;
        
          const newX = map(x, 0, 1, transX, transX + scaleScalar);
          const newY = map(y, 0, 1, transY, transY + scaleScalar);
        
          return {
            x: newX,
            y: newY };
        
        };
        
        const createBoundary = (x, y) => {
          const w = 200;
          const .........完整代码请登录后点击上方下载按钮下载查看