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(.5);
    sound.play();
    let points = [createVector(this.x, height*.7)];
    let n = random(30, 50);
    let w = random(200, 300);
    for (let i = 0; i < n; i++){
      let amt = random();
      let y = amt*height*.7;
      let x = this.x + random(-w, w)*(1 - abs(amt*2 - 1));
      points.push(createVector(x, y));
    }
    
    let fill = [createVector(this.x, this.y)];
    this.lines = [];
    while(points.length > 0){
      let d = 1e6;
      let fIdx = 0;
      let pIdx = 0;
      fill.forEach((p1, i) => {
        points.forEach((p2, j) => {
          let d2 = p1.dist(p2);
          let a = p1.angleBetween(p2);
          if (d2 < d && a > 0){
            d = d2;
            fIdx = i;
            pIdx = j;
          }
  .........完整代码请登录后点击上方下载按钮下载查看