processing实现三维树生长旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：processing实现三维树生长旋转动画效果代码，拖动鼠标可旋转树

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Dosis&display=swap");
* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Dosis", sans-serif;
  overflow: hidden;
  background-color: #e6e2ca;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .container {
  padding: 0;
  margin: 0;
  margin: auto;
  min-height: 100%;
  max-width: 900px;
  overflow: hidden;
  box-shadow: 0.02em 0.02em 1.5em #0005;
}
body .container canvas {
  outline: none;
}
</style>

  

</head>

<body >
  <main>
  <div class="container">
    <canvas class="program"></canvas>
  </div>
</main>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
      <script >
const programArr = [
(processingInstance) => {
with (processingInstance) {
  size(700, 600, P2D);
  frameRate(60);
  smooth();

  textAlign(CENTER, CENTER);
  textSize(25);
  strokeCap(PROJECT);

  //the tree object
  let tree;

  //used to keep track of the rotation
  let theta = 0;

  //used for controlling the animation
  let len = 0;

  //determines if the user is currently dragging the mouse
  let dragging = false;

  //define the tree object/properties
  tree = {
      x: 0,
      y: 0,
      len: 100,
      depth: 6,
      angle: -90,
      nodes: [],
      colors: {
          from: color(59, 39, 8),
          to: color(145, 108, 49),
          flowers: [
              [230, 80, 105],
              [80, 105, 230],
              [220, 210, 30],
              [180, 60, 220],
              [205, 130, 45],
          ]
      },
      flowerColor: [230, 80, 105]
  };

  //the recursive function (will be called from within itself)
  const addBranch = (depth, angle, len, node) => {

      //if the depth is zero then end the recursion
      if(depth <= 0) {
          return;
      }

      //calculate the end points of the branch
      const x = node.x + cos(angle*Math.PI/180) * len;
      const y = node.y + sin(angle*Math.PI/180) * len;
      const endDepth = (depth === tree.depth ? 1 : random(-(15 * depth), (15 * depth)) | 0);
      const z = node.z + (depth === tree.depth ? 1 : endDepth | 0);

      //add the branch
      tree.nodes.push({
          type: "branch",
          previousNode: node,
          x: x,
          y: y,
          z: z,
          depth: depth,
          color: lerpColor(tree.colors.from, tree.colors.to, map(depth, tree.depth, 1, 0, 1))
      });

      const previousNode = tree.nodes[tree.nodes.length - 1];

      //add some random leaves to the branches
      if(depth > 0 && depth < tree.depth - 3 && random() < 0.3) {
          for(let i = 0; i < 2; i++) {
              const percent = random(0.1, 0.9);
              const l = len * percent;
              const tx = node.x + cos(angle*Math.PI/180) * l;
              const ty = node.y + sin(angle*Math.PI/180) * l;
              tree.nodes.push({
                  type: "leaf",
                  x: tx,
                  y: ty,
                  z: node.z + endDepth * percent,
                  diameter: random(5, 10),
                  color: color(random(80, 100), random(150, 180), random(90, 110)),
                  angle: random(angle - 60, angle + 60)
              });
          }
      }

      //add some random flowers to the end of the branches
      if(depth === 1 && random() < 0.5 || depth === 2 && random() < 0.3) {
          tree.nodes.push({
              type: "flower",
              x: x,
              y: y,
              z: z,
              depth: depth,
              diameter: depth === 1 ? random(15, 25) : random(10, 15),
              color: color(
                  random(tree.flowerColor[0] - 25, tree.flowerColor[0] + 25), 
                  random(tree.flowerColor[1] - 25, tree.flowerColor[1] + 25), 
                  random(tree.flowerColor[2] - 25, tree.flowerColor[2] + 25)),
              angle: angle
          });
      }

      //reduce the depth (extremely important to end your recursion)
      depth--;

      //call this function recursively
      addBranch(depth, angle - random(10, 50), len * random(0.75, 0.85), previousNode);
      addBranch(depth, angle + random(10, 50), len * random(0.75, 0.85), previousNode);
      addBranch((depth - (random() < 0.5 ? 0 : 1)), angle + random(-30, 30), len * random(0.75, 0.85), previousNode);
  };

  // Rotate shape around the y-axis
  // this function based on KA lesson on rotating 3D s.........完整代码请登录后点击上方下载按钮下载查看