Codevember #6 - storm

codevember-6-storm.markdown

Codevember #6 - storm

A Pen by Vanessa on CodePen.

License.

index.html

<div class="image-container">
  <img src="" 
       alt="" 
       class="container" 
       id="image">
</div>  

script.js

var image = document.getElementById('image');
image.onload = function() {
  var engine = new RainyDay({
    image: this,
    gravityAngle: Math.PI / 5

  });
  engine.trail = engine.TRAIL_SMUDGE;
  engine.rain([ [3, 2, 2] ], 100);
  engine.rain(
    [
        [1, 0, 20], 
        [3, 3, 1],
        [1, 2, 19]
    ],                       
    100);
 // engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'http://images.pexels.com/photos/458785/pexels-photo-458785.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb';

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/rainyday.js/0.1.2/rainyday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

body {
				overflow: hidden;
				height: 100%;
				margin: 0;
				padding: 0;
			}
.container {
  width: 100vw;
  height: 100vh;
}

.image-container {
  overflow: hidden;
}