matterj模拟雪花重力下落堆积效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：matterj模拟雪花重力下落堆积效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  padding:0;
  margin:0;
  box-sizing:border-box;

}

#canvas{
  background: conic-gradient(from .66turn at bottom center, #1C2155, #38446f)

}


#notes hr{
  margin:4px 0px;
  border: 0.25px solid rgba(255,255,255,0.21);
  
}


#notes{
  height: 15vh;
/*   display:none; */
  font-family: 'Montserrat', sans-serif;
  font-weight:300;
  position:absolute;
  max-width:300px;
  z-index:10;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.42);
  padding:8px;
  margin:8px;
  border-radius:4px;
  font-size:0.75rem;
  color:lightgrey;
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.02), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 12px rgba(0,0,0,0.12);
  
}
</style>




</head>

<body  >
  <div id="canvas"></div>

<div id="notes">
  <h3>Snowflake Bentley</h3>
  <hr>
  <quote>Wilson Alwyn Bentley was the first person to take extensive photographs of snowflakes.<p/><p> 
  He was the first to proclaim that no two snowflakes are alike: </p>
<br/><br/><quote>

 
 
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script>
  
      <script >

//
let canvas = document.getElementById("canvas"),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight;

let init = () => {

  //
  let Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Composites = Matter.Composites,
  Common = Matter.Common,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse,
  World = Matter.World,
  Bodies = Matter.Bodies;

  // create engine
  let engine = Engine.create(),
  world = engine.world;

  // create renderer
  let render = Render.create({
    element: canvas,
    engine: engine,
    options: {
      width: w,
      height: h,
      showAngleIndicator: false,
      wireframes: false,
      background: '' } });


  //

  Render.run(render);

  // create runner
  let runner = Runner.create();
  Runner.run(runner, engine);

  // add bodies
  // Matter.Composites.stack(xx, yy, columns, rows, columnGap, rowGap, callback) 
  let stack = Composites.stack(0, 0, w / 15, 10, 2, 2, (x, y) => {
    switch (Math.round(Common.random(0, 5))) {
      case 0:
        return Bodies.circle(x, y, 10, { render: {
            sprite: {
              texture: setImgSrc0() } } });




      case 1:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc1() } } });




      case 2:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc2() } } });




      case 3:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc3() } } });



      case 4:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc4() } } });


      case 5:
        return Bodies.circle(x, y, 8, { render: {
            sprite: {
              texture: setImgSrc5() } } });}



  });

  World.add(world, stack);

  World.add(world, [
  // walls
  Bodies.rectangle(w / 2, -1, w, 1, { isStatic: true }),
  Bodies.rectangle(w / 2, h + 1, w, 1, { isStatic: true }),
  Bodies.rectangle(w + 1, h / 2, 1, h, { isStatic: true }),
  Bodies.rectangle(-1, h / 2, 1, h, { isStatic: true }),
  Bodies.rectangle(w / 2, h / 1.8, 350, 10, { isStatic: true, render: {
      fillStyle: 'white' } })]);


  // add mouse control
  let mouse = Mouse.create(render.canvas),
  mouseConstraint = MouseConstraint.create(engine, {
    mouse: mouse,
    constraint: {
      stiffness: 0.4,
      render: {
        visible: false } } });




  World.add(world, mouseConstraint);

  // keep the mouse in sync with rendering
  render.mouse = mouse;

  // fit the render viewport to the scene
  Render.lookAt(render, {
    min: { x: 0, y: 0 },
    max: { x: w, y: h } });

  engine.gravity.y = 0.166;

};

function setImgSrc0() {
  return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTEwNDE0QTM2RDg0MTFFREIzQjVEQTI3RDMxRjREQ0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTEwNDE0QTQ2RDg0MTFFREIzQjVEQTI3RDMxRjREQ0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNDY0RENENjZEODIxMUVEQjNCNURBMjdEMzFGNERDQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMTA0MTRBMjZEODQxMUVEQjNCNURBMjdEMzFGNERDQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt8fVckAAAStSURBVHjaTFRZSGtXFD3xRs3gGOenjdEozhNOec6zKLaotTxL++GvtBSE2o+KfhYrKP14SKmg1NInSKudnGrpsxYbxCmVV4c6xKDG2UQckmgSu/YplF44XO69++699lprb1FpaSn7/2U2m1lBQcEzDw+P9IGBgY8yMjKYIAjs+vqaXV1dMbVazfb399nx8THz8fFhIpGIWa1W5uLiwv8XfH19+Qs6FouFH7FY7KytrX2xvb39JdXw9/cPR8Krh4cH9vj4yC4vL9nBwQErKip6mpqaqr67uzOEhIQwPz8/JgQGBjK73c4DnU4nr3R4eHgeGRmpQlBJdnb2W7jnjo6O/oBCrK6u7v3T01Odw+GQd3Z2bmu12q92dnb0hNRmszExZZZIJBzuzc0N8/b2lhcWFvaFhoZG5Ofna+bn57X9/f05VBg/MlARX15e/gmes8bHx7/A9atKpWLn5+f/tgzYHB2qMkoOFGIEZIInY15ensbT05MplcrQuLi4JzKZzAvo91paWp5HRESEI9k76OiSAOEbByZqbm5mGxsb/OTk5DCDwcCRVFZWRvX19W0ZjcYrcOgNZAxtco6lUikbGxv7DZxaZmZmWtD2BiUkukSNjY2cQyBRQqC0np6e76OiojwWFhYuQL59dXX1GoiDiKP7+3snkLqQOE1NTUUQchHdOQDA6ubmxhMKubm5CcnJyRIEyQC5OiAgwNTb2/sNOFQuLi6aESRG8h/RwQposUM4BQqIQZd0cHBwyN3d3U5WSkhIYHK5nLnEx8eXIsmn8NoHsMrrIyMjy+Ayc3Jycg/v3FZWVkYglgXF/Pb29n7H0YNHVl9f/4xUDwoKUuG/D8lK5EsB1ebhsWlSCVbJRoAruJKBS9vm5qYObYqgei2C/ZHYBk7/ApIncIMkMzPTE2pXoYO13d3dP4kKAUnY+vq6LT09PWNubu7nrq6u9yBUBxLIEeCu1+u3IcQNSHddXl6eQQIF0IoxNZbq6uo3EhMT09bW1l7Brw1wQ4ygUCjYxcUFjdUqkP6Nas7Y2FgVFE8zmUxeR0dHhpOTk2Pcj1HAlpWVVQpK3IuLi2Og9E86nW7j7OzMSCrD2HcC+GOurq58nMiPIJmhrfGqqqqPwaET39Xh4eGvoeg1yI+HE8QlJSUxQ0NDow0NDbUYvRxY6g9cz9GpVggODuYOp7EBL7LW1tbPvLy8NGFhYRnR0dES3AWYWA7x1PCfKCUlRTU9Pf1tW1vbmzQ9+G8V/F+AcxMZW4A9+MbgYyMIIqBUYOTe1Wg0yuHh4V+mpqa+gxgOKCoH0kAUY3DC10Amg1/N4PVka2vLRDlub2+ZQKMFJfligB0cWEuvKioqWkD0DDbKZXd3d/Ps7OwAlkMXOvBGoqegxAzOUuDNdcQbydS04viButw/iOX8dXR0vMR0rLW3t78NlH4QSw/SrWVlZRXoJndiYkKHH6WYqAZYxUioCB2NJU2cgFHimWlsMLMiTMMyWvqcqkKoFShrJTrwzQcdTC8tLfXX1NS8wPuXOAYSlXYqgeLGpgcsSD70tGSR5ISeaRlAEM4LCQZLHaEDIv8RPAYmJSVJ8U5LGqDYf+cfAQYAvtCCXTQiaS4AAAAASUVORK5CYII=';
}


function setImgSrc1() {
  return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTEwNDE0QUI2RDg0MTFFREIzQjVEQTI3RDMxRjREQ0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTEwNDE0QUM2RDg0MTFFREIzQjVEQTI3RDMxRjREQ0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMTA0MTRBOTZEODQxMUVEQjNCNURBMjdEMzFGNERDQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMTA0MTRBQTZEODQxMUVEQjNCNURBMjdEMzFGNERDQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnkLtK4AAALQSURBVHjaLJNLaFNREIbvvXm0ebRJmmdJNRENKVZT6GPRVWkFpbhzIyi4KrrysROX3Uu7KlQoFFwXs1EQlIpFqJuEtrqJNdGkNG2Spnm/X34nOHDIyZmZf/75Z668tbUlCdNoNFKj0ZDq9brUbDaliYmJe9PT0xsXFxffdnd3HxeLxXOTySR1Oh1JURRJrVZLikgUf0RCuVyWhoeHby4uLr7x+/2vj46OYoBdXVhYCE5OTj7iLlerVUmW5X5BeXNzs1/R5XLd8Pl8zywWy518Pt8DKNVut4uctl6vt+K/RHw0HA6vxOPxTwaDQVLzYJ2ZmXnhdDofUH0QmgWVSiXhNMJINzQ0ZOG9ns1mUwD75ufn352fn38+ODhYkdPpdASHJplMRux2u5sAu81msxKQjkajP8xmM892zyAG7TK0qwA6BgYGUgpvl09OTuIej8drxWq1GtoUCwC4YNWqVCoFWBgAS+IrORwOO8USsDGoQct4vd5rBGVarZYKMdqA/cbK+/v7IfDMtKFwtLCwZTKZdK/XUzg6RYjyX3EtorhBHhMnGAy+XVpauu92u/3b29sb4+PjAYDcHCcFeiJFTXKq2+0aeVCoXua3i/p10ePe3t6HWCz2x2g02mAlhBcMZOJlYQr8f/HQxVkRgqRSqb+np6eJ5eXllwWMym7ur87Ozo7RIs0IcyS3OB3RcwKFJVBbYjwI0YTaGP2Z5+bmbiPcKG24tFqtjsSSEI/YJhupKAjzlSVoIr8tEon8ZAR6YUykJhIAr+VyuTx3LSup5V6kIxOtqFSzs7PHrGGQQgZEuUW/GthmhSDsskWn0xmFFsJY3VFmPlQqlcI7OztP5LW1tf6SEyDhuD41NfWc0T0koEGVBD71yMiIF3AjenwMhULraPJefCDy6uqqBI3+stNL/6tCgyuBQOApWt2lt2Fm++Xw8HCd5O9gdWDT/7r+CTAArpOeLOaGZJ8AAAAASUVORK5CYII=';
}

function setImgSrc2() {
  return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNj.........完整代码请登录后点击上方下载按钮下载查看