diff options
| -rw-r--r-- | duck.png | bin | 0 -> 104621 bytes | |||
| -rw-r--r-- | index.html | 226 |
2 files changed, 153 insertions, 73 deletions
diff --git a/duck.png b/duck.png Binary files differnew file mode 100644 index 0000000..9773517 --- /dev/null +++ b/duck.png @@ -1,75 +1,155 @@ -<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 +<!DOCTYPE html> +<html> + <head> + <title>Liam Morrison</title> + <style> + body, + html { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + #content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + max-width: 65vh; + } + #content div { + display: inline; + box-decoration-break: clone; + font-family: sans-serif; + font-size: 3vh; + margin: 0.5vh 5vh; + } + #content div:last-child { + margin-bottom: 5vh; + } + #content a { + color: #81f; + text-decoration: none; + font-style: italic; + } + #content .name { + font-size: 5vh; + } + #duck { + position: absolute; + bottom: 4vh; + right: 5vh; + max-height: 25vh; + } + </style> + </head> + <body> + <canvas id="canvas"></canvas> + <div id="content"> + <div class="name">Liam Morrison</div> + <div>Designer and illustrator.</div> + <div>Portfolio available upon request.</div> + <div>Get in touch: <a id="email"></a></div> + </div> + <img src="duck.png" id="duck" /> + </body> + <script> + const email = atob("bGlhbS5tb3JyaXNvbkBnbWFpbC5jb20="); + document.querySelector("#email").innerHTML = email; + document.querySelector("#email").href = "mailto:" + email; + ctx = canvas.getContext("2d"); + // var imgs = "apple.png banana.png rasp.png lime.png lemon.png" + 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); } - 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() + function randrange(a, b) { + return (b - a) * Math.random() + a; } - } -} -animate() -</script> + function choice(a) { + return a[randint(a.length)]; + } + var count = 20; + 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, + scale: randrange(0.5, 2.0), + flip: choice([-1, 1]), + 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].img = choice(imgs); + a[i].x = randint(w); + a[i].s = randrange(0.5, 1.0); + a[i].y = randrange((-h * 1) / 3, (h * 2) / 3) | 0; + a[i].r = randrange(0, Math.PI * 2); + a[i].dr = randrange(-2, 2) * 0.0002; + a[i].scale = randrange(0.8, 1.2); + a[i].flip = choice([-1, 1]); + 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.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> |
