<?xml version="1.0"?>
<rss version="2.0">
   <channel>
      <title>Javascript Code for Confetti Animation by Nitesh</title>
      <link>https://padlet.com/nitesh/l7ugkzzyq6rv</link>
      <description>Sample padlet with code snippets</description>
      <language>en-us</language>
      <pubDate>2017-02-08 02:42:47 UTC</pubDate>
      <lastBuildDate>2025-09-25 07:55:57 UTC</lastBuildDate>
      <webMaster>hello@padlet.com</webMaster>
      <image>
         <url></url>
      </image>
      <item>
         <title></title>
         <author>nitesh</author>
         <link>https://padlet.com/nitesh/l7ugkzzyq6rv/wish/152352405</link>
         <description><![CDATA[<pre>window.startConfetti = function() {<br>&nbsp; var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;<br>&nbsp; NUM_CONFETTI = 150;<br>&nbsp; COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];<br>&nbsp; PI_2 = 2 * Math.PI;<br>&nbsp; canvas = document.getElementById("world");<br>&nbsp; context = canvas.getContext("2d");<br>&nbsp; window.w = 0;<br>&nbsp; window.h = 0;<br>&nbsp; resizeWindow = function() {<br>&nbsp; &nbsp; window.w = canvas.width = window.innerWidth;<br>&nbsp; &nbsp; return window.h = canvas.height = window.innerHeight;<br>&nbsp; };<br>&nbsp; window.addEventListener('resize', resizeWindow, false);<br>&nbsp; range = function(a, b) {<br>&nbsp; &nbsp; return (b - a) * Math.random() + a;<br>&nbsp; };<br>&nbsp; drawCircle = function(x, y, r, style) {<br>&nbsp; &nbsp; context.beginPath();<br>&nbsp; &nbsp; context.arc(x, y, r, 0, PI_2, false);<br>&nbsp; &nbsp; context.fillStyle = style;<br>&nbsp; &nbsp; return context.fill();<br>&nbsp; };<br>&nbsp; xpos = 0.5;<br>&nbsp; document.onmousemove = function(e) {<br>&nbsp; &nbsp; return xpos = e.pageX / w;<br>&nbsp; };<br>&nbsp; window.requestAnimationFrame = (function() {<br>&nbsp; &nbsp; return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {<br>&nbsp; &nbsp; &nbsp; return window.setTimeout(callback, 1000 / 60);<br>&nbsp; &nbsp; };<br>&nbsp; })();<br>&nbsp; Confetti = (function() {<br>&nbsp; &nbsp; function Confetti() {<br>&nbsp; &nbsp; &nbsp; this.style = COLORS[~~range(0, 5)];<br>&nbsp; &nbsp; &nbsp; this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];<br>&nbsp; &nbsp; &nbsp; this.r = ~~range(2, 6);<br>&nbsp; &nbsp; &nbsp; this.r2 = 2 * this.r;<br>&nbsp; &nbsp; &nbsp; this.replace();<br>&nbsp; &nbsp; }<br><br>&nbsp; &nbsp; Confetti.prototype.replace = function() {<br>&nbsp; &nbsp; &nbsp; this.opacity = 0;<br>&nbsp; &nbsp; &nbsp; this.dop = 0.03 * range(1, 4);<br>&nbsp; &nbsp; &nbsp; this.x = range(-this.r2, w - this.r2);<br>&nbsp; &nbsp; &nbsp; this.y = range(-20, h - this.r2);<br>&nbsp; &nbsp; &nbsp; this.xmax = w - this.r;<br>&nbsp; &nbsp; &nbsp; this.ymax = h - this.r;<br>&nbsp; &nbsp; &nbsp; this.vx = range(0, 2) + 8 * xpos - 5;<br>&nbsp; &nbsp; &nbsp; return this.vy = 0.7 * this.r + range(-1, 1);<br>&nbsp; &nbsp; };<br><br>&nbsp; &nbsp; Confetti.prototype.draw = function() {<br>&nbsp; &nbsp; &nbsp; var ref;<br>&nbsp; &nbsp; &nbsp; this.x += this.vx;<br>&nbsp; &nbsp; &nbsp; this.y += this.vy;<br>&nbsp; &nbsp; &nbsp; this.opacity += this.dop;<br>&nbsp; &nbsp; &nbsp; if (this.opacity &gt; 1) {<br>&nbsp; &nbsp; &nbsp; &nbsp; this.opacity = 1;<br>&nbsp; &nbsp; &nbsp; &nbsp; this.dop *= -1;<br>&nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; if (this.opacity &lt; 0 || this.y &gt; this.ymax) {<br>&nbsp; &nbsp; &nbsp; &nbsp; this.replace();<br>&nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; if (!((0 &lt; (ref = this.x) &amp;&amp; ref &lt; this.xmax))) {<br>&nbsp; &nbsp; &nbsp; &nbsp; this.x = (this.x + this.xmax) % this.xmax;<br>&nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");<br>&nbsp; &nbsp; };<br><br>&nbsp; &nbsp; return Confetti;<br><br>&nbsp; })();<br>&nbsp; confetti = (function() {<br>&nbsp; &nbsp; var j, ref, results;<br>&nbsp; &nbsp; results = [];<br>&nbsp; &nbsp; for (i = j = 1, ref = NUM_CONFETTI; 1 &lt;= ref ? j &lt;= ref : j &gt;= ref; i = 1 &lt;= ref ? ++j : --j) {<br>&nbsp; &nbsp; &nbsp; results.push(new Confetti);<br>&nbsp; &nbsp; }<br>&nbsp; &nbsp; return results;<br>&nbsp; })();<br>&nbsp; window.step = function() {<br>&nbsp; &nbsp; var c, j, len, results;<br>&nbsp; &nbsp; requestAnimationFrame(step);<br>&nbsp; &nbsp; context.clearRect(0, 0, w, h);<br>&nbsp; &nbsp; results = [];<br>&nbsp; &nbsp; for (j = 0, len = confetti.length; j &lt; len; j++) {<br>&nbsp; &nbsp; &nbsp; c = confetti[j];<br>&nbsp; &nbsp; &nbsp; results.push(c.draw());<br>&nbsp; &nbsp; }<br>&nbsp; &nbsp; return results;<br>&nbsp; };<br>&nbsp; step();<br>&nbsp; return setTimeout(resizeWindow, 0);<br>};</pre>]]></description>
         <enclosure url="" />
         <pubDate>2017-02-08 02:45:55 UTC</pubDate>
         <guid>https://padlet.com/nitesh/l7ugkzzyq6rv/wish/152352405</guid>
      </item>
   </channel>
</rss>
