JAVASCRIPT 13
Raindrops.js Guest on 21st September 2020 09:33:15 PM
  1. /*
  2.  *  Query UI plugin for raindrops on water effect.
  3.  *  https://github.com/d-harel/raindrops.git
  4.  */
  5. $.widget("water.raindrops", {
  6.     options: {
  7.         waveLength: 340,    // Wave Length. A numeric value. The higher the number, the smaller the wave length.
  8.         canvasWidth: 0,     // Width of the  water. Default is 100% of the parent's width
  9.         canvasHeight: 0,    // Height of the water. Default is 50% of the parent's height
  10.         color: '#00aeef',   // Water Color
  11.         frequency: 3,       // Raindrops frequency. Higher number means more frequent raindrops.
  12.         waveHeight: 100 ,   // Wave height. Higher number means higher waves created by raindrops.
  13.         density: 0.02,      // Water density. Higher number means shorter ripples.
  14.         rippleSpeed:  0.1,  // Speed of the ripple effect. Higher number means faster ripples.
  15.         rightPadding: 20,    // To cover unwanted gaps created by the animation.
  16.         position:'absolute',
  17.         positionBottom:0,
  18.         positionLeft:0
  19.     },
  20.     _create: function () {
  21.         var canvas = window.document.createElement('canvas');
  22.         if (!this.options.canvasHeight) {
  23.             this.options.canvasHeight = this.element.height() / 2;
  24.         }
  25.         if (!this.options.canvasWidth) {
  26.             this.options.canvasWidth = this.element.width();
  27.         }
  28.         this.options.realWidth = this.options.canvasWidth + this.options.rightPadding;
  29.         canvas.height = this.options.canvasHeight;
  30.         canvas.width = this.options.realWidth;
  31.         canvas.setAttribute("id", "raincanvas");
  32.  
  33.         this.ctx = canvas.getContext('2d');
  34.         this.ctx.fillStyle = this.options.color;
  35.         this.element.append(canvas);
  36.         canvas.parentElement.style.overflow = 'hidden';
  37.         canvas.parentElement.style.position = 'relative';
  38.         canvas.style.position = this.options.position;
  39.         canvas.style.bottom = this.options.positionBottom;
  40.         canvas.style.left = this.options.positionLeft;
  41.        
  42.         this.springs = [];
  43.         for (var i = 0; i < this.options.waveLength; i++)
  44.         {
  45.             this.springs[i] = new this.Spring();
  46.         }
  47.  
  48.         raindropsAnimationTick(this);
  49.     },
  50.     Spring: function ()
  51.     {
  52.         this.p = 0;
  53.         this.v = 0;
  54.         //this.update = function (damp, tens)
  55.         this.update = function (density, rippleSpeed)
  56.         {
  57.             //this.v += (-tens * this.p - damp * this.v);
  58.             this.v += (-rippleSpeed * this.p - density * this.v);
  59.             this.p += this.v;
  60.         };
  61.     },
  62.     updateSprings: function (spread) {
  63.         var i;
  64.         for (i = 0; i < this.options.waveLength; i++)
  65.         {
  66.             //this.springs[i].update(0.02, 0.1);
  67.             this.springs[i].update(this.options.density, this.options.rippleSpeed);
  68.         }
  69.  
  70.         var leftDeltas = [],
  71.                 rightDeltas = [];
  72.  
  73.         for (var t = 0; t < 8; t++) {
  74.  
  75.             for (i = 0; i < this.options.waveLength; i++)
  76.             {
  77.                 if (i > 0)
  78.                 {
  79.                     leftDeltas[i] = spread * (this.springs[i].p - this.springs[i - 1].p);
  80.                     this.springs[i - 1].v += leftDeltas[i];
  81.                 }
  82.                 if (i < this.options.waveLength - 1)
  83.                 {
  84.                     rightDeltas[i] = spread * (this.springs[i].p - this.springs[i + 1].p);
  85.                     this.springs[i + 1].v += rightDeltas[i];
  86.                 }
  87.             }
  88.  
  89.             for (i = 0; i < this.options.waveLength; i++)
  90.             {
  91.                 if (i > 0)
  92.                     this.springs[i - 1].p += leftDeltas[i];
  93.                 if (i < this.options.waveLength - 1)
  94.                     this.springs[i + 1].p += rightDeltas[i];
  95.             }
  96.  
  97.         }
  98.  
  99.     },
  100.     renderWaves: function ()
  101.     {
  102.         var i;
  103.         this.ctx.beginPath();
  104.         this.ctx.moveTo(0, this.options.canvasHeight);
  105.         for (i = 0; i < this.options.waveLength; i++)
  106.         {
  107.             this.ctx.lineTo(i * (this.options.realWidth / this.options.waveLength), (this.options.canvasHeight / 2) + this.springs[i].p);
  108.         }
  109.         this.ctx.lineTo(this.options.realWidth, this.options.canvasHeight);
  110.         this.ctx.fill();
  111.     }
  112.    
  113. });
  114.  
  115. function raindropsAnimationTick(drop) {
  116.     if ((Math.random() * 100) < drop.options.frequency)
  117.         drop.springs[Math.floor(Math.random() * drop.options.waveLength)].p = drop.options.waveHeight;
  118.  
  119.     drop.ctx.clearRect(0, 0, drop.options.realWidth, drop.options.canvasHeight);
  120.     drop.updateSprings(0.1);
  121.     drop.renderWaves();
  122.  
  123.     requestAnimationFrame(function () {
  124.         raindropsAnimationTick(drop);
  125.     });
  126. }
  127. ;

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.