p5实现森林植树下雪动画效果代码
代码语言:html
所属分类:其他
代码描述: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