1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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>
|
