adding more figaro tracks

author: Jules Laplace <julescarbon@gmail.com> 2021-02-17 15:57:50 +0100
committer: Jules Laplace <julescarbon@gmail.com> 2021-02-17 15:57:50 +0100
commit: 72059ede7172d9443a23ad068c6b5df10396eb1f (patch)
tree: 8479919cae021d8745f3a61ffe93e7e6c266e52e
parent: 1bce8946a5b050685bdd7a63da016bc152bf7c2d (diff)
2 files changed, 125 insertions, 107 deletions
diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html
index 35dc417..e814135 100644
--- a/docs/portfolio/index.html
+++ b/docs/portfolio/index.html
@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
@@ -47,8 +47,7 @@
     </div>
 
     <p>
-      Hito Steyerl’s 2020 installation <i>SocialSim</i> used one of my dungeon synth compositions, <i>Glacial Catacomb</i>, as the music inside an art gallery‘s “secret VIP room” full of self-evolving artworks.  The film’s credits music was my rendition of Ennio Morricone's <i>Rabbia e Tarantella</i> (1974), performed
-      using guitars, drums, and synths.
+      Hito Steyerl’s 2020 installation <i>SocialSim</i> used one of my dungeon synth compositions, <i>Glacial Catacomb</i>, as the music inside an art gallery‘s “secret VIP room” full of self-evolving artworks.  For the film’s credits, I arranged a rendition of Ennio Morricone's <i>Rabbia e Tarantella</i> (1974), performed using guitars, drums, and synths.
     </p>
 
     <h3>Drill</h3>
@@ -78,8 +77,11 @@
       The piece centered around gun violence in America, both its history (the Armory is where
       the NRA was founded) and the present-day situation where mass shootings happen nearly
       every week.  I scored the film using data sonifications of mass shooting data, performed
-      using the Deepmind 12 synthesizer and JX-8P.  These were later arranged and
-      performed by the Yale University Precision Marching Band in the Drill Hall at the Armory.
+      using the Deepmind 12 synthesizer and JX-8P.  These data sonifications act as timelines of
+      gun violence, where each beat represents the passing of a month, and each note represents
+      a tragic incident.  Through this process, a dark melody naturally emerges.  These were later
+      arranged and performed by the Yale University Precision Marching Band in the Drill Hall
+      at the Armory.
     </p>
 
     <h3>This is the Future / Power Plants</h3>
@@ -105,9 +107,21 @@
     <small>2017</small>
 
     <div class='links'>
+      <span class='link' href="media/01. Rooftop.mp3">
+        <div class='icon audio'></div>
+        Rooftop
+      </span>
+      <span class='link' href="media/02.  The Walk - Edgar's theme.mp3">
+        <div class='icon audio'></div>
+        The Walk / Edgar's Theme
+      </span>
+      <span class='link' href="media/06. Gilbert & Colette.mp3">
+        <div class='icon audio'></div>
+        Gilbert &amp; Colette
+      </span>
       <span class='link' href="media/10. Cold Sweat - Mescaline.mp3">
         <div class='icon audio'></div>
-        Cold Sweat - Mescaline
+        Cold Sweat / Mescaline
       </span>
 
     </div>
diff --git a/docs/portfolio/index.js b/docs/portfolio/index.js
index c556c3b..79b207c 100644
--- a/docs/portfolio/index.js
+++ b/docs/portfolio/index.js
@@ -1,23 +1,26 @@
-
-var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
-var links = document.querySelectorAll(".link")
-var audio, music = [], current_index = -1, typing = false
-var active = false
+var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
+  navigator.userAgent
+);
+var links = document.querySelectorAll(".link");
+var audio,
+  music = [],
+  current_index = -1,
+  typing = false;
+var active = false;
 // var comment = document.querySelector("#comment")
-Array.prototype.slice.apply(links).forEach(function(url){
-  const href = url.getAttribute('href')
-  if (!href) return
+Array.prototype.slice.apply(links).forEach(function (url) {
+  const href = url.getAttribute("href");
+  if (!href) return;
   if (href.match(/\.(mp3|wav|ogg)/i)) {
-    var index = music.length
+    var index = music.length;
     // if (is_mobile) href = 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 (href.match(/(gif|jpe?g|png|bmp)/i)) {
+    music.push(url);
+    url.addEventListener("click", function (e) {
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
+      e.preventDefault();
+      play(index);
+    });
+  } else if (href.match(/(gif|jpe?g|png|bmp)/i)) {
     // url.innerHTML = "<img src='" + href + "'>"
     // url.addEventListener("click", function(e){
     //   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
@@ -25,137 +28,138 @@ Array.prototype.slice.apply(links).forEach(function(url){
     //   url.classList.toggle("zoomed")
     // })
   }
-})
-const el = document.querySelector('.player')
-const title_el = el.querySelector('.title')
-const icon_el = el.querySelector('.icon')
-const pos_el = el.querySelector('.pos')
-const track_el = el.querySelector('.track')
-const dot_el = el.querySelector('.dot')
-const time_el = el.querySelector('.time')
-const track_width = track_el.offsetWidth
-const track_left = pos_el.offsetLeft
+});
+const el = document.querySelector(".player");
+const title_el = el.querySelector(".title");
+const icon_el = el.querySelector(".icon");
+const pos_el = el.querySelector(".pos");
+const track_el = el.querySelector(".track");
+const dot_el = el.querySelector(".dot");
+const time_el = el.querySelector(".time");
+const track_width = track_el.offsetWidth;
+const track_left = pos_el.offsetLeft;
 if (music.length) {
-  audio = document.createElement("audio")
-  window.a = audio
-  audio.setAttribute("controls", true)
-  audio.addEventListener("ended", next)
-  audio.addEventListener("timeupdate", timeupdate)
+  audio = document.createElement("audio");
+  window.a = audio;
+  audio.setAttribute("controls", true);
+  audio.addEventListener("ended", next);
+  audio.addEventListener("timeupdate", timeupdate);
   // audio.src = music[0].href
   // var player = document.querySelector("table")
   // player.parentNode.insertBefore(audio, player)
-  document.body.addEventListener("keydown", keydown)
+  document.body.addEventListener("keydown", keydown);
   // comment.addEventListener("focus", focusTextBox)
   // comment.addEventListener("blur", blurTextBox)
 }
-icon_el.addEventListener('click', toggle)
+icon_el.addEventListener("click", toggle);
 
 if (is_mobile) {
-  pos_el.addEventListener('touchstart', e => mousedown(e.touches[0]))
-  pos_el.addEventListener('touchmove', e => mousemove(e.touches[0]))
-  window.addEventListener('touchup', mouseup)
+  pos_el.addEventListener("touchstart", (e) => mousedown(e.touches[0]));
+  pos_el.addEventListener("touchmove", (e) => mousemove(e.touches[0]));
+  window.addEventListener("touchup", mouseup);
 } else {
-  pos_el.addEventListener('mousedown', mousedown)
-  pos_el.addEventListener('mousemove', mousemove)
-  window.addEventListener('mouseup', mouseup)
+  pos_el.addEventListener("mousedown", mousedown);
+  pos_el.addEventListener("mousemove", mousemove);
+  window.addEventListener("mouseup", mouseup);
 }
-var down = false
-var mousex = 0
+var down = false;
+var mousex = 0;
 function mousedown(e) {
-  e.preventDefault && e.preventDefault()
-  down = true
-  mousex = (e.pageX - track_left) / track_width
+  e.preventDefault && e.preventDefault();
+  down = true;
+  mousex = (e.pageX - track_left) / track_width;
 }
 function mousemove(e) {
-  if (!down) return
-  mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1)
-  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+  if (!down) return;
+  mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1);
+  dot_el.style.transform = "translateX(" + mousex * track_width + "px)";
 }
 function mouseup(e) {
-  if (!down) return
-  down = false
-  var t = mousex * audio.duration
-  audio.currentTime = Math.round(t)
-  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+  if (!down) return;
+  down = false;
+  var t = mousex * audio.duration;
+  audio.currentTime = Math.round(t);
+  dot_el.style.transform = "translateX(" + mousex * track_width + "px)";
 }
 
-function play(index){
+function play(index) {
   if (!active) {
-    active = true
-    el.classList.add('active')
+    active = true;
+    el.classList.add("active");
   }
   // if (index === music.length) return stop();
-  if (!icon_el.classList.contains('active')) {
-    icon_el.classList.add('active')
+  if (!icon_el.classList.contains("active")) {
+    icon_el.classList.add("active");
   }
-  current_index = (index + music.length) % music.length
-  const a_el = music[current_index]
-  audio.src = a_el.getAttribute('href')
-  audio.play()
+  current_index = (index + music.length) % music.length;
+  const a_el = music[current_index];
+  audio.src = a_el.getAttribute("href");
+  audio.play();
 
-  const header = prevUntil(a_el.parentNode, 'h3')
-  const title = (index + 1) + '. ' + header.innerText + ': ' + a_el.innerText
-  title_el.innerHTML = title
-  var playing = document.querySelector(".playing")
-  if (playing) playing.classList.remove("playing")
-  music[current_index].classList.add("playing")
+  const header = prevUntil(a_el.parentNode, "h3");
+  const title =
+    index + 1 + ". <i>" + header.innerText + "</i>: " + a_el.innerText;
+  title_el.innerHTML = title;
+  var playing = document.querySelector(".playing");
+  if (playing) playing.classList.remove("playing");
+  music[current_index].classList.add("playing");
 }
-function prev(){
-  play(current_index - 1)
+function prev() {
+  play(current_index - 1);
 }
-function next(){
-  play(current_index + 1)
+function next() {
+  play(current_index + 1);
 }
 function pause() {
-  icon_el.classList.remove('active')
+  icon_el.classList.remove("active");
 }
 function stop() {
-  el.classList.remove('active')
-  var playing = document.querySelector(".playing")
-  if (playing) playing.classList.remove("playing")
-  active = false
+  el.classList.remove("active");
+  var playing = document.querySelector(".playing");
+  if (playing) playing.classList.remove("playing");
+  active = false;
 }
-function toggle(){
+function toggle() {
   if (audio.paused) {
-    icon_el.classList.add('active')
-    audio.play()
+    icon_el.classList.add("active");
+    audio.play();
   } else {
-    pause()
-    audio.pause()
+    pause();
+    audio.pause();
   }
 }
 function timeupdate() {
-  if (down) return
-  let { currentTime, duration } = audio
-  let t = currentTime / duration
-  dot_el.style.transform = 'translateX(' + (track_width * t) + 'px)'
-  time_el.innerHTML = time(currentTime) + ' / ' + time(duration)
+  if (down) return;
+  let { currentTime, duration } = audio;
+  let t = currentTime / duration;
+  dot_el.style.transform = "translateX(" + track_width * t + "px)";
+  time_el.innerHTML = time(currentTime) + " / " + time(duration);
 }
 function time(n) {
-  if (!n) return '0:00'
-  n = Math.floor(n)
-  let s = n % 60
-  if (s < 10) s = '0' + s
-  let m = Math.floor(n / 60)
-  return m + ':' + s
+  if (!n) return "0:00";
+  n = Math.floor(n);
+  let s = n % 60;
+  if (s < 10) s = "0" + s;
+  let m = Math.floor(n / 60);
+  return m + ":" + s;
 }
-function keydown(e){
-  if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+function keydown(e) {
+  if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
   switch (e.keyCode) {
     case 37: // left
-      prev()
+      prev();
       break;
     case 39: // right
-      next()
+      next();
       break;
     case 32: // spacebar
-      e.preventDefault()
-      toggle()
+      e.preventDefault();
+      toggle();
       break;
   }
 }
 
-function prevUntil (elem, selector) {
+function prevUntil(elem, selector) {
   elem = elem.previousElementSibling;
   while (elem) {
     if (elem.matches(selector)) break;
@@ -166,4 +170,4 @@ function prevUntil (elem, selector) {
 // function focusTextBox (){ typing = true }
 // function blurTextBox (){ typing = false }
 
-document.querySelector('.loading').classList.remove('loading')
+document.querySelector(".loading").classList.remove("loading");
author	Jules Laplace <julescarbon@gmail.com>	2021-02-17 15:57:50 +0100
committer	Jules Laplace <julescarbon@gmail.com>	2021-02-17 15:57:50 +0100
commit	72059ede7172d9443a23ad068c6b5df10396eb1f (patch)
tree	8479919cae021d8745f3a61ffe93e7e6c266e52e
parent	1bce8946a5b050685bdd7a63da016bc152bf7c2d (diff)