1 files changed, 111 insertions, 0 deletions
diff --git a/fruit2.html b/fruit2.html
new file mode 100644
index 0000000..2a5d6d6
--- /dev/null
+++ b/fruit2.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body,
+      html {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+  </body>
+  <script>
+    var ctx = canvas.getContext("2d");
+    var imgs = "apple.png banana.png rasp.png lime.png lemon.png grapes.png pineapple.png orange.png"
+      .split(" ")
+      .map(function (s) {
+        var img = new Image();
+        var c = document.createElement("canvas");
+        var res = { img: img, c: c, complete: false };
+        var loaded = false;
+        img.onload = function () {
+          if (loaded) return;
+          loaded = true;
+          var cx = c.getContext("2d");
+          c.width = img.naturalWidth;
+          c.height = img.naturalHeight;
+          cx.drawImage(img, 0, 0);
+          res.complete = true;
+        };
+        img.src = s;
+        if (img.complete) img.onload();
+        return res;
+      });
+    function randint(n) {
+      return Math.floor(Math.random() * n);
+    }
+    function randrange(a, b) {
+      return (b - a) * Math.random() + a;
+    }
+    function choice(a) {
+      return a[randint(a.length)];
+    }
+    var count = 40;
+    var a = [],
+      w,
+      h;
+    window.addEventListener("resize", resize);
+    resize();
+    for (var i = 0; i < count; i++) {
+      a.push(reset({}));
+    }
+    function resize() {
+      canvas.width = w = window.innerWidth;
+      canvas.height = h = window.innerHeight;
+    }
+    function reset(obj) {
+      obj.img = choice(imgs);
+      obj.x = randint(w);
+      obj.s = randrange(0.5, 1.0);
+      obj.speed = obj.s * 10;
+      obj.y = randrange((-h * 1) / 3, (h * 2) / 3) | 0;
+      obj.r = randrange(0, Math.PI * 2);
+      obj.dr = randrange(-2, 2) * 0.0002;
+      obj.pos = 0;
+      obj.dest = randrange(h / 32, h / 8);
+      obj.scale = randrange(0.8, 1.2);
+      obj.flip = choice([-1, 1]);
+      obj.opacity = 0;
+      return obj;
+    }
+    function animate() {
+      requestAnimationFrame(animate);
+      ctx.fillStyle = "rgba(255,255,255,0.00005)";
+      ctx.fillRect(0, 0, w, h);
+      for (var i = 0; i < count; i++) {
+        var img = a[i].img;
+        a[i].pos += a[i].speed;
+        a[i].y += a[i].speed;
+        // if (i == 0) console.log(a[i]);
+        if (img.complete) {
+          if (a[i].pos > a[i].dest) {
+            reset(a[i]);
+          }
+          var rat = img.c.width / img.c.height;
+          var ww = img.c.width * a[i].s;
+          var hh = img.c.height * a[i].s;
+          ctx.save();
+          var alpha = Math.pow(
+            1 - Math.abs((a[i].pos / a[i].dest - 0.5) * 2),
+            10
+          ) * 0.1;
+          // if (i == 0) console.log(alpha);
+          ctx.globalAlpha = alpha; // Math.min((a[i].opacity += 0.0005), 1);
+          ctx.translate(w / 2, h / 2);
+          ctx.rotate((a[i].r += a[i].dr));
+          ctx.translate(-w / 2, -h / 2);
+          ctx.translate(ww, hh);
+          ctx.scale(a[i].scale * a[i].flip, a[i].scale);
+          ctx.drawImage(img.c, a[i].x, a[i].y, ww, hh);
+          ctx.restore();
+        }
+      }
+    }
+    animate();
+  </script>
+</html>