WIP

web/emotewall/index.js

@@ -1,3 +1,7 @@
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+
+
 $(function () {
 
     const SEVENTV_GLOBAL_URL = "https://api.7tv.app/v2/emotes/global";
@@ -22,8 +26,8 @@ $(function () {
     const canvas = document.getElementById('wall');
     const ctx = canvas.getContext('2d');
     const resizeCanvas = () => {
-        canvas.width = window.innerWidth-8;
-        canvas.height = window.innerHeight-8;
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
     }
     window.addEventListener('resize', resizeCanvas, false);
     resizeCanvas();
@@ -96,13 +100,18 @@ $(function () {
         constructor(emote,data) {
             super(emote,data)
             this.setPhysics(randRange(0, canvas.width),
-                            randRange(0, canvas.height-this.size),
-                            0,15,
+                            randRange(0, -this.size),
+                            0,randRange(10,15),
                             0,0)
+            this.size = randRange(this.size/2,this.size)
             this.time = 5.5+this.y/canvas.height*2;
         }
-        update(tick){
-            super.update(tick)
+
+        draw(){
+            ctx.globalAlpha = tWave(this.time);
+            if(img_map[this.emote])
+                ctx.drawImage(img_map[this.emote], this.x, this.y, 
+                              this.size, this.size);
         }
     }
 
@@ -150,17 +159,18 @@ $(function () {
         }
     }
 
-    class ExplosionP extends Particle {
+    class ExplosionP extends RainP {
         constructor(emote,data,args){
             super(emote,data)
-            let speed = randRange(0,6) + 7;
+            let speed = randRange(5,15);
             let fang = 2*Math.PI* (args.angle/360)
             let ang = randRange(-fang/2, +fang/2)+Math.PI/2 ;//+ 2*(angle/360)*Math.PI;
             this.setPhysics(args.x,args.y,
                             Math.cos(ang)*speed,
                             -Math.sin(ang)*speed,
                             0,10);
-            this.time = drt - fdt*1.5;
+            this.time = drt - fdt*2;
+            this.size = randRange(this.size/2,this.size)
         }
         
     }
@@ -210,23 +220,42 @@ $(function () {
     }
 
     const genExplosion = (x,y,ang) =>{
-        for(let i=0; i<50; ++i) new ExplosionP('nod', {},x,y,ang);
+        for(let i=0; i<100; ++i) createParticule(ExplosionP, 'nod', {},{x:x,y:y,angle:ang});
     }
 
     const genRain = () => {
-        for(let i = 0; i<50; ++i) new RainP('nod', {});
+        let xpos = randRange(0, canvas.width);
+        let time = 0;
+        const interval = setInterval(()=>{
+            for(let i=0; i<10; ++i) createParticule(RainP, 'nod', {},{});
+            ++time;
+            if(time > 50) clearInterval(interval);
+          }, 100);
+    }
+
+    const genVolcano = () => {
+        let xpos = randRange(0, canvas.width);
+        let time = 0;
+        const interval = setInterval(()=>{
+            for(let i=0; i<10; ++i) createParticule(ExplosionP, 'nod', {},{x:xpos,y:canvas.height,angle:30});
+            ++time;
+            if(time > 50) clearInterval(interval);
+          }, 100);
     }
 
 
 
-    function init() {
+    async function init() {
+        main(0);
+        sleep(1000).then(()=>{
         createParticule(BounceGP, "nod", {}, {})
         createParticule(BounceP, "nod", {}, {})
         createParticule(BounceP, "nod", {}, {})
         createParticule(BombP, "nod", {}, {})
         createParticule(FireworkP, "nod", {}, {})
-        //genRain();
-        main(0);
+        genRain();
+        genVolcano();
+        })
     }
 
     function main(tframe) {