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

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

代码语言：html

所属分类：动画

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    body{
        padding: 0;
        margin: 0;
    }
</style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<div></div>

<script type="text/javascript" >
    var drops = [];
var raindropSize = .2;
var droplets = 1300;
var maxDrops = 1000;
var thue;
var flig = 0;
var thickness = 21;
var tx;
var ty = 10;
var loc = 0;
var direct = -1;
var trail = .2;
var fade = 1;
var ms;
var distancy;
var mob = 0;
var xp = 1;
var yp = 1;
var value;


function setup() {

  //smooth();
  noStroke();
  colorMode(HSB, 360, 100, 50, 1);
  createCanvas(window.innerWidth, window.innerHeight);
  if (window.innerWidth < 800) mob = 1;
 if(mob == 1) droplets = droplets / 15;
   tx = random(-3, 3);
  
  for (var i = 0; i < droplets; i++) {
    var x = round((random(width / raindropSize)) * raindropSize);
    var y = round(random(height / raindropSize)) * raindropSize - window.innerHeight;
    var r = raindropSize;
    var h = map(x, 0, width, 0, 360); //(0, 360);
    var s = random(1, 19);
   //trail = random(0.26, .7);
    thue = h;
    
    distancey = random(1, window.innerHeight);
    tswell = ((distancey / window.innerHeight) * 25) * s / 2;
    drops[i] = new RainDrop(x, y, r, h, s, tswell, distancey);
  }
}



function draw() {

 var lig = random(0, 5);
  if (lig > 4.9) {flig = 50; thickness = round(random(1, 19)); lightening();}
   background(200, 100, flig, trail);
    flig -= 15;
  for (var i =0; i < droplets; i++) {
    drops[i].move();
    drops[i].display();
    
  }
}

function RainDrop(tempX, tempY, tempDiameter, tempHue, tempSpeed, tswell, tdistance) {
  colorMode(HSB, 360, 100, 50, 1);
  this.x = tempX;
  this.loc = tempX;
  this.y = tempY;
  this.spot = 0;
  this.diameter = tempDiameter;
  this.h = tempHue;
  this.s = tempSpeed;
  this.swell = tswell;
  this.distancey = tdistance;
  this.move = function() {
   
    //var ty = this.s;
    this.x += (tx * raindropSize);
    if (this.y < tdistance) this.y += tempSpeed;
    if (this.x > width) {this.loc = this.x; this.x = this.x - window.innerWidth;}
    if.........完整代码请登录后点击上方下载按钮下载查看