p5实现森林植树下雪动画效果代码

代码语言:html

所属分类:其他

代码描述:p5实现森林植树下雪动画效果代码,点击鼠标左键可重新播放动画。

代码标签: p5 森林 植树 下雪 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
</style>

  
  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.11.2.js"></script>
      <script >
let maxDepth = 5;
let tick = 0;
let buffer;

class Branch{
  constructor(p1, p2, radius, depth){
    this.p1 = p1;
    this.p2 = p2;
    this.heading = this.p2.copy().sub(this.p1).heading();
    this.dist = this.p1.dist(this.p2);
    this.radius = radius;
    this.depth = depth;
    this.numSplits = 0;
  }
  split(last=false, radius=3){
    if (!last && this.depth >= maxDepth) return;
    let amt = this.depth/maxDepth;
    if (last) amt = 1;
    let p1 = this.p2.copy().lerp(this.p1, random(amt));
    let a = random(.1, .5)*(random() < .5 ? -1 : 1)*PI/2 + (last ? -PI/2 : this.heading);
    let d = random(.7, .95)*this.dist;
    let r = random(.7, .8)*this.radius;
    if (last) r = radius;
    let v = v2(cos(a), sin(a)).mult(d);
    let p2 = p1.copy().add(v);
    p1.add(v2(cos(a), sin(a)).mult(random(.5, 1)*this.radius*2));
    return new Branch(p1, p2, r, this.depth+1);
    this.numSplits++;
  }
  render(leafSize=35){
    buffer.push();
    buffer.strokeWeight(this.radius);
    buffer.stroke(random(.05, .15), random(.2, .4), random(.2, .4));
    buffer.line(this.p1.x, this.p1.y, this.p2.x, th.........完整代码请登录后点击上方下载按钮下载查看

网友评论0