p5实现电闪雷鸣狂风暴雨动画效果代码-html代码-BFW代码库

p5实现电闪雷鸣狂风暴雨动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现电闪雷鸣狂风暴雨动画效果代码

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

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

</head>
<body>

<div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.sound.min.js"></script>
<script >
    class Droplet{
  constructor(){
    this.x = random(-width/2, width*1.5);
    this.y = -20;
    this.z = random();
    let a = PI/2 + random(0, .1) + .1;
    this.dx = cos(a)*(this.z*5 + 1);
    this.dy = sin(a)*(this.z*5 + 1);
    this.splash = false;
    this.dead   = false;
    this.amt = 0;
  }
  update(){
    if (!this.splash){
      this.prevX = this.x;
      this.prevY = this.y;
      this.x += this.dx;
      this.y += this.dy;
    }
    else {
      this.amt += .01;
      if (this.amt > 1) this.dead = true;
    }
    if (this.y > height*(1 - (1-this.z)/4)) this.splash = true;
  }
  render(){
    if (this.splash){
      buffer.stroke(1, (1-this.amt)/3);
      buffer.noFill();
      let w = this.amt*(this.z + .05)*100;
      buffer.ellipse(this.x, this.y, w, w/3);
    } else {
      buffer.stroke(1);
      buffer.line(this.prevX, this.prevY, this.x, this.y);
    }
  }
}

class Lightning{
  constructor(){
    this.x = random(width);
    this.y = 0;
    this.amt = 1;
    
    this.hue = random(.5, .8);
    this.seed = frameCount;
    
    let sound = random(thunder);
    sound.setVolume(..........完整代码请登录后点击上方下载按钮下载查看