diff options
| -rw-r--r-- | .DS_Store | bin | 0 -> 6148 bytes | |||
| -rw-r--r-- | apple.png | bin | 0 -> 363730 bytes | |||
| -rw-r--r-- | banana.png | bin | 0 -> 126252 bytes | |||
| -rw-r--r-- | index.html | 75 | ||||
| -rw-r--r-- | lemon.png | bin | 0 -> 39847 bytes | |||
| -rw-r--r-- | lime.png | bin | 0 -> 47442 bytes | |||
| -rw-r--r-- | rasp.png | bin | 0 -> 90282 bytes |
7 files changed, 75 insertions, 0 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/.DS_Store diff --git a/apple.png b/apple.png Binary files differnew file mode 100644 index 0000000..ca22842 --- /dev/null +++ b/apple.png diff --git a/banana.png b/banana.png Binary files differnew file mode 100644 index 0000000..09b948c --- /dev/null +++ b/banana.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..df5cd21 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ +<style>body,html{width:100%;height:100%;margin:0;padding:0}</style> +<body><canvas id="canvas"></body> +<script> +ctx=canvas.getContext('2d') +var imgs = "apple.png banana.png rasp.png lime.png lemon.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 = 20 +var side = 100 +var dy = 1 +var a = [], w, h +window.addEventListener("resize",resize) +resize() +for (var i = 0; i < count; i++){ + a.push({ + img: choice(imgs), + x: randint(w), + s: randrange(0.5, 1.0), + y: randrange(-h*1/3,h*2/3)|0, + r: randrange(0,Math.PI*2), + dr: randrange(-2,2)*0.0002, + opacity: 0, + }) +} +function resize () { + canvas.width = w = window.innerWidth + canvas.height = h = window.innerHeight +} +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].y += dy * a[i].s + if (i==0) console.log(a[i]) + if (img.complete) { + if (a[i].y > h) { + a[i].y = - img.c.height + a[i].opacity = 0 + } + 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() + ctx.globalAlpha = 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.drawImage(img.c, a[i].x, a[i].y, ww, hh) + ctx.restore() + } + } +} +animate() +</script> diff --git a/lemon.png b/lemon.png Binary files differnew file mode 100644 index 0000000..5265989 --- /dev/null +++ b/lemon.png diff --git a/lime.png b/lime.png Binary files differnew file mode 100644 index 0000000..1c2ce27 --- /dev/null +++ b/lime.png diff --git a/rasp.png b/rasp.png Binary files differnew file mode 100644 index 0000000..e8ab394 --- /dev/null +++ b/rasp.png |
