diff --git a/rain/index.html b/rain/index.html index cfae7f5..313cdf3 100644 --- a/rain/index.html +++ b/rain/index.html @@ -1,6 +1,16 @@ - + rain | gallery@TacoWolf + + + + + + + + + + diff --git a/rain/main.css b/rain/main.css new file mode 100644 index 0000000..ed2a03f --- /dev/null +++ b/rain/main.css @@ -0,0 +1,4 @@ +body { + padding: 0; + margin: 0; +} diff --git a/rain/rain.js b/rain/rain.js index edd2140..5872373 100644 --- a/rain/rain.js +++ b/rain/rain.js @@ -2,33 +2,46 @@ function Drop() { this.x = random(displayWidth); this.y = -random(displayHeight); this.z = random(5, 15); + this.length = random(4, 15); this.yspeed = map(this.z, 0, 20, 1, 20); - this.gravity = 1; this.fall = function () { - this.y += this.yspeed; + this.y = this.y + this.yspeed; + const grav = map(this.z, 0, 20, 0, 0.4); + this.yspeed = this.yspeed + grav; + + if (this.y > displayHeight) { + this.y = -random(displayHeight); + this.yspeed = 0; + } }; this.show = function () { - if (this.y > displayHeight) { - this.y = -random(20); - } strokeWeight(this.z / 4); - stroke(62, 95, 163); - line(this.x, this.y, this.x, this.y + 10); + switch (round(random(50))) { + case 48: + stroke(177, 191, 218); + break; + case 49: + stroke(235, 239, 245); + break; + default: + stroke(62, 95, 163); + } + line(this.x, this.y, this.x, this.y + this.length); }; } - const drops = []; let canvas; + function setup() { canvas = createCanvas(window.innerWidth, window.innerHeight); - for (let i = 0; i < random(500, 1000); i += 1) { + for (let i = 0; i < random(1000, 1500); i += 1) { drops[i] = new Drop(); } } function draw() { - background(29, 31, 35); + background(12, 12, 12); for (let i = 0; i < drops.length; i += 1) { drops[i].fall(); drops[i].show();