APOTEK

User Tools

Site Tools

Trace:
murmure_des_arbres

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
murmure_des_arbres [2023/06/26 22:17] – [projet] julienmurmure_des_arbres [2023/06/27 12:16] (current) – [Processing et android app] tech
Line 1: Line 1:
 +====== 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 :
 +
 +<code>sudo apt update</code>
 +
 +<code>sudo apt install xfce4 xfce4-goodies</code>
 +
 +- Sélectionnez n'importe quel gestionnaire d'affichage et appuyez sur Entrée
 +
 +<code>sudo apt install tigervnc-standalone-server</code>
 +
 +<code>vncserver</code>
 +
 + - 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
 +
 + 
 +<code>vncserver -kill :1</code>
 +
 +<code> nano ~/.vnc/xstartup</code>
 +
 + - contenu du fichier 
 +
 +<code>
 + #!/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 &
 +</code>
 +<code> chmod +x ~/.vnc/xstartup</code> 
 + 
 +<code> vncserver -localhost no :1</code> 
 + 
 + - à 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:
 +
 +<code>vncserver -kill :1</code>
 +
 +<code>cd /etc/systemd/system</code>
 +
 +<code> sudo nano tigervnc@:1.service</code>
 +
 + - contenu du fichier, dans le fichier crée définir l'**__user__** et le **__WorkingDirectory__**  en fonction de votre machine
 +<code>
 +[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
 +</code>
 +
 +<code>sudo systemctl enable tigervnc@\:1.service</code>
 +
 +<code>sudo systemctl daemon-reload</code>
 +
 +cette ligne corrige le problème ''unable to contact settings server'': 
 +
 +<code>sudo apt install dbus-x11</code> 
 +
 +<code>sudo systemctl start tigervnc@:1</code>
 +
 +====== 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 :
 +
 +<code>
 +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
 +</code>
 +
 +<code>cd /etc/apache2/sites-available</code>
 +
 +<code>sudo nano 000-default.conf </code>
 +
 +remplacé ''<VirtualHost *:80>'' par 
 +
 +<code><VirtualHost *:8080></code>
 +
 +<code> cd  /etc/apache/</code>
 +
 +<code>sudo nano ports.conf </code> 
 +
 +- remplacé la ligne ''Listen 80'' par le port d'écouter souhaité ici 8080
 +
 +<code>Listen 8080</code>
 +
 +<code>systemctl restart apache2</code>
 +
 +==== pour vérifier que apache2 écouter bien le port souhaiter====
 +
 +<code>netstat -tlpn| grep apache</code>
 +
 +<code>ss -tlpn| grep apache</code>
 +
 +======  Webapp, OSC et websockets ======
 + 
 +===== installation de nodejs sous ubuntu =====
 +
 +<code>sudo apt-get update</code>
 +<code>sudo apt-get install nodejs npm</code>
 +
 +
 +===== 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
 +
 +<code>npm i osc-js</code>
 +
 +===== création du bridge.js =====
 +
 +lien de la doc sur lequel le code est basé https://github.com/adzialocha/osc-js/wiki/PureData-&-MaxMSP
 +
 +<code>nano bridge.js</code>
 +
 +contenu du fichier, à noté qu'il faut remplacer certaine valeur en fonction de la configuration souhaité 
 +
 +<code>
 +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
 +</code>
 +
 +===== Pour le démarrage automatique du node =====
 +
 +ouvrir un terminal et entrer : 
 +
 +<code>sudo apt install npm</code>
 +
 +<code>sudo npm install -g pm2 </code>
 +
 +- changer le chemin en fonction de où ce trouve le ficher bridge.js
 +
 +<code>pm2 start le_chemin_du_fichier </code>
 +
 +<code>pm2 save</code> 
 +
 +<code>pm2 list</code>
 +
 +<code>pm2 startup</code> 
 +
 + - puis faire la entrer la commande retourné
 +
 + - une fois tout setup voici les commandes utile en cas de crash :
 +
 +<code>pm2 list</code>
 +
 +<code>pm2 restart bridge.js</code>
 + 
 + 
 +===== 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
 + 
 +<code>cd le_chemin_ou_cree_les_pages_web</code>
 +
 +<code>sudo nano index.css</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +.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;
 +}
 +
 +</code>
 +
 +<code>sudo nano index.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<html>
 +
 + <head>
 +
 + <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 +
 + <link charset="UTF8" href=".\index.css" rel="stylesheet" type="text/css" />
 +
 + <title>Page index</title>
 +
 + </head>
 +
 +
 +
 + <body>
 +
 + <div>
 +
 + <p>
 +
 + <ul>
 +
 + <li><a href= ".\test1.html"> <h3>Page test 1</h3></a></li>
 +
 + <li><a href= ".\12_slider.html"><h3> Page 12 sliders</h3></a></li>
 +
 + </ul>
 +
 + </p>
 +
 +
 +
 + </div>
 +
 + </body>
 +
 +</html>
 +</code>
 +<code>sudo nano 12_slider.css</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +.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;
 +}
 +
 +</code>
 +
 +<code>sudo nano 12_slider.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<html>
 + <head>
 + <!--<meta http-equiv="refresh" content="20">-->
 + <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
 + <link charset="UTF8" href=".\12_slider.css" rel="stylesheet" type="text/css" />
 + <title>page 12 slider</title>
 + </head>
 +  <body>
 +  <!--
 +    <table>
 +    <td>
 +      <label for="str_road"><p>route/road :</p></label>
 +    </td>
 +    <td>
 +      <input type="text" id="str_road" name="str" 
 +       minlength="0" maxlength="100">
 +    </td>
 +    </table>
 +
 +    <p><br/></p>
 +
 +    <table border="0">
 +      <td>
 +        <label for="msg"><p>Message :</p></label>
 +      </td>
 +      <td>
 +        <input type="text" id="msg" name="msg" 
 +         minlength="0" maxlength="100">
 +      </td>
 +      <tr>
 +        <td>
 +
 +        </td>
 +        <td>
 +          <button id="send">send the message</button>
 +        </td>
 +      </tr>
 +    </table>
 +
 +   <p><br/></p>
 + -->
 + <table border="0">
 + <tr>
 + <td>
 + <h1>Le murmure des arbres</h1>
 + </td>
 + <td>
 + <img class ="logo_apo33" src="./logo_apo33.png" alt="logo apo33">
 + </td>
 + </tr>
 +   </table>
 +   <table border="0">
 +    <tr>
 + <td>
 +   <h3>Mixing</h3>
 + </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_1" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_2" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_3" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_4" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_5" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_6" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_7" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_8" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_9" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_10" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_11" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +   <td>
 +        <div class="slider-wrapper">
 +          <input class="slider" type="range" id="slider_vertical_12" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +    </tr>
 +    <tr>
 + <td>
 +   <h3>pitch</h3>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_1">
 + <input class="increase" type="checkbox" id="toggle_1" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_2">
 + <input class="increase" type="checkbox" id="toggle_2" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_3">
 + <input class="increase" type="checkbox" id="toggle_3" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_4">
 + <input class="increase" type="checkbox" id="toggle_4" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_5">
 + <input class="increase" type="checkbox" id="toggle_5" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_6">
 + <input class="increase" type="checkbox" id="toggle_6" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_7">
 + <input class="increase" type="checkbox" id="toggle_7" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_8">
 + <input class="increase" type="checkbox" id="toggle_8" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_9">
 + <input class="increase" type="checkbox" id="toggle_9" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_10">
 + <input class="increase" type="checkbox" id="toggle_10" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_11">
 + <input class="increase" type="checkbox" id="toggle_11" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 + <td>
 + <label class="custom-checkbox-label" for="toggle_12">
 + <input class="increase" type="checkbox" id="toggle_12" name="interupteur" value="1">
 + <span class="custom-checkbox"></span></label>
 + </td>
 +    </tr>
 +
 +    <tr>
 + <td>
 +   <h3>sound</h3>
 + </td>
 +      <td>
 +        <button class="bang" id="bang_1"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_2"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_3"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_4"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_5"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_6"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_7"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_8"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_9"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_10"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_11"></button>
 +      </td>
 +      <td>
 +        <button class="bang" id="bang_12"></button>
 +      </td>
 +   
 +    </tr>
 + </table>
 + <p></br></p>
 + <div>
 + <audio controls="controls" preload="none"><source src="http://apo33.org:8000/arbres.ogg" type="application/ogg" /></audio> <!--ogg player-->
 + </div>
 +
 + <p></br></p>
 + <div>
 + <p>Developed by Julien Ottavi, programmation by Max Siliphayvanh, visual by Jenny Pickett - artistic concept by OttaviPickett and Apo33</p>
 + <p>
 + <a class="more_info" href= "https://apo33.org/">More Info here</a>
 + </p>
 + </div
 +
 +</body>
 +
 +    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adzialocha/osc-js/lib/osc.js"></script>
 +    <!--<script type="text/javascript" src="node_modules/osc-js/lib/osc.min.js"></script> --> 
 +    <script type="text/javascript" src='./12_slider.js'></script> <!-- for import the script 12_slider.js-->
 +</html>
 +</code>
 +
 +<code>sudo nano 12_slider.js</code>
 +
 +- le contenu du fichier, des valeurs son à changer en fonction du serveur
 +
 +<code>
 +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);
 +});
 +
 +</code>
 +
 +<code>sudo nano test1.html</code>
 +
 +- le contenu du fichier
 +
 +<code>
 +<html>
 + <head>
 + <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 + <link charset="UTF8" href=".\index.css" rel="stylesheet" type="text/css" />
 + <title>page test1 </title>
 + </head>
 +  <body>
 +    <table>
 +    <td>
 +      <label for="str"><p>texte/route :</p></label>
 +    </td>
 +    <td>
 +      <input type="text" id="str" name="str" value="/" 
 +       minlength="0" maxlength="100">
 +    </td>
 +    </table>
 +    <p><br/></p>
 +  
 +    <table border="0">
 +      <tr>
 +        <p>Message</p>
 +      </tr>
 +    <tr>
 +      <td>
 +        <label for="n1"><p>nombre n°1 :</p></p></label>
 +      </td>
 +      <td>
 +        <input type="number" id="n1" name="n1" 
 +        minlength="0" maxlength="100">
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <label for="n2"><p>nombre n°2 :</p></label>
 +      </td>
 +      <td>
 +        <input type="number" id="n2" name="n2" 
 +        minlength="0" maxlength="100">
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <label for="n3"><p>nombre n°3 :</p></label>
 +      </td>
 +      <td>
 +        <input type="number" id="n3" name="n3" 
 +        minlength="0" maxlength="100">
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <button id="send">Send Message</button>
 +      </td>
 +    </tr>
 +    </table>
 +   <p><br/></p>
 +   <table border="0">
 +    <tr>
 +      <td>
 +        <button id="send_bang">Send /bang</button>
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <input type="range" id="slider_h" min="0" max="127" value="0" step="1">
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +          <input type="range" id="slider_v" min="0" max="127" value="0" step="1">
 +        </div>
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <input type="range" id="selector_h"min="0" max="7" value="0" step="1" list="steplist">
 +        <datalist id="steplist">
 +        <option>0</option>
 +        <option>1</option>
 +        <option>2</option>
 +        <option>3</option>
 +        <option>4</option>
 +        <option>5</option>
 +        <option>6</option>
 +        <option>7</option>
 +        </datalist>
 +      </td>
 +      <td>
 +        <div class="slider-wrapper">
 +        <input type="range" id="selector_v"min="0" max="7" value="0" step="1" list="steplist">
 +        <datalist id="steplist">
 +        <option>0</option>
 +        <option>1</option>
 +        <option>2</option>
 +        <option>3</option>
 +        <option>4</option>
 +        <option>5</option>
 +        <option>6</option>
 +        <option>7</option>
 +        </datalist>
 +        </div>
 +      </td>
 +    </tr>
 +    <tr>
 +      <td>
 +        <input class="increase" type="checkbox" id="interupteur" name="interupteur" value="1">
 +      </td>
 +    </tr>
 +  </table>
 +
 +</body>
 +    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/adzialocha/osc-js/lib/osc.js"></script> <!--ou <script type="text/javascript" src="node_modules/osc-js/lib/osc.min.js"></script>--> 
 +    <script type="text/javascript" src='./test1.js'></script>
 +</html>
 +</code>
 +
 +<code>sudo nano test1.js</code>
 +
 +- le contenu du fichier, des valeurs son à changer en fonction du serveur
 +
 +<code>
 +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);
 +   
 + });
 +</code>
 +
 +===== 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 :
 +
 +<code>
 +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);
 +
 +}
 +</code>
 +
 +
 +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. 
 +
 +
 +
 +
 +
 +
 +
  
murmure_des_arbres.txt · Last modified: 2023/06/27 12:16 by tech

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki