diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2021-10-12 15:36:25 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2021-10-12 15:36:25 +0200 |
| commit | 3eae82323fc6cb630de343257d1c2f031b6eee85 (patch) | |
| tree | d4b775b73c51ff9555bff10a1b16faff6b557c70 /fruit2.html | |
| parent | d70d9e95feb95d5c07ec14c971c75a4f8d20453d (diff) | |
Diffstat (limited to 'fruit2.html')
| -rw-r--r-- | fruit2.html | 111 |
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> |