javascript
/
simondev.LSystems_JavaScript
镜像自地址 https://github.com/simondevyoutube/LSystems_JavaScript


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html>
<head>
  <title>L-Systems</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link rel="stylesheet" href="./base.css">
  <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Chau+Philomene+One&display=swap" rel="stylesheet">
</head>
<body>
  <div class="row center">
    <div class="column center bordered">
      <div class="row">
        <p class="col1">Presets</p>
        <input id="presets" class="mdl-slider mdl-js-slider" type="range" min="0" max="3" value="2" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Iterations</p>
        <input id="iterations" class="mdl-slider mdl-js-slider" type="range" min="1" max="5" value="3" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <h1 class="col1">Leaves</h1>
        <input id="leaf.color" class="color" type="color" name="body" value="#1c852b" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Length</p>
        <input id="leaf.length" class="mdl-slider mdl-js-slider" type="range" min="0.5" max="20.0" value="5.0" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Width</p>
        <input id="leaf.width" class="mdl-slider mdl-js-slider" type="range" min="0.5" max="20.0" value="2.0" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <h1 class="col1">Branches</h1>
        <input id="branch.color" class="color" type="color" name="body" value="#85521c" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Alpha</p>
        <input id="leaf.alpha" class="mdl-slider mdl-js-slider" type="range" min="0.01" max="1.0" value="0.75" step="0.01" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Length</p>
        <input id="branch.length" class="mdl-slider mdl-js-slider" type="range" min="0.5" max="100.0" value="30.0" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Width</p>
        <input id="branch.width" class="mdl-slider mdl-js-slider" type="range" min="0.1" max="10.0" value="1.0" step="0.1" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Angle</p>
        <input id="branch.angle" class="mdl-slider mdl-js-slider" type="range" min="0.1" max="90.0" value="22.5" step="0.1" onchange="APP_OnChange()"></input>
      </div>
      <div class="row">
        <p class="col1">Falloff</p>
        <input id="branch.lengthFalloff" class="mdl-slider mdl-js-slider" type="range" min="0.1" max="1.0" value="0.75" step="0.01" onchange="APP_OnChange()"></input>
      </div>
    </div>
    <canvas id="canvas" width="1000px" height="1000px"></canvas>
  </div>
  <script src="./src/simple.js">
  </script>
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>