daily pastebin goal
50%
SHARE
TWEET

nieva (study for snowfall effect)

owltrash Dec 10th, 2018 (edited) 38 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script defer>
  2. window.onload = function() {
  3. var c = document.getElementById('canv'),
  4.     $ = c.getContext("2d");
  5. var w = c.width = window.innerWidth,
  6.     h = c.height = window.innerHeight;
  7.  
  8. Snowy();
  9. function Snowy() {
  10.   var snow, arr = [];
  11.   var num = 600, tsc = 1, sp = 1;
  12.   var sc = 1.3, t = 0, mv = 20, min = 1;
  13.     for (var i = 0; i < num; ++i) {
  14.       snow = new Flake();
  15.       snow.y = Math.random() * (h + 50);
  16.       snow.x = Math.random() * w;
  17.       snow.t = Math.random() * (Math.PI * 2);
  18.       snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
  19.       snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
  20.       snow.sp = snow.sp < min ? min : snow.sp;
  21.       arr.push(snow);
  22.     }
  23.   go();
  24.   function go(){
  25.     window.requestAnimationFrame(go);
  26.       $.clearRect(0, 0, w, h);
  27.       $.fillStyle = 'hsla(242, 95%, 3%, 1)';
  28.       $.fillRect(0, 0, w, h);
  29.       $.fill();
  30.         for (var i = 0; i < arr.length; ++i) {
  31.           f = arr[i];
  32.           f.t += .05;
  33.           f.t = f.t >= Math.PI * 2 ? 0 : f.t;
  34.           f.y += f.sp;
  35.           f.x += Math.sin(f.t * tsc) * (f.sz * .3);
  36.           if (f.y > h + 50) f.y = -10 - Math.random() * mv;
  37.           if (f.x > w + mv) f.x = - mv;
  38.           if (f.x < - mv) f.x = w + mv;
  39.           f.draw();}
  40.  }
  41.  function Flake() {
  42.    this.draw = function() {
  43.       this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
  44.       this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
  45.       this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
  46.       $.moveTo(this.x, this.y);
  47.       $.fillStyle = this.g;
  48.       $.beginPath();
  49.       $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
  50.       $.fill();}
  51.   }
  52. }
  53. /*________________________________________*/
  54. window.addEventListener('resize', function(){
  55.   c.width = w = window.innerWidth;
  56.   c.height = h = window.innerHeight;
  57. }, false);
  58.  
  59. };
  60. </script>
  61. <style>
  62. @import url(https://fonts.googleapis.com/css?family=Molle:400italic&subset=latin,latin-ext);
  63. body{
  64. background-color: hsla(0,0%,0%,1);
  65. margin: 0px;
  66. overflow: hidden;
  67. font-family: 'Molle', cursive;
  68. }
  69. h2{
  70.   left: 50%;
  71.   position: absolute;
  72.   top: 50%;
  73.   transform: translate( -50%, -50%);
  74.   font-size:3em;
  75.   color:cyan;
  76. }
  77. #thepic{
  78. position: fixed;
  79. height: 100%;
  80. width: 100%;
  81. background-image:url('http://i.picpar.com/XBad.png');
  82. background-repeat: no-repeat;
  83. background-size: 30%;
  84. background-position:center;
  85. top: 0px;
  86. bottom: 0px;
  87. }
  88.  
  89. </style>
  90. </head>
  91. <body>
  92. <canvas id='canv'></canvas>
  93. <div id="thepic">
  94. </div>
  95. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top