diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | docs/assets/js/audio-player.js | 76 | ||||
| -rw-r--r-- | docs/index.html | 4 | ||||
| -rw-r--r-- | docs/pavone/animated-star-image-0005.gif | bin | 0 -> 3070 bytes | |||
| -rw-r--r-- | docs/pavone/animated-star-image-0142.gif | bin | 0 -> 319 bytes | |||
| -rw-r--r-- | docs/pavone/animated-star-image-0147.gif | bin | 0 -> 1379 bytes | |||
| -rw-r--r-- | docs/pavone/index.html | 182 | ||||
| -rw-r--r-- | docs/pavone/pavone-full.jpg | bin | 0 -> 42190 bytes | |||
| -rw-r--r-- | docs/pavone/pavone.jpg | bin | 0 -> 51825 bytes |
9 files changed, 262 insertions, 1 deletions
@@ -6,3 +6,4 @@ wav *.mp4 logs/ *.mp4 +*.mp3 diff --git a/docs/assets/js/audio-player.js b/docs/assets/js/audio-player.js new file mode 100644 index 0000000..4dbe601 --- /dev/null +++ b/docs/assets/js/audio-player.js @@ -0,0 +1,76 @@ +document.addEventListener("DOMContentLoaded", function(){ + +var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) +var links = document.querySelectorAll("a") +var audio, music = [], current_index = -1, typing = false +// var comment = document.querySelector("#comment") +Array.prototype.slice.apply(links).forEach(function(url){ + if (url.href.match(/\.(mp3|wav|ogg)/i)) { + var index = music.length + if (is_mobile) url.href = url.href.replace(/^https/,"http") + music.push(url) + url.addEventListener("click", function(e){ + if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + e.preventDefault() + play(index) + }) + } + else if (url.href.match(/(gif|jpe?g|png|bmp)/i)) { + url.innerHTML = "<img src='" + url.href + "'>" + url.addEventListener("click", function(e){ + if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + e.preventDefault() + url.classList.toggle("zoomed") + }) + } +}) +if (music.length) { + audio = document.createElement("audio") + audio.setAttribute("controls", true) + audio.addEventListener("ended", next) + audio.src = music[0] + var player = document.querySelector("table") + player.parentNode.insertBefore(audio, player) + document.body.addEventListener("keydown", keydown) + // comment.addEventListener("focus", focusTextBox) + // comment.addEventListener("blur", blurTextBox) +} +function play(index){ + current_index = (index + music.length) % music.length + audio.src = music[current_index].href + audio.play() + var playing = document.querySelector(".playing") + if (playing) playing.classList.remove("playing") + music[current_index].classList.add("playing") +} +function prev(){ + play(current_index - 1) +} +function next(){ + play(current_index + 1) +} +function toggle(){ + if (audio.paused) audio.play() + else audio.pause() +} +function keydown(e){ + if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return + switch (e.keyCode) { + case 37: // left + prev() + break; + case 39: // right + next() + break; + case 32: // spacebar + e.preventDefault() + toggle() + break; + } +} +function focusTextBox (){ typing = true } +function blurTextBox (){ typing = false } + +}) + + diff --git a/docs/index.html b/docs/index.html index aec8e68..56b7af0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,10 +97,12 @@ </section> <section id="contact"> <h2>Contact</h2> <p> Booking: <a target='_blank' id='email_addr'></a><br> + Bandcamp: + <a target='_blank' id='twitter_addr' href='https://lfolobster.bandcamp.com/'>LFO Lobster</a><br> Twitter: @<a target='_blank' id='twitter_addr' href='https://twitter.com/XenaVectra/'>XenaVectra</a><br> Soundcloud: - <a target='_blank' href="https://soundcloud.com/xenavectra/">XenaVectra</a>, + <a target='_blank' href="https://soundcloud.com/xenavectra/">Xena Vectra</a>, <a target='_blank' href="https://soundcloud.com/magisphere/">Magisphere</a> <br/> <!-- diff --git a/docs/pavone/animated-star-image-0005.gif b/docs/pavone/animated-star-image-0005.gif Binary files differnew file mode 100644 index 0000000..8d55849 --- /dev/null +++ b/docs/pavone/animated-star-image-0005.gif diff --git a/docs/pavone/animated-star-image-0142.gif b/docs/pavone/animated-star-image-0142.gif Binary files differnew file mode 100644 index 0000000..63a1e91 --- /dev/null +++ b/docs/pavone/animated-star-image-0142.gif diff --git a/docs/pavone/animated-star-image-0147.gif b/docs/pavone/animated-star-image-0147.gif Binary files differnew file mode 100644 index 0000000..0a66746 --- /dev/null +++ b/docs/pavone/animated-star-image-0147.gif diff --git a/docs/pavone/index.html b/docs/pavone/index.html new file mode 100644 index 0000000..ca7a5cb --- /dev/null +++ b/docs/pavone/index.html @@ -0,0 +1,182 @@ +<!doctype html> +<html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> +<title>Pavone Cristallo</title> +<style type="text/css"> +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +html,body{width:100%;height:100%;margin:0;padding:0;} +body { text-align: center; background: linear-gradient(#000, #102); background-attachment: fixed; } +#pavone { background-image:url('pavone.jpg'); background-size: 400px; background-position: center center; text-align: center; } +#misc { position: fixed; z-index: -1; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 50%; } +#misc canvas { width: 100%; height: 100%; } +#content { z-index: 1; } +#content section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 20px; margin: 50px 0 } +#content div { display: inline-block; padding: 10px; margin: 10px; background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,80,0.8)); color: #fff; border: 10px solid rgba(128,255,255,0.05); box-shadow: 10px 10px 10px rgba(0,0,0,0.6); } +audio { box-shadow: 12px 12px 12px rgba(0,0,0,0.3); border-radius: 20px; } +h1 { color: yellow; padding: 0; margin: 0; transform: skewX(-10deg); font-size: 48px; letter-spacing: 6px; } +h2 { color: yellow; } +i { color: #0ff; } +b { color: #ffb; } +a { color: #3bf; } +#demos a { color: #ff8; display: inline-block; margin: 20px; padding: 20px; background: black; background: #008; box-shadow: 0 4px 5px #000; transition: all 0.4s; text-decoration: none; } +#demos a.playing { background: #00f; color: #ff0; } +span { color: #fbb; } +audio { -webkit-filter: invert(100%); } +#gifz {position:absolute;top:0;left:0;z-index:-2; } +#gifz img { position: absolute; animation: faderz; } +#demos i { color: #f88; } +@keyframes faderz { 0% { opacity: 0 } 50% { opacity: 1} 100%{ opacity: 0}} +#horizon { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), rgba(255,128,128,0.3), #008, #00f); opacity: 0.2; } +#horizona { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(rgba(0,0,255,0.01), #00f); opacity: 0.3; z-index: -2; } +#horizon2 { width: 100%; height: 200px; background: linear-gradient(rgba(255,128,0,0.01), rgba(255,128,0, 0.2), rgba(128,192,255,0.8)); opacity: 0.2; } +</style> +<body> + <div id='misc'><canvas id='c'></canvas><div id='gifz'></div><div id='horizon'></div><div id='horizona'></div></div> + <div id='content'> + <br> + <br><br> +<section> +<div> +<h1>PAVONE CRISTALLO</h1> +</div> +</section> + +<section id='demos'> + <div> + 33<b>36</b>32<b>1153</b>13<b>31</b>33<b>5831</b>31<b>08</b>33<br> + <b>vxvxvxvxvxvxvxvxvxvxvxvxv</b><br> + <b>vv</b> <i>demos ~ demos</i> <b>vvv</b><br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + <a href="pavone cristallo - approaching dawn.mp3">▶ Approaching Dawn</a><br> + <a href="pavone cristallo - bog zombie.mp3">▶ Bog Zombie</a><br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + | | | | | | | | | | | | | <br> + <b>vxvxvxvxvxvxvxvxvxvxv</b><br> + <b>vxvxvxvxvxvxvxvxvxvxvxvxv</b><br> + 31<b>63</b>32<b>3511</b>31<b>31</b>33<b>1385</b>13<b>80</b>33<br> + </div> +</section> + +<section><table></table></section> + +<section> +<div><i><b>Pavone Cristallo</b></i> <span>is a live hardware/acoustic horror disco trio</span></div> +</section> +<section> +<div><i>Beth</i> leads & pads<br><i>Jules</i> pads & arps<br><i>Liam</i> drums</div> + <div> + For more music check out<br> + <a href="https://lfolobster.bandcamp.com/">LFO Lobster</a> + <br> + or follow us on + <a href="https://twitter.com/lfolobster">Twitter</a> + </div> +</section> + </div> + <div id='horizon2'></div> +</body> +<script src="/assets/js/stars.js"></script> +<script src="/assets/js/audio-player.js"></script> + <script> + var w = c.width = window.innerWidth * devicePixelRatio + var h = c.height = window.innerHeight * devicePixelRatio + var ctx = c.getContext('2d'); + +var zzz = Math.max(w, h) * 0.05 +var zzzA = Math.max(w, h) * 0.02 +function r(n) { return n + Math.random() * zzzA } +ctx.beginPath() +ctx.moveTo(r(w/2), r(zzz)) +ctx.lineTo(r(w - zzz), r(h/2)) +ctx.lineTo(r(zzz), r(h - zzz)) +ctx.lineTo(r(w/2), r(zzz)) + +var lingrad = ctx.createLinearGradient(0,0,w,h); +lingrad.addColorStop(0, 'rgba(128,0,128,0.3)'); +lingrad.addColorStop(1, 'rgba(10,0,128,0.3)'); +ctx.fillStyle = lingrad; +ctx.fill() + +ctx.beginPath() +ctx.moveTo(r(w/2), r(zzz)) +ctx.lineTo(r(w - zzz), r(h/2)) +ctx.lineTo(r(zzz), r(h - zzz)) +ctx.lineTo(r(w/2), r(zzz)) + +var lingrad = ctx.createLinearGradient(w/2,0,w,h); +lingrad.addColorStop(0, 'rgba(0,0,255,0.2)'); +lingrad.addColorStop(1, 'rgba(255,0,0,0.2)'); +ctx.fillStyle = lingrad; +ctx.fill() + +var gifs = [ + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0142.gif', + 'animated-star-image-0005.gif', + 'animated-star-image-0147.gif', +] +function choice(a) { return a[Math.floor(Math.random()*a.length)] } +function a() { + var img = new Image() + img.src=choice(gifs) + '?' + Math.random() + img.style.top = Math.round(Math.random() * window.innerHeight) + "px" + img.style.left = Math.round(Math.random() * window.innerWidth) + "px" + img.style.opacity = (Math.random() / 2) + 0.5 + img.style.animationDelay = (10 + Math.random() * 10) + 's' + img.style.animationDuration = (10 + Math.random() * 10) + 's' + gifz.appendChild(img) +} +a();a();a() +for (var i = 0; i < 23; i++) { setTimeout(a, Math.random() * 10000) } +document.body.classList.add('done') +function u(t){ + var p = t / document.body.scrollHeight + var s = [ + 'rotateX(' + (p*1.2 ) + 'rad)', + 'rotateY(' + (p*2) + 'rad)', + 'rotateZ(' + (-p*3) + 'rad)' + ].join(' ') + console.log(s) + c.style.transform = s +} +let last_known_scroll_position = 0; +let ticking = false; + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + u(window.scrollY/ 10) + ticking = false; + }); + + ticking = true; + } +}); +u(window.scrollY) + </script> +</html> diff --git a/docs/pavone/pavone-full.jpg b/docs/pavone/pavone-full.jpg Binary files differnew file mode 100644 index 0000000..9077349 --- /dev/null +++ b/docs/pavone/pavone-full.jpg diff --git a/docs/pavone/pavone.jpg b/docs/pavone/pavone.jpg Binary files differnew file mode 100644 index 0000000..405d0b9 --- /dev/null +++ b/docs/pavone/pavone.jpg |
