diff options
| author | Jules <jules@asdf.us> | 2021-10-11 15:50:41 +0000 |
|---|---|---|
| committer | Jules <jules@asdf.us> | 2021-10-11 15:50:41 +0000 |
| commit | d70d9e95feb95d5c07ec14c971c75a4f8d20453d (patch) | |
| tree | 77fd5027dfb0c813bd463c380147b840da245683 /ducks.html | |
| parent | 2f8c0d2b19ffda3a599a426c4fd6a6ea21f6adfc (diff) | |
ducks
Diffstat (limited to 'ducks.html')
| -rw-r--r-- | ducks.html | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/ducks.html b/ducks.html new file mode 100644 index 0000000..4cebf03 --- /dev/null +++ b/ducks.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 = "duck.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)*randrange(0.0002,0.0018), + 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> |