new standalone git repository for this Special Issue

4 years ago · a723c0401a
commit a723c0401a
30 changed files with 442 additions and 0 deletions
--- a/img/background.jpg
+++ b/img/background.jpg
--- a/img/background2.jpg
+++ b/img/background2.jpg
--- a/img/claudia_floppy.png
+++ b/img/claudia_floppy.png
--- a/img/claudia_screen.png
+++ b/img/claudia_screen.png
--- a/img/deplayersm.png
+++ b/img/deplayersm.png
--- a/img/floppy-final2.png
+++ b/img/floppy-final2.png
--- a/img/franc_floppy.png
+++ b/img/franc_floppy.png
--- a/img/franc_live.png
+++ b/img/franc_live.png
--- a/img/franc_screen.png
+++ b/img/franc_screen.png
--- a/img/giulia_floppy.png
+++ b/img/giulia_floppy.png
--- a/img/giulia_live.jpg
+++ b/img/giulia_live.jpg
--- a/img/karina_floppy.png
+++ b/img/karina_floppy.png
--- a/img/karina_live.jpg
+++ b/img/karina_live.jpg
--- a/img/kimmy_floppy.png
+++ b/img/kimmy_floppy.png
--- a/img/kimmy_live.jpg
+++ b/img/kimmy_live.jpg
--- a/img/kimmy_screen.png
+++ b/img/kimmy_screen.png
--- a/img/margreet_floppy.png
+++ b/img/margreet_floppy.png
--- a/img/margreet_live.png
+++ b/img/margreet_live.png
--- a/img/margreet_screen.png
+++ b/img/margreet_screen.png
--- a/img/max_floppy.png
+++ b/img/max_floppy.png
--- a/img/max_live.png
+++ b/img/max_live.png
--- a/img/max_screen.png
+++ b/img/max_screen.png
--- a/img/nadine_floppy.png
+++ b/img/nadine_floppy.png
--- a/img/nadine_live.png
+++ b/img/nadine_live.png
--- a/img/nadine_screen.png
+++ b/img/nadine_screen.png
--- a/img/pzilogosm.png
+++ b/img/pzilogosm.png
--- a/img/pzilogosmaller.png
+++ b/img/pzilogosmaller.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,256 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Gidugu" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <title>Pushing the Score</title>
            <!-- this section below is a bodge and needs to migrate to the style.css-->
            <style>
            </style>
            <!-- this section above is a bodge and needs to migrate to the style.css-->
        </head>
 <body>
 <div id="wrapper">
 <header>
 	<div class="title">
 		<span>
 			TGC # 3 / MAT>NET>PU
 		</span>
 	</div>
    <div class="with">
    	WITH JOHANNES BERGMARK, HIELE MARTENS, HELGA JAKOBSON & PZI XPUB STUDENTS
    </div>
    <div class="info">
        <span>
        Fri 24 Mar 2017 <br>
        <a href="http://deplayer.nl/events/tgc-3-matnetpu-johannes-bergmark-hiele-martens-helga-jakobson-pzi-xpub-students">@DE PLAYER</a>
        <br> 20:00hrs   
        <br>Admission:&nbsp;€7,-
        </span>
    </div>
    <div class="location">
    	<span>
    		Hillelaan 49 D, 3072 JE, <br>Rotterdam, The Netherlands
    	</span>
    </div>
 </header>
 <table class="content">
  <tr>
    <th> <p class="artist">TGC #3 </p></th>
    <th> <p class="artist">XPUB (x)</p></th> 
  </tr>
  <tr>
      <td>  
        <br>
        <br>
        <img src="img/deplayersm.png" alt="">
        <br>
        <br>
        <p>
        	TGC #3 is the third issue of the TETRA GAMMA CIRCULAIRE series (an unknown audio magazine), initiated in 2015 by the polymorphic production platform DE PLAYER in Rotterdam. But it is also the second Special Issue of the Experimental Publishing (XPUB) programme of the Media Design Master of the Piet Zwart Institute (are you still following?). The TGC series is famous as a magazine because it has no limits nor exact face and appears in unexpected solutions and situations. TGC #3 fits right in. Concretely, very concretely, TGC #3 is in itself a particular kind of publishing platform (some may dare say a jukebox) experimentally engineered for sonic experiments, instruments, and installations. The first edition is limited to 12 copies, and to inaugurate its launch it is distributed with works created and compiled by the XPUB students.This evening, the new issue will be demonstrated in its dynamic applications and for the festivity we flew in some other nerdy sound makers and breakers.
        </p>
    </td>
    <td>
        <img src="img/pzilogosmaller.png">
        <br>
        <br>
        <p>
        	Experimental Publishing is a new course of the Piet Zwart Institute's Media Design Master programme. The concept of the course revolves around two core principles: first, the inquiry into the technological, political and cultural processes through which things are made public; and second, the desire to expand the notion of publishing beyond print media and its direct digital translation. The Experimental Publishing students who contributed to the development of TGC #3 are:  
        	<span class="students">
        		Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Franc González, Margreet Riphagen, Nadine Rotem-Stibbe and Kimmy Spreeuwenberg.
        	</span>
        </p>
    </td>
  </tr>
 </table>
 				<div><video width="100%" controls>
 					<source src="https://media.xpub.nl/special_issue_02-web.mp4" type="video/mp4">
 					Your browser does not support the video tag :(
 					Try a recent version of Firefox or Chromium!
 				</video></div>
 <!--<p class="artist">TGC #3 Contributors</p>-->
 <!--<h2>TGC #3 Contributors</h2>-->
 <div class="studentswork">
 	<button class="accordion">Karina Dukalska : Rock Step - Triple Step - Triple Step</button>
 	<div class="panel">
        <div class="panelimg"><img src="img/karina_floppy.png"></div>
       	<div class="panelimg"><img src="img/karina_live.jpg"></div>
                <!--<div class="panelimg"><img src="img/karina_screen.png"></div>-->
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>Rock Step - Triple Step - Triple Step</p>
              </div>
              <button class="accordion">Max Franklin : Euclid</button>
              <div class="panel">
                <div class="panelimg"><img src="img/max_floppy.png"></div>
                <div class="panelimg"><img src="img/max_live.png"></div>
                <div class="panelimg"><img src="img/max_screen.png"></div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>A chaotic software and hardware synthesiser and generative sequencer. Designed to explore improvisation, and musical interactivity.
              To play, touch the metal contacts, connecting them. The more conductive you are, the more you will be able to affect the instrument.
              The state of your composition is recorded, and displayed here as a downloadable score. Never to be played, nor heard again.</p>
              </div>
              <button class="accordion">Giulia de Giovanelli : Adopt A Walk</button>
              <div class="panel">
                <div class="panelimg"><img src="img/giulia_floppy.png"></div>
                <div class="panelimg"><img src="img/giulia_live.jpg"></div>
                <!--<div class="panelimg"><img src="img/giulia_screen.png"></div>-->
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>This is an audio-guide of an experiment of gait analysis,
              If you never heard about this term, gait analysis is the study of walking patterns as used by new surveillance biometric technologies.
              People are asked to walk following a series of spoken instructions. The walks are stored temporarily on a page where you’re invited to “adopt a walk” of another person.
              “Have you ever tried to identify someone by the way they walk?
              Surveillance technologies are using homogenic perception of human beings as a model for their mechanics.”
              With this experiment you’re suggested to observe characteristics of other walks and adopt them. 
              In adopting a different walk do you become someone else?
              Will it be you or someone else’s identity that is detected by these surveillance algorithms?
              </p>
              </div>
              <button class="accordion">Clàudia Giralt Monedero : The Fine Line</button>
              <div class="panel">
                <div class="panelimg"><img src="img/claudia_floppy.png"></div>
                <!--<div class="panelimg"><img src="img/claudia_live.jpg"></div>-->
                <div class="panelimg"><img src="img/claudia_screen.png"></div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>
              “The fine line between everything matters and nothing matters”
              The idea of this project is to represent this line digitally and sonorously, and let the audience play with it. seeking balance and breaking it. Harmonious sounds and the disruption of those. Experiencing how close from each other opposites can be.</p>
              </div>
              <button class="accordion">Francisco González : Motions</button>
              <div class="panel">
                <div class="panelimg"><img src="img/franc_floppy.png"></div>
                <div class="panelimg"><img src="img/franc_live.png"></div>
                <div class="panelimg"><img src="img/franc_screen.png"></div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>This experiment analyses and measures data from people’s motion and explores how we humans become an extension of technology, adapting ourselves to immaterial environments by seeking information-control, performing sounds.
              CONCEPT
              Technology is providing us new ways to shape our perception of space, while at the same time it is transforming our bodies into gadgets. This is not only changing our spatial awareness but it’s also extending our senses beyond given nature. Moreover, control systems that regulate and command specific behaviours can be very practical tools to improve physical functionalities or translate its data. For instance, this experiment employs “Optical Flow” sensor which detects motion from image objects between frames, and “Open Sound Control (OSC)” which enables to exchange and format data from different devices, for instance, from Python to Puredata. Although the unique possibilities to improving human physical or cognitive limitations by plugging a body to an electronic or mechanical device are yet very hypothetical and might extend beyond our imagination, nevertheless technology is continuously transforming the abstract or fictional conception of  “cybernetics” to a more realistic evidence. The communication between both automated and living systems is continuously evolving, upgrading and rising up more sophisticated engineered tools that might enable us to increase our knowledge, morphing our perception through deeper experiences.
                  In this experiment, the potential for controlling data through motion on space while becoming independent of physicality, opens up new creative and pragmatic alternatives for facing both technological and communication constraints.
              BODY
              This body analyses human motion on space and detects it using “Opitcal Flow” in “Python”, using a series of predesigned multidirectional interpreters. These interpreters are made up of a series of points (intersections), forming a grid which intersects with movement. This is detected in form of numeric values, which are automatically transmitted and formatted to a graphic array in Puredata.
                  This array arrange these values and generates a polygonal waveform based on these received coordinates (which numbers ranges between "x", having values from 0 to 10, and "y" from -1 to 1). This activates an “oscillator” object which defines the frequency of the tone, together with “metro” object, which time spans its duration in miliseconds, consequently iterating the audio (re-writting it in the display).
                  The intersections and the graphic array (together with the entire Puredata patch) become an interactive notation system, while people become the instrument/tool that triggers it.
              WORK PROGRESS
              By exploring the connection between motion and sound, experiments have been performed through different software and tools, which has substantially strengthen the following additional material in this project. For instance, Kinect sensor and Synapse, which receives input data from Kinect and sends it out to Ableton or Max MSP, have been tested out. Similarly, motion detection was together explored with “color detection” in Puredata, which brought up more interesting alternatives. Sound recording and feedback loop was further tested with this method, though mechanically it was hardly accurate. Finally with “Optical Flow”, this work was reconfigured with a wider sense for interacting with data.</p>
              </div>
              <button class="accordion">Margreet Riphagen : A Sonification of the Dutch Elections March 2017</button>
              <div class="panel">
                <div class="panelimg"><img src="img/margreet_floppy.png"></div>
                <div class="panelimg"><img src="img/margreet_live.png"></div>
                <div class="panelimg"><img src="img/margreet_screen.png"></div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>A sonification of the Dutch elections March 2017; based on the hashtags #gestemd and #ikstem
              In the run up to the 2017 general elections in the Netherlands last Wednesday, the 15 of March 2017, a lot of Twitter traffic was generated. Literally millions of tweets were send that day over the Internet.
              This sonification entails three kinds of scores; 
              a) for the whole tweet, 
              b) for the hashtag ikstem (#ikstem), and 
              c) for the hashtag gestemd (#gestemd).</p>
              </div>
              <button class="accordion">Nadine Rotem-Stibbe : Drone Oddity #1 #2 #3</button>
              <div class="panel">
                <div class="panelimg"><img src="img/nadine_floppy.png"></div>
                <div class="panelimg"><img src="img/nadine_live.png"></div>
                <div class="panelimg"><img src="img/nadine_screen.png"></div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
                <p>
                	What you are hearing is a score made from the 'Watchlisting Guidance' table of contents using Pure Data. 
              This document was written by the National Counterterrorism Center (NCC). 
              You can access it here: 
              <a href="https://theintercept.com/document/2014/07/23/march-2013-watchlisting-guidance/">
              	https://theintercept.com/document/2014/07/23/march-2013-watchlisting-guidance/
              </a>
              </p>
              </div>
              <button class="accordion">Kimmy Spreeuwenberg : Rest</button>
              <div class="panel">
                <div class="panelimg">
                	<img src="img/kimmy_floppy.png">
                </div>
                <div class="panelimg">
                	<img src="img/kimmy_live.jpg">
                </div>
                <div class="panelimg">
               	 	<img src="img/kimmy_screen.png">
                </div>
                <br>
                <div style="clear: both;"></div> <!--clear the float -->
 	                <p>
 	                	Make a silence.
 	              “There is no such thing as an empty space or an empty time.
 	              There is always something to see, something to hear. In fact,
 	              try as we may to make a silence, we cannot.”
 	              (John Cage, Silence: Lectures and Writings) 
              		</p>
 			</div>
 </div>
 </div> <!--end of the wrapper-->
 <script>
            var acc = document.getElementsByClassName("accordion");
            var i;
            for (i = 0; i < acc.length; i++) {
            	acc[i].onclick = function(){
            		this.classList.toggle("active");
            		var panel = this.nextElementSibling;
            		if (panel.style.display === "block") {
            			panel.style.display = "none";
            		} else {
            			panel.style.display = "block";
            		}
            	}
            	}
            </script>
 </body>
 </html>
--- a/media/tgc3.jpg
+++ b/media/tgc3.jpg
--- a/style.css
+++ b/style.css
@ -0,0 +1,186 @@
 	body{ color: #4d0663;
 		font-weight: 700;
 		font-family: 'Droid Serif', serif;
 		background-image: url("img/background2.jpg");
 		background-repeat: none;
 	}	
 	header{
 		/*max-width:1000px;*/
 		}
 	td {padding: 10px;}
 	div#wrapper {
 		width:800px;
 		margin:auto;
 	}
 	.title span{background-color: rgba(230,0,0,.8);
 		padding-left: 30px;
 		padding-right: 30px;}
 	.title{
 		padding-top: 20px;
 		font-family: 'Gidugu', sans-serif;
 		color: #4d0663;
 		line-height: .9em;
 		font-size: 100px;
 		letter-spacing: 2px;
 	   }
 	.with {background-color: rgba(230,0,0,.5);
 		padding-left: 10px;
 		padding-right: 10px;
 		letter-spacing: 2px;
 		margin-left: -50px;
 		margin-top: 20px;
 		font-family: 'Gidugu', sans-serif;
 		font-size: 60px;
 		line-height: .9em;
 		color: #4d0663;
 		max-width: 825px;
 		}
 	.info span {
 		 text-transform: uppercase;
 		 letter-spacing: 1px;
 		padding-left: 10px;
 		background-color: rgba(230,0,0,.7);}
 	.info {
 		margin-left: 200px;
 		font-size:40px;
 		color: white;} 
 	.location span {
 		 letter-spacing: 1px;
 		padding-left: 10px;
 		background-color: rgba(230,0,0,.7);}
 	.location {
 		margin-left: 300px;
 		font-size: 20px;
 		color: white;} 
 	.description{
 		margin-left: 20px;
 		max-width: 400px;
 	 	display: inline-block; }
 	h2 {color: #011787;
 		font-family: 'Gidugu', sans-serif;
 		font-size: 40px;
 		line-height: .9em;
 	}
 	.artist{
 		font-family: 'Gidugu', sans-serif;
 		color: #4d0663;
 		float: left;
 		margin-bottom: -30px;
 		font-size:50px;
 		letter-spacing: 2px;
 	}
 	.who{font-weight: bold;}
 	.content{
 		background-color:rgba(255,255,255,.8);
 		max-width: 800px;
 		padding:10px;
 		margin: auto;
 	} 
 	.background{z-index: -1;}
 	/*//////the secton I'm messing with is below ! don't confuse yourself///////*/
 .students{}	
 	/*.deplayerlogo{
 		float: left;
 	]*/
 	.panelimg {
 		float: left;
 		margin:  auto;
 	}
 	.studentswork {
 		margin: auto;
 		float: left;
 	}
 	/*.studentname{
 		color: #000;
 		font-family: 'Gidugu', sans-serif;
 		font-size: 30px;
 		text-align: center;
 		line-height: 0.8;
 		text-decoration: none;
 		border: solid 2px #000;
 		padding: 15px;
 		margin: 15px;
 		width: 120px;
 		background: rgba(200, 54, 54, 0.4);
 		float: left; 
 	}*/
 	.collapse {
 		float: left;
 	}
 	/*.pzilogo{
 		width: 20px;
 		}*/
 button.accordion {
                background-color: rgba(240, 164, 0, 0.55);
                color: #000;
                cursor: pointer;
                padding: 10px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
                font-family: 'Gidugu', sans-serif;
                font-size: 30px;
            }
 button.accordion::after { 
    /*content: " ▽";*/
    content: "﹀﹀﹀";
    /*content: "V";*/
    padding: 18px;
    background-color: rgba(240, 240, 5, 0.45);
 }
 button.accordion.active, button.accordion:hover {
 	background-color: rgba(240, 5, 0, 0.65); 
 }
 div.panel {
                padding: 10px 18px;
                display: none;
                background-color: rgba(240, 240, 240, 0.65);
                max-width: 764px;
               }
            .studentswork {
            }
 /* need to make .a so that links stop being blue*/
 /* need to incorporate the video pieces from Michael&Aymeric*/
 /*////////mobile///////*/
@media screen and (max-width:767px) {
 	.title {line-height: 74px;
 		font-size: 60px;}
 	.with{font-size: 40px;
 		margin-left: 0px;}
 	.info{font-size: 30px;
 		margin-left: 0px;}
 	.location{
 		margin-left: 0px;}
 		.artist{
 			margin-top: -20px;
 		}
 	div#wrapper{
 		width:500px;
 	}
 }/*/end of 767*/