var drops = [];
var raindropSize = 1;
var droplets = 3000;
var maxDrops = 3000;
var thue;
var flig = 0;
var thickness = 9;
var tx;
var ty = 10;
var loc = 0;
var direct = -1;
var trail = 0.1;
var fade = 1;
var ms;
var distancy;
var mob = 0;
var xp = 1;
var yp = 1;
function setup() {
//smooth();
noStroke();
colorMode(HSB, 360, 100, 50, 1);
createCanvas(window.innerWidth, window.innerHeight);
if (window.innerWidth < 801) mob = 1;
if (mob == 1) droplets = droplets / 12;
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(100, window.innerHeight);
tswell = ((distancey / window.innerHeight) * 25) * s / 2;
drops[i] = new RainDrop(x, y, r, h, s, tswell, distancey);
}
}
function draw() {
//text(trail, 100, 100);
var spot = 0;
var lig = random(0, 5);
if (lig > 4.9) {
flig = 100;
thickness = round(random(1, 19));
lightening();
}
background(200, 100, flig, trail);
if (flig == 100) flig = 0;
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 (this.x < -20) this.x = width;
// fill(255);
// text(this.y, 100, 100);
// noFill();}
if (this.y > tdistance) {
this.y = tdistance - raindropSize;
this.spot = 1;
this.x -= (tx * raindropSize);
var fd = this.swell / tswell;
//var puddle = map(tswell, 0, tdistance, 1, 20);
strokeWeight(raindropSize / 3);
stroke(this.h, 100, 50, fd);
noFill();
ellipse(this.x + 1, tdistance, this.swell / 3, this.swell / 15);
//console.log(this.h);
this.swell -= 5;
}
if (this.swell < 4) {
this.swell = tswell;
this.y = random(-window.innerHeight, 0);
this.spot = 0;
this.distancey = tdistance;
}
// this.f += 2;
//this.y -= (tempSpeed);
//if (this.f > 9) {this.y = 0; this.f = 0; }
//direct = direct * -1; }
//round(random(height / raindropSize)) * (raindropSize - height);
this.display = function() {
if (this.spot == 0) {
noStroke();
fill(tempHue, 100, 50, fd);
rect(this.x, this.y, this.diameter, this.diameter);
}
};
}
}
function mousePressed() {
colorMode(HSB, 360, 100, 50, 0.8);
raindropSize = random(0.25, 3.5);
droplets = round(random(10, 3050));
if (mob == 1) droplets = droplets / 12;
tx *= -1;
for (var i = droplets; i < maxDrops; i++) {
drops[i] = 0;
i++;
}
for (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, 0.4);
thue = h;
distancey = random(100, window.innerHeight);
tswell = ((distancey / window.innerHeight) * 15) * s / 2;
drops[i] = new RainDrop(x, y, r, h, s, tswell, distancey);
}
//start();
}
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--;
}
}
body {padding: 0; margin: 0; overflow :hidden;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js" charset="utf-8"></script>
You are missing to add p5.js library , just link it in your html.
6
solved Need help for JavaScript, the script not run [closed]