Page index

====== Le murmure des arbres ====== ===== projet ===== Depuis plusieurs années, les artistes sonores et compositeurs de l’association Apo33 cherchent à percer le langage des arbres. Ils ont enregistré des arbres sur plusieurs continents et ont constitué une librairie avec laquelle ils mêlent des sons gutturaux qu’ils réalisent avec leur voix. Sur une base de borborygmes et de sons de gorge inspirés du son des arbres enregistrés, ces voix de bois créent un espace de discussion, poésie sonore détournée de l’écoute intime des arbres. Le noyau, la structure interne de ces arbres anciens amplifiés devient sonorités craquantes à travers leur fragile bout des doigts sur lesquels nous attachons des micro-contacts. Quand on écoute ces arbres, nous avons l'impression d’accéder à des centaines de secrets et d’histoires cachés au sein même des feuilles bruissantes et des profonds grognements provenant de leur tronc. Les arbres nous parlent, il nous faut juste les écouter. Dans le cadre de cette nouvelle composition nous souhaitons continuer une des recherches que nous menons sur ces relations entre écoute, nature, environnement et compositions musicales. Il s'agit plus précisément de nos recherches sur le langage des arbres et le mystère qui entoure un des organismes vivants le plus important de notre planète. Pour cela nous avons mis en place une installation sonore permanente en ligne qui permet de mixer et de transformer en temps-réel les sons enregistrés via une interface web et une application pour smartphone. Nous invitons le public à venir participer à une composition musicale participative où chacun peut créer sa propre musique et sa propre écoute tout en partageant avec le public à travers le monde. __les différentes étapes du projet :__ ===== installer un VNC sur ubuntu 20.04 ===== ===== installation de TigerVNC pour le contrôle à distance ===== source https://bytexd.com/how-to-install-configure-vnc-server-on-ubuntu/ ouvrir un terminal et entrer les commandes suivantes : sudo apt update sudo apt install xfce4 xfce4-goodies - Sélectionnez n'importe quel gestionnaire d'affichage et appuyez sur Entrée sudo apt install tigervnc-standalone-server vncserver - vous serez invité à taper 2 fois le mot de passe nécessaire qui servira pour la connection à TigerVNC - pour la ligne Would you like to enter a view-only password (y/n)? - entrer N, c'est un mot de passe en lecture seul - cette commande ''vncpasswd'' servira à changer le mot de passe si nécessaire vncserver -kill :1 nano ~/.vnc/xstartup - contenu du fichier


 #!/bin/sh

# Start up the standard system desktop
unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS

/usr/bin/startxfce4

[ -x /etc/vnc/xstartup ] && exec /etc/vnc/xstartup
[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources
x-window-manager &

chmod +x ~/.vnc/xstartup vncserver -localhost no :1 - à ce stade on peut ce connecter à l'aide d'un vncviewer avec l'ip de la machine ou l'ip du routeur avec redirection de port configurer - le port utilisé par TigerVNC est le ''5901'' **par défaut** =====Pour le démarrage automatique de TigerVNC===== Dans un terminal entrer les commandes suivantes: vncserver -kill :1 cd /etc/systemd/system sudo nano tigervnc@:1.service - contenu du fichier, dans le fichier crée définir l'**__user__** et le **__WorkingDirectory__** en fonction de votre machine


[Unit]
Description=Remote desktop service (VNC)
After=syslog.target network.target

[Service]
Type=forking
User=l'utilisateur
WorkingDirectory=/home/utilisateur
ExecStartPre=-/usr/bin/vncserver -kill :1
ExecStart=/usr/bin/vncserver -localhost no :1
ExecStop=/usr/bin/vncserver -kill :1

[Install]
WantedBy=multi-user.target

sudo systemctl enable tigervnc@\:1.service sudo systemctl daemon-reload cette ligne corrige le problème ''unable to contact settings server'': sudo apt install dbus-x11 sudo systemctl start tigervnc@:1 ====== Serveur web et Apache2 sur ubuntu 20.04 ====== ===== installation de apache2 ===== source https://doc.ubuntu-fr.org/lamp ouvrez un terminal et entrer les commandes suivantes :


sudo apt install apache2 mariadb-server php-mysql libapache2-mod-php php-gd php-json php-curl php-mbstring php-intl php-imagick php-xml php-zip

cd /etc/apache2/sites-available sudo nano 000-default.conf remplacé '''' par cd /etc/apache/ sudo nano ports.conf - remplacé la ligne ''Listen 80'' par le port d'écouter souhaité ici 8080 Listen 8080 systemctl restart apache2 ==== pour vérifier que apache2 écouter bien le port souhaiter==== netstat -tlpn| grep apache ss -tlpn| grep apache ====== Webapp, OSC et websockets ====== ===== installation de nodejs sous ubuntu ===== sudo apt-get update sudo apt-get install nodejs npm ===== installation de osc-js ===== lien https://github.com/adzialocha/osc-js/ faire cette commande dans le même dossier que la où voulez crée le bridge.js/page web pour simplifié cela npm i osc-js ===== création du bridge.js ===== lien de la doc sur lequel le code est basé https://github.com/adzialocha/osc-js/wiki/PureData-&-MaxMSP nano bridge.js contenu du fichier, à noté qu'il faut remplacer certaine valeur en fonction de la configuration souhaité


const ws_host = "ip_interface_serveur"; //ip  server
const ws_port = port_ecouter_par_le_serveur; //port define for server websocket

const udp_host = "localhost"; //server host puredata
const udp_port = port_ecouter_par_puredata; //server host puredata

const OSC = require('osc-js') //Import the library osc-js

const config = { udpClient: {host :udp_host, port: udp_port}, //bridge setup
                 wsServer: {host: ws_host, port: ws_port,}, //bridge setup
}
const osc = new OSC(
    { plugin: new OSC.BridgePlugin(config)}, //bridge setup, websocket server is included in the BridgePlugin
    );
osc.open() //bridge start

===== Pour le démarrage automatique du node ===== ouvrir un terminal et entrer : sudo apt install npm sudo npm install -g pm2 - changer le chemin en fonction de où ce trouve le ficher bridge.js pm2 start le_chemin_du_fichier pm2 save pm2 list pm2 startup - puis faire la entrer la commande retourné - une fois tout setup voici les commandes utile en cas de crash : pm2 list pm2 restart bridge.js ===== création de la page web ===== refaire la commande ''npm i osc-js'' si le dossier de la page web n'est pas le même que celui du bridge.js cd le_chemin_ou_cree_les_pages_web sudo nano index.css - le contenu du fichier


.slider-wrapper input {
    width: 20em;
    height: 3em;
    margin: 0;
    transform-origin: 10em 10em ;
    transform: rotate(-90deg);
  }
.slider-wrapper {
    display: inline-block;
    width: 2em;
    height: 18em;
    padding: 0;
}
.increase {
    width:3em;
    height:3em;
}
.bang{
    width: 3em ;
    height: 3em;
    border-radius: 50%;
    background-color: #DFDFDF;
}
bouton{
	color:#DFDFDF;
}
body{
	background-color:#313638;
}
p{
	color:#DFDFDF;
}
h1{
	color:#ffffff;
	font-size:250%;
}

h2{
	color:#dddddd;
	font-size:200%;
}

h3{
	color:#bbbbbb;
	font-size:150%;
}
li{
	color:#DFDFDF;
}
a{
	text-decoration: none;
	color:#ffffff;
}

sudo nano index.html - le contenu du fichier




	

		

		

		Page index

	

	

	

		

			

				


				 Page test 1

				 Page 12 sliders

sudo nano 12_slider.css - le contenu du fichier


.slider {
  -webkit-appearance: none;
   background: #CCC;
   background-image:linear-gradient(
      to right, 
      #22841a 30%, #81c124 45%, #c2f288 99%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
     
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #81c124;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 35px;
  background: #000;
  cursor: pointer;
}


.slider-wrapper {
    display: inline-block;
    width: 2em;
    height: 18em;
    padding: 0;
}


.slider-wrapper input {
    width: 20em;
    height: 0.5em;
    margin: 1.5em;
    transform-origin: 10em 10em ;
    transform: rotate(-90deg);
  }


/* Hide the default checkbox */
.increase {
  display: none;
}

/* Create a circular shape for the checkbox */
.custom-checkbox {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #ccc;
  overflow: hidden;
}

/* Add a checkmark icon inside the checkbox when it's checked */
.custom-checkbox:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show the checkmark icon when the checkbox is checked */
.increase:checked + .custom-checkbox:before {
  opacity: 1;
}

/* Style the label element */
.custom-checkbox-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
}

/* Align the checkbox and label vertically */
.custom-checkbox-label span {
  display: inline-block;
  vertical-align: middle;
}

.bang{
    width: 3em ;
    height: 3em;
    border-radius: 50%;
    background-color: #DFDFDF;
    
}
.logo_apo33{
	width: 10em ;
    height: auto;
}

.more_info{
	color:#bbbbbb;
	font-size:120%;
}
body{
	background-color:#313638;
}
p{
	color:#DFDFDF;
}
h1{
	color:#ffffff;
	font-size:250%;
}

h2{
	color:#dddddd;
	font-size:200%;
}

h3{
	color:#bbbbbb;
	font-size:150%;

li{
	color:#DFDFDF;
}
a{
	text-decoration: none;
	color:#ffffff;
}

sudo nano 12_slider.html - le contenu du fichier



	
		
		
		
		page 12 slider
	
  
  
	
	
		
			Le murmure des arbres
		
		
			
		
	
   
   
    
	 
	  Mixing
	 
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
      
        
          
        
      
	  
        
          
        
      
    
    
		
		  pitch
		 
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
		
			
			
			
		
    
	
    
	
	  sound
	 
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
	  
    
	
	

	
		 
	
	
	

	
	Developed by Julien Ottavi, programmation by Max Siliphayvanh, visual by Jenny Pickett - artistic concept by OttaviPickett and Apo33
	
	More Info here

sudo nano 12_slider.js - le contenu du fichier, des valeurs son à changer en fonction du serveur


const ws_host = "ip_publique_serveur";//public ip of the websocket server
const ws_port = port_ecouter_par_le_serveur;//port websocket server

//const ws_port = 8080; 
 var osc = new OSC(
  {plugin: new OSC.WebsocketClientPlugin({host: ws_host, port: ws_port,secure: false})} //client websocket configuration
  );
 osc.open(); // connect to websocket server

 /**
 document.getElementById('send').addEventListener('click', () => {
   var str_road ="";  //retrieving the value of the route/road input field
  var msg = document.getElementById("msg").value; //retrieving the value of the Message input field
  var message = new OSC.Message(str_road,msg);
  osc.send(message);
 });
 **/
 document.getElementById('slider_vertical_1').addEventListener('input', () => {
  var str_road =""; 
  str_road = str_road +'/slider'; //add /slider to route
  str_road = str_road.trim()+'/1'; //add silder number to route
  var send_slider_v = Number(document.getElementById("slider_vertical_1").value); //retrieving the value of the slider of the web page
  var message = new OSC.Message(str_road,send_slider_v); //message creation before sending
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_2').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/2';
  var send_slider_v = Number(document.getElementById("slider_vertical_2").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_3').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/3';
  var send_slider_v = Number(document.getElementById("slider_vertical_3").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_4').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/4';
  var send_slider_v = Number(document.getElementById("slider_vertical_4").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_5').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/5';
  var send_slider_v = Number(document.getElementById("slider_vertical_5").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_6').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/6';
  var send_slider_v = Number(document.getElementById("slider_vertical_6").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_7').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/7';
  var send_slider_v = Number(document.getElementById("slider_vertical_7").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_8').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/8';
  var send_slider_v = Number(document.getElementById("slider_vertical_8").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_9').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/9';
  var send_slider_v = Number(document.getElementById("slider_vertical_9").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_10').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/10';
  var send_slider_v = Number(document.getElementById("slider_vertical_10").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_11').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/11';
  var send_slider_v = Number(document.getElementById("slider_vertical_11").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('slider_vertical_12').addEventListener('input', () => {
   var str_road =""; 
  str_road = str_road +'/slider';
  str_road = str_road.trim()+'/12';
  var send_slider_v = Number(document.getElementById("slider_vertical_12").value);
  var message = new OSC.Message(str_road,send_slider_v);
  osc.send(message);
 }); 
 document.getElementById('toggle_1').addEventListener('click', () => {
   var str_road ="";  ///retrieving the value of the route/road input field
  str_road = str_road +'/toggle'; //add /toggle to route
  str_road = str_road.trim()+'/1'; //add toggle number to route
  var send_checkbox = Number(document.getElementById("toggle_1").checked);//retrieving the value of the toggle/checkbox of the web page
  var message = new OSC.Message(str_road,send_checkbox); //message creation before sending
  osc.send(message);
 });
 document.getElementById('toggle_2').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/2';
  var send_checkbox = Number(document.getElementById("toggle_2").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_3').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/3';
  var send_checkbox = Number(document.getElementById("toggle_3").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_4').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/4';
  var send_checkbox = Number(document.getElementById("toggle_4").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_5').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/5';
  var send_checkbox = Number(document.getElementById("toggle_5").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_6').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/6';
  var send_checkbox = Number(document.getElementById("toggle_6").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_7').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/7';
  var send_checkbox = Number(document.getElementById("toggle_7").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_8').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/8';
  var send_checkbox = Number(document.getElementById("toggle_8").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_9').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/9';
  var send_checkbox = Number(document.getElementById("toggle_9").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_10').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/10';
  var send_checkbox = Number(document.getElementById("toggle_10").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_11').addEventListener('click', () => {
   var str_road ="";  
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/11';
  var send_checkbox = Number(document.getElementById("toggle_11").checked);
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('toggle_12').addEventListener('click', () => {
   var str_road =""; 
  var send_checkbox = Number(document.getElementById("toggle_12").checked);
  str_road = str_road +'/toggle';
  str_road = str_road.trim()+'/12';
  var message = new OSC.Message(str_road,send_checkbox);
  osc.send(message);
 });
 document.getElementById('bang_1').addEventListener('click', () => { 
   var str_road ="";  //retrieving the value of the route/road input field
  str_road = str_road +'/bang'; //add /bang to route
  str_road = str_road.trim()+'/1'; //add bang number to route
  var bang = Number(document.getElementById("bang_1").value); //retrieving the value of the bouton of the web page
  var message = new OSC.Message(str_road,bang); //message creation before sending
  osc.send(message);
});
document.getElementById('bang_2').addEventListener('click', () => {  
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/2';  
  var bang = Number(document.getElementById("bang_2").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_3').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/3';
  var bang = Number(document.getElementById("bang_3").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_4').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/4';
  var bang = Number(document.getElementById("bang_4").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_5').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/5';
  var bang = Number(document.getElementById("bang_5").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_6').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/6';
  var bang = Number(document.getElementById("bang_6").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_7').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/7';
  var bang = Number(document.getElementById("bang_7").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_8').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/8';
  var bang = Number(document.getElementById("bang_8").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_9').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/9';
  var bang = Number(document.getElementById("bang_9").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_10').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/10';
  var bang = Number(document.getElementById("bang_10").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_11').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/11';
  var bang = Number(document.getElementById("bang_11").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});
document.getElementById('bang_12').addEventListener('click', () => {
   var str_road =""; 
  str_road = str_road +'/bang';
  str_road = str_road.trim()+'/12'; 
  var bang = Number(document.getElementById("bang_12").value);
  var message = new OSC.Message(str_road,bang);
  osc.send(message);
});

sudo nano test1.html - le contenu du fichier



	
		
		
		page test1 
	
  
    
    
      texte/route :
    
    
      
    
    
    

  
    Message

      
        
      
    
      
        nombre n°1 :

      
      
        
      
    
    
      
        nombre n°2 :
      
      
        
      
    
    
      
        nombre n°3 :

sudo nano test1.js - le contenu du fichier, des valeurs son à changer en fonction du serveur


const ws_host = "ip_publique_serveur";
const ws_port = port_ecouter_par_le_serveur;

 var osc = new OSC(
  {plugin: new OSC.WebsocketClientPlugin({host: ws_host, port: ws_port})}
  );
 osc.open(); // connect by default to ws://localhost:8080

 document.getElementById('send').addEventListener('click', () => {
  var str = document.getElementById("str").value;
  var n1 = Number(document.getElementById("n1").value);
  var n2 = Number(document.getElementById("n2").value);
  var n3 = Number(document.getElementById("n3").value);
  var message = new OSC.Message(str,n1,n2,n3);
  osc.send(message);
 });
 
 document.getElementById('send_bang').addEventListener('click', () => {
   var message = new OSC.Message('/bang');
   osc.send(message);
   
 });

 document.getElementById('slider_h').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_slider_h = Number(document.getElementById("slider_h").value);
  var message = new OSC.Message(str,send_slider_h);
  osc.send(message);
   
 });

 document.getElementById('slider_v').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_slider_v = Number(document.getElementById("slider_v").value);
  var message = new OSC.Message(str,send_slider_v);
  osc.send(message);
   
 });
 document.getElementById('selector_h').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_selector_h = Number(document.getElementById("selector_h").value);
  var message = new OSC.Message(str,send_selector_h);
  osc.send(message);
   
 });
 document.getElementById('selector_v').addEventListener('input', () => {
  var str = document.getElementById("str").value;
  var send_selector_v = Number(document.getElementById("selector_v").value);
  var message = new OSC.Message(str,send_selector_v);
  osc.send(message);
   
 });
 
 document.getElementById('interupteur').addEventListener('click', () => {
  var str = document.getElementById("str").value;
  var send_checkbox = Number(document.getElementById("interupteur").checked);
  var message = new OSC.Message(str,send_checkbox);
  osc.send(message);
   
 });

===== Installation processing sous windows et des librairies nécessaire ===== source du code processing https://github.com/jottavi/Le-murmure-des-arbres Tout d'abord téléchargez la dernière version de Processing sur https://processing.org/download - allez dans le dossier téléchargement puis clique droit extraire ici - puis cliquer sur le dossier et exécuter processing.exe Ouvrez le programme. En haut à droite on peut voir un onglet écrit **Java**. Cliquez dessus et sélectionnez **ajouter un mode**. Une deuxième fenêtre s'affiche, installer « Android mode » : vous pouvez maintenant alterner entre les modes « Java » et « Android ». ==== Sur votre téléphone Android ==== vous devez effectuez le « debugging usb ». Attention, depuis la version 4.2 d’Android, le menu Options de développement n’apparaît plus par défaut dans les options de paramétrage, pour cela : Ouvrez les paramètres Système « About phone » Appuyez 7 fois sur « Build number » : vous êtes maintenant développeur Revenez à la page précédente et sélectionnez « Développer options » Activez « Usb debugging » Ensuite branchez votre appareil en USB sur l'ordinateur. Si le fichier SDK est correctement installé, vous devriez le voir apparaître dans Processing, dans l'onglet « Android » puis « Devices ». Attendre une demande d’autorisation sur votre téléphone pour le mode debugging. Toujours dans processing, allez sur l'onglet sketch et sélectionnez « manage librairies ». Une nouvelle fenêtre s'ouvre, dans celle-ci cliquez sur sur le champ de saisie, c'est ici que vous allez ajouter les éléments nécessaire à faire fonctionner le code : - OSCP5 : librairie permettant d'envoyer et recevoir des informations entre plusieurs logiciels/ordinateurs - controlP5 : permet la création de fader, bouton, potard ,... Entrez le code suivant dans processing :


import android.os.StrictMode;
import oscP5.*;
import netP5.*;
import controlP5.*; //librairies nécessaire à notre programme
ControlP5 controlP5;
OscP5 oscP5;
NetAddress myRemoteLocation;

boolean overButton = false;
int y_mixing_1 = 140;
int y_Pitch_1 = y_mixing_1 + 500 + 60;
int y_Sound_1 = y_Pitch_1 + 150 + 60;

int y_mixing_2 = y_Sound_1 + 150 + 60;
int y_Pitch_2 = y_mixing_2 + 500 + 60;
int y_Sound_2 = y_Pitch_2 + 150 + 60;

int colonne_1 = 20 ;
int colonne_2 = 190 ; 
int colonne_3 = 360 ; 
int colonne_4 = 530 ; 
int colonne_5 = 700 ; 
int colonne_6 = 870 ; 
int colonne_7 = colonne_6 + 150 ;

color couleur_active = color(138, 176, 92);
color couleur_premier_plan = color(39,109,35);

color couleur_de_fond_slider = color(189, 255, 0);

color couleur_active_pitch = color(76, 187, 23);
color couleur_premier_plan_pitch = color(39,109,35);
color couleur_de_fond_pitch = color(128,128,128);

color couleur_active_sound = color(151, 186, 112);
boolean slider_n = false;

//void setup est la partie où nous initialisons notre code avant de le faire tourner
void setup() {
  fullScreen();
  orientation(PORTRAIT); //plein écran en mode portrait
  smooth();
  frameRate(60); //vitesse à laquelle l 'écran s'actualise (ici 60 images / seconde)
  //création d'une nouvelle instance oscP5, c'est ce qui va nous permettre de communiquer avec pd
  oscP5 = new OscP5(this, 10000 ); //le port 12000 est celui sur lequel le routeur écoute
  myRemoteLocation = new NetAddress("80.12.93.238", 10000); //adresse ip et port d envoi
  //myRemoteLocation = new NetAddress("192.168.10.139", 10000); //adresse ip et port d envoi
  
  controlP5 = new ControlP5(this); //création d'un nouveau controller
 
  controlP5.addSlider("slider1",0,127).setPosition(colonne_1, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);
  controlP5.addSlider("slider2",0,127).setPosition(colonne_2, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);  
  controlP5.addSlider("slider3",0,127).setPosition(colonne_3, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider4",0,127).setPosition(colonne_4, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider5",0,127).setPosition(colonne_5, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider6",0,127).setPosition(colonne_6, y_mixing_1).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);

  controlP5.addToggle("toggle1",false).setPosition(colonne_1, y_Pitch_1).setSize(150,150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle2",false).setPosition(colonne_2, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle3",false).setPosition(colonne_3, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle4",false).setPosition(colonne_4, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle5",false).setPosition(colonne_5, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle6",false).setPosition(colonne_6, y_Pitch_1).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
     
  controlP5.addBang("bang1").setPosition(colonne_1, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang2").setPosition(colonne_2, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang3").setPosition(colonne_3, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang4").setPosition(colonne_4, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang5").setPosition(colonne_5, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang6").setPosition(colonne_6, y_Sound_1).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
 
  controlP5.addSlider("slider7",0,127).setPosition(colonne_1, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider8",0,127).setPosition(colonne_2, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);  
  controlP5.addSlider("slider9",0,127).setPosition(colonne_3, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider10",0,127).setPosition(colonne_4, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider11",0,127).setPosition(colonne_5, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider); 
  controlP5.addSlider("slider12",0,127).setPosition(colonne_6, y_mixing_2).setSize(150, 500).setColorActive(couleur_active).setColorForeground(couleur_premier_plan).setColorBackground(couleur_de_fond_slider);
  
  controlP5.addToggle("toggle7",false).setPosition(colonne_1, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle8",false).setPosition(colonne_2, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle9",false).setPosition(colonne_3, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle10",false).setPosition(colonne_4, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle11",false).setPosition(colonne_5, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  controlP5.addToggle("toggle12",false).setPosition(colonne_6, y_Pitch_2).setSize(150, 150).setColorActive(couleur_active_pitch).setColorForeground(couleur_premier_plan_pitch).setColorBackground(couleur_de_fond_pitch); 
  
  controlP5.addBang("bang7").setPosition(colonne_1, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang8").setPosition(colonne_2, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang9").setPosition(colonne_3, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang10").setPosition(colonne_4, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang11").setPosition(colonne_5, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);
  controlP5.addBang("bang12").setPosition(colonne_6, y_Sound_2).setSize(150, 150).setColorActive(couleur_active_sound).setColorForeground(couleur_premier_plan);

}

void controlEvent(ControlEvent theEvent) {
  StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
  StrictMode.setThreadPolicy(policy);
   if(theEvent.isController()) { 
     print("control event from : "+theEvent.getController().getName());
     println(", value : "+theEvent.getController().getValue());
   
   if(theEvent.getController().getName()=="slider1") {
     if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/1"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
       }
   }
    if(theEvent.getController().getName()=="slider2") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/2"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider3") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/3"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider4") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/4"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider5") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/5"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider6") {
      if(slider_n == true){
        OscMessage myMessage = new OscMessage("/slider/6"); //on donne ici un nom à notre message
        myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
        oscP5.send(myMessage, myRemoteLocation);
      }
    
   }
    if(theEvent.getController().getName()=="slider7") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/7"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider8") {
    if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/8"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
    }
   }
    if(theEvent.getController().getName()=="slider9") {
    if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/9"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
    }
   }
    if(theEvent.getController().getName()=="slider10") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/10"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider11") {
      if(slider_n == true){
      OscMessage myMessage = new OscMessage("/slider/11"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
   }
    if(theEvent.getController().getName()=="slider12") {
      if(slider_n){
      OscMessage myMessage = new OscMessage("/slider/12"); //on donne ici un nom à notre message
      myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
      oscP5.send(myMessage, myRemoteLocation);
      }
      slider_n = true;
   }
   if(theEvent.getController().getName()=="toggle1") {
    OscMessage myMessage = new OscMessage("/toggle/1"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
   if(theEvent.getController().getName()=="toggle2") {
    OscMessage myMessage = new OscMessage("/toggle/2"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle3") {
    OscMessage myMessage = new OscMessage("/toggle/3"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle4") {
    OscMessage myMessage = new OscMessage("/toggle/4"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle5") {
    OscMessage myMessage = new OscMessage("/toggle/5"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle6") {
    OscMessage myMessage = new OscMessage("/toggle/6"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle7") {
    OscMessage myMessage = new OscMessage("/toggle/7"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle8") {
    OscMessage myMessage = new OscMessage("/toggle/8"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle9") {
    OscMessage myMessage = new OscMessage("/toggle/9"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle10") {
    OscMessage myMessage = new OscMessage("/toggle/10"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle11") {
    OscMessage myMessage = new OscMessage("/toggle/11"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle12") {
    OscMessage myMessage = new OscMessage("/toggle/12"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang1") {
    OscMessage myMessage = new OscMessage("/bang/1"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang2") {
    OscMessage myMessage = new OscMessage("/bang/2"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle3") {
    OscMessage myMessage = new OscMessage("/bang/3"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="toggle4") {
    OscMessage myMessage = new OscMessage("/bang/4"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang5") {
    OscMessage myMessage = new OscMessage("/bang/5"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang6") {
    OscMessage myMessage = new OscMessage("/bang/6"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang7") {
    OscMessage myMessage = new OscMessage("/bang/7"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang8") {
    OscMessage myMessage = new OscMessage("/bang/8"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang9") {
    OscMessage myMessage = new OscMessage("/bang/9"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang10") {
    OscMessage myMessage = new OscMessage("/bang/10"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang11") {
    OscMessage myMessage = new OscMessage("/bang/11"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
if(theEvent.getController().getName()=="bang12") {
    OscMessage myMessage = new OscMessage("/bang/12"); //on donne ici un nom à notre message
    myMessage.add(int (theEvent.getController().getValue())); // on lui donne ici une valeur (contenu du mail)
    oscP5.send(myMessage, myRemoteLocation);
   }
 }
}

void draw() {  
  background(34,73,18); // couleur de fond de votre écran
  text();
  if (overButton == true) {
    fill(255);
  } else {
    noFill();
  }
  rect(colonne_1, y_Sound_2 + 150 + 30 + 50, 450, 120);
  line(colonne_2, y_Sound_2 + 150 + 30 + 50 + 100 , colonne_3, y_Sound_2 + 150 + 30 + 50 + 20);
  line(colonne_3 - 50,  y_Sound_2 + 150 + 30 + 50 + 20, colonne_3, y_Sound_2 + 150 + 30 + 50 + 20);
  line(colonne_3, y_Sound_2 + 150 + 30 + 50 + 20, colonne_3, y_Sound_2 + 150 + 30 + 50 + 20 + 50);
}
void mousePressed() {
  if (overButton) { 
    link("http://apo33.org:8000/arbres.ogg");
  }
}

void mouseMoved() { 
  checkButtons(); 
}
  
void mouseDragged() {
  checkButtons(); 
}

void checkButtons() {
  if (mouseX > colonne_1 && mouseX < colonne_1 + 450 && mouseY > y_Sound_2 + 150 + 30 + 50 && mouseY < y_Sound_2 + 150 + 30 + 50 + 120) {
    overButton = true;   
  } else {
    overButton = false;
  }
}
void text(){
  
  textSize(75); 
  text("Le murmure des arbres", 20,60); 
  textSize(80);
  text("APO33", 800, 80);  
  textSize(40); 
  text("version 0.1-2", 560, 95);  
  
  textSize(40); 
  text("Mixing 1", colonne_1,  y_mixing_1 - 20);
  line(colonne_2, y_mixing_1 - 30 , colonne_7, y_mixing_1 - 30);
  text("Pitch 1", 20,  y_Pitch_1 - 20 );  
  line(colonne_2, y_Pitch_1 - 30 , colonne_7, y_Pitch_1 - 30);
  text("Sound 1", 20,  y_Sound_1 - 20 );  
  line(colonne_2, y_Sound_1 - 30 , colonne_7, y_Sound_1 - 30);
  text("Mixing 2", 20,  y_mixing_2 - 20);
  line(colonne_2, y_mixing_2 - 30 , colonne_7, y_mixing_2 - 30);
  text("Pitch 2", 20,  y_Pitch_2 - 20 );  
  line(colonne_2, y_Pitch_2 - 30 , colonne_7, y_Pitch_2 - 30);
  text("Sound 2", 20,  y_Sound_2 - 20 );  
  line(colonne_2, y_Sound_2 - 30 , colonne_7, y_Sound_2 - 30);
  line(colonne_1, y_Sound_2 + 150 + 20 , colonne_7, y_Sound_2 + 150 + 20);

  textSize(35); 
  text("Listen Live here:", colonne_1,  y_Sound_2 + 150 + 60 );
  
  textSize(32); 
  text("Developed by Julien Ottavi, programmation by Max Siliphayvanh, visual by Jenny Pickett - artistic concept by OttaviPickett and Apo33" ,
  colonne_4  ,  y_Sound_2  + 150 + 30 , 570 , 180 );
  //rect(  colonne_4  ,  y_Sound_2  + 150 + 30 , 570 , 180 );
  line(colonne_4 - 20, y_Sound_2 + 150 + 30 , colonne_4 - 20, y_Sound_2 + 150 + 180 + 30);
  text("info: apo33.org", colonne_5,  y_Sound_2 + 150 + 180 + 30);

}

Pour les premiers tests, il est préférable que le téléphone soit connecté au même wifi que l'ordinateur. Dans Processing, allez dans “sketche permission” se trouvant dans l’onglet “Android”, il est important d’ajouter l’option ''ACCESS_NETWORK_STATE'' et ''internet'' . Après avoir copié le code dans Processing, vous devez appuyer sur le bouton Play en haut à gauche. Sur le téléphone, l'application devrait maintenant apparaître. Pour trouver le fichier .APK il faut aller voir dans la console de Processing où il est écrit qu'un nouveau dossier à été créé ===> Build folder : emplacement du dossier Ensuite allez dans “App”, puis “Build”, puis “Outputs”, puis “APK”, puis “Debug”. Le fichier .APK servira ensuite à télécharger l’appli sur un autre appareil Android. Il faut bien penser à donner l’autorisation pour le téléchargement car le téléphone se méfie si l’appli ne provient pas du store android.