基于p5.js实现下雨效果

下载代码

html

css

分享到微信朋友圈

html

css

body {padding: 0; margin: 0; overflow :hidden; background: #000; cursor: pointer;}

.dropletsize {
  position: absolute;
  width: 90px;
  left: 200px;
  top: 6px;
  display: none;
  font-family: Arial;
  background: transparent;
  color: #888;
  font-size: 16px;
  
}
.splashsize {
  position: absolute;
  width: 90px;
  left: 200px;
  top: 45px;
  display: none;
  font-family: Arial;
  background: transparent;
  color: #888;
  font-size: 16px;
  
}
.numberofdrops {
  position: absolute;
  width: 90px;
  left: 200px;
  top: 84px;
  display: none;
  font-family: Arial;
  background: transparent;
  color: #888;
  font-size: 16px;
  
}

.myMenu { 
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(128, 128, 128, .25);
  transition: all .2s;
}

.myMenu:hover {
  color: white;
  font-size: 20px;
  background: rgba(128, 128, 128, .25);
  transition: all .2s;
  cursor: pointer;
  width: 300px;
  height: 400px;
  border-radius: 0 10px 10px 10px;
}

.lines, .lines:after, .lines:before {
  border-radius: 40%;
  box-shadow: 0 0 1px 0 #000;
  position: absolute;
  width: 14px;
  height: 2px;
  background: black;
}

.lines {
    top: 4px;
    left: 3px;
}
.lines:after {
  content: '';
  top: 5px;
  left: 0px;
}
.lines:before {
  content: '';
  top: 10px;
  left: 0px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 10%;
  margin: 13.8px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 10%;
  height: 2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #333333;
  border-radius: 1.3px;
  border: 1px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 8px;
  border-radius: 3px;
  background: #333333;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #333333;
}

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();
    
  }
}

//round(random(height / raindropSize)) * (raindropSize - height);

this.display = function() {
    if (this.spot == 0) {
    noStroke();
  fill(tempHue, 100, 50, fd);
    ellipse(this.x, this.y, raindropSize * 5, raindropSize * 5); //this.diameter);
  }}
    
    
  }}

function mouseReleased() {
  colorMode(HSB, 360, 100, 50, .8);
 raindropSize = random(.05, 0.5);
 droplets = round(random(10, 2000));
 if (mob == 1) droplets = droplets / 12;
  tx *= -1;
  for(var i = droplets; i < maxDrops; i++) { drops[i] = 0;
  i++;
}
  
  for (var i = 0; i < droplets; i++) {
       var x = random(-30, window.innerWidth);
    var y = random(-window.innerHeight, -30);// - height;
    var r = raindropSize;
    var h = map(x, 0, width, 0, 360);
    var s = random(4,30);
  trail = random(0.1, .4);
    thue = h;
  distancey = random(1, window.innerHeight);
    tswell = ((distancey / window.innerHeight) * 15) * s / 2;
   drops[i] = new RainDrop(x, y, r, h, s, tswell, distancey);
   
  }

}

function lightening() {
  var starts = 0;
  var xpos = random(0, width);
  while (thickness > 0) {
  var abolt = random(0, 100);
  var bbolt = random(-20, 20);
    strokeWeight(thickness);
    stroke(200, 100, 50, 1);
    line (xpos, starts, xpos+bbolt, starts+abolt);
    xpos += bbolt;
    starts += abolt;
  thickness--;

}}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg