pavone cristallo site

9 files changed, 262 insertions, 1 deletions

diff --git a/.gitignore b/.gitignore
index 8ebf09c..729cd31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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
new 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
new 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
new 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 &amp; pads<br><i>Jules</i> pads &amp; 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
new 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
new file mode 100644
index 0000000..405d0b9
--- /dev/null
+++ b/docs/pavone/pavone.jpg