SHARE
TWEET

Untitled

a guest Apr 22nd, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // globals
  2. var canvas;
  3. var ctx;
  4. var W;
  5. var H;
  6. if(screen.width>=988){
  7.     var mp = 150; //max particles
  8. }else{
  9.     var mp = 75; //max particles
  10. }
  11. var particles = [];
  12. var angle = 0;
  13. var tiltAngle = 0;
  14. var confettiActive = true;
  15. var animationComplete = true;
  16. var deactivationTimerHandler;
  17. var reactivationTimerHandler;
  18. var animationHandler;
  19.  
  20. // objects
  21.  
  22. var particleColors = {
  23.     colorOptions: ["DodgerBlue", "OliveDrab", "Gold", "pink", "SlateBlue", "lightblue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"],
  24.     colorIndex: 0,
  25.     colorIncrementer: 0,
  26.     colorThreshold: 10,
  27.     getColor: function () {
  28.         if (this.colorIncrementer >= 10) {
  29.             this.colorIncrementer = 0;
  30.             this.colorIndex++;
  31.             if (this.colorIndex >= this.colorOptions.length) {
  32.                 this.colorIndex = 0;
  33.             }
  34.         }
  35.         this.colorIncrementer++;
  36.         return this.colorOptions[this.colorIndex];
  37.     }
  38. }
  39.  
  40. function confettiParticle(color) {
  41.     this.x = Math.random() * W; // x-coordinate
  42.     this.y = (Math.random() * H) - H; //y-coordinate
  43.     this.r = RandomFromTo(10, 30); //radius;
  44.     this.d = (Math.random() * mp) + 10; //density;
  45.     this.color = color;
  46.     this.tilt = Math.floor(Math.random() * 10) - 10;
  47.     this.tiltAngleIncremental = (Math.random() * 0.07) + .05;
  48.     this.tiltAngle = 0;
  49.  
  50.     this.draw = function () {
  51.         ctx.beginPath();
  52.         ctx.lineWidth = this.r / 2;
  53.         ctx.strokeStyle = this.color;
  54.         ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y);
  55.         ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4));
  56.         return ctx.stroke();
  57.     }
  58. }
  59.  
  60. $(document).ready(function () {
  61.     SetGlobals();
  62.     InitializeButton();
  63.     InitializeConfetti();
  64.  
  65.     $(window).resize(function () {
  66.         W = window.innerWidth;
  67.         H = window.innerHeight;
  68.         canvas.width = W;
  69.         canvas.height = H;
  70.     });
  71.  
  72. });
  73.  
  74. function InitializeButton() {
  75.     $('#stopButton').click(DeactivateConfetti);
  76.     $('#startButton').click(RestartConfetti);
  77. }
  78.  
  79. function SetGlobals() {
  80.     canvas = document.getElementById("canvas");
  81.     ctx = canvas.getContext("2d");
  82.     W = window.innerWidth;
  83.     H = window.innerHeight;
  84.     canvas.width = W;
  85.     canvas.height = H;
  86. }
  87.  
  88. function InitializeConfetti() {
  89.     particles = [];
  90.     animationComplete = false;
  91.     for (var i = 0; i < mp; i++) {
  92.         var particleColor = particleColors.getColor();
  93.         particles.push(new confettiParticle(particleColor));
  94.     }
  95.     StartConfetti();
  96. }
  97.  
  98. function Draw() {
  99.     ctx.clearRect(0, 0, W, H);
  100.     var results = [];
  101.     for (var i = 0; i < mp; i++) {
  102.         (function (j) {
  103.             results.push(particles[j].draw());
  104.         })(i);
  105.     }
  106.     Update();
  107.  
  108.     return results;
  109. }
  110.  
  111. function RandomFromTo(from, to) {
  112.     return Math.floor(Math.random() * (to - from + 1) + from);
  113. }
  114.  
  115.  
  116. function Update() {
  117.     var remainingFlakes = 0;
  118.     var particle;
  119.     angle += 0.01;
  120.     tiltAngle += 0.1;
  121.  
  122.     for (var i = 0; i < mp; i++) {
  123.         particle = particles[i];
  124.         if (animationComplete) return;
  125.  
  126.         if (!confettiActive && particle.y < -15) {
  127.             particle.y = H + 100;
  128.             continue;
  129.         }
  130.  
  131.         stepParticle(particle, i);
  132.  
  133.         if (particle.y <= H) {
  134.             remainingFlakes++;
  135.         }
  136.         CheckForReposition(particle, i);
  137.     }
  138.  
  139.     if (remainingFlakes === 0) {
  140.         StopConfetti();
  141.     }
  142. }
  143.  
  144. function CheckForReposition(particle, index) {
  145.     if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) {
  146.         if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes
  147.         {
  148.             repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 10);
  149.         } else {
  150.             if (Math.sin(angle) > 0) {
  151.                 //Enter from the left
  152.                 repositionParticle(particle, -5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
  153.             } else {
  154.                 //Enter from the right
  155.                 repositionParticle(particle, W + 5, Math.random() * H, Math.floor(Math.random() * 10) - 10);
  156.             }
  157.         }
  158.     }
  159. }
  160. function stepParticle(particle, particleIndex) {
  161.     particle.tiltAngle += particle.tiltAngleIncremental;
  162.     particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 2;
  163.     particle.x += Math.sin(angle);
  164.     particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15;
  165. }
  166.  
  167. function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
  168.     particle.x = xCoordinate;
  169.     particle.y = yCoordinate;
  170.     particle.tilt = tilt;
  171. }
  172.  
  173. function StartConfetti() {
  174.     W = window.innerWidth;
  175.     H = window.innerHeight;
  176.     canvas.width = W;
  177.     canvas.height = H;
  178.     (function animloop() {
  179.         if (animationComplete) return null;
  180.         animationHandler = requestAnimFrame(animloop);
  181.         return Draw();
  182.     })();
  183. }
  184.  
  185. function ClearTimers() {
  186.     clearTimeout(reactivationTimerHandler);
  187.     clearTimeout(animationHandler);
  188. }
  189.  
  190. function DeactivateConfetti() {
  191.     confettiActive = false;
  192.     ClearTimers();
  193. }
  194.  
  195. function StopConfetti() {
  196.     animationComplete = true;
  197.     if (ctx == undefined) return;
  198.     ctx.clearRect(0, 0, W, H);
  199. }
  200.  
  201. function RestartConfetti() {
  202.     ClearTimers();
  203.     StopConfetti();
  204.     reactivationTimerHandler = setTimeout(function () {
  205.         confettiActive = true;
  206.         animationComplete = false;
  207.         InitializeConfetti();
  208.     }, 100);
  209.  
  210. }
  211.  
  212. window.requestAnimFrame = (function () {
  213.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
  214.         return window.setTimeout(callback, 1000 / 60);
  215.     };
  216. })();
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