Journal du projet "Ondes - Les Flotteurs de l’Ourcq"

L'hydrolinguistique est une étude de la relation entre la langue et l'eau. Cela peut inclure des aspects tels que l'utilisation de l'eau dans les expressions idiomatiques en français, les différents mots utilisés dans différentes langues pour désigner l'eau, et même comment l'eau influence la façon dont nous parlons et écrivons. C'est un domaine de recherche intéressant qui peut nous en apprendre beaucoup sur la langue et la façon dont nous l'utilisons.

Il n'existe pas de consensus sur le fait qu'il soit nécessaire d'enseigner l'hydrolinguistique dans les programmes scolaires. Comme c'est un domaine de recherche relativement nouveau et spécialisé, il n'est pas inclus dans la plupart des programmes d'études. Cependant, certains pourraient argumenter que l'étude de la relation entre la langue et l'eau peut être utile pour comprendre comment notre langue fonctionne et comment elle est influencée par notre environnement. Si vous êtes intéressé par l'hydrolinguistique, vous pourriez envisager de suivre des cours universitaires ou de lire des livres ou des articles sur le sujet pour en apprendre davantage.

Firefox: OK

Chrome & Opera & Edge: Pb sur  http://gerard.paresys.free.fr/Journal/zondes7/index.html

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addModule')
at p5.sound.js:1191:41

    Pas de pb sur https://paresys.pagesperso-orange.fr/Journal/zondes7/index.html 
Safari: Pb

pas de son pas de message d'erreur!
Solution Réglages pour ce site web... -> Toujours autoriser la lecture automatique

MAMP + Chrome: OK

Solution?

- https au lieu de http ?
- 22 novembre 2023: Essai en actualisant p5.js et p5.sound.js avec Version 1.8.0 (October 25, 2023) -> même problème avec Chrome & Opera & Edge

"Note: This setup was originally designed for an offline WLAN, providing access to a small number of locally hosted domains ... think the WiFi media portal on a flight or boat."

TP-Link TL-WA1201 AC1200 Wireless Access Point 

Intentions / Contexte: Proposer des informations sur les œuvres exposées, sous la forme de pages web accessibles en local sur un portail captif, via un spot WIFI en flashant un code QR

HTML isn't a programming language and doesn't have the ability to write loops.
To do that you will need some other language to generate HTML, e.g. JavaScript.

You could use some JavaScript like this:

for(var i = 0; i < 10; i++) {
   document.body.innerHTML += '<div class="item"><div class="portfolio-item"><a href="img/portfolio-item-' + i + '.jpg" data-lightbox="image-' + i + '"><img src="img/portfolio-item-' + i + '.jpg"></a></div></div>'
}

This example just outputs to the body tag, so you'd also need to change that to the container where you want these items output.

Les 6 premiers bouchons fonctionnent.

Les 6 premiers bouchons fonctionnent.

Voir: w3schools.com

Les 6 premiers bouchons fonctionnent.
Clic en haut à gauche de l'écran pour faire apparaître la grille des 63 bouchons.

- L'image du bouchon n'est pas la bonne (dans le sketch Processing et dans le index.html):
bouchon21.jpg devrait être en première position etc...

Les 24 premiers bouchons fonctionnent.
Grille:
Tableau TablOnde.csv:
Ajouter les 3 dossiers:

NumeroBouchon envoyé par index.html corrigé.
Les 24 premiers bouchons fonctionnent.

Pour créer un portail captif avec seulement un réseau local, vous pouvez utiliser un logiciel appelé "Captive Portal". Un portail captif est un système qui redirige automatiquement les utilisateurs d'un réseau local vers une page d'authentification avant de leur permettre d'accéder à Internet. Voici les étapes de base pour mettre en place un portail captif sur un réseau local :

Étape 1 : Configuration du réseau local Assurez-vous d'avoir un réseau local fonctionnel avec un routeur ou un point d'accès sans fil qui gère les connexions des utilisateurs. Connectez-vous à l'interface d'administration du routeur/point d'accès pour configurer les paramètres du réseau.

Étape 2 : Sélection d'un logiciel de portail captif Il existe différents logiciels de portail captif disponibles, tels que CoovaChilli, OpenWrt, pfSense, etc. Sélectionnez celui qui correspond le mieux à vos besoins et à votre configuration matérielle.

Étape 3 : Installation du logiciel de portail captif Suivez les instructions fournies par le logiciel que vous avez choisi pour l'installer sur votre routeur ou point d'accès. Cela peut impliquer de télécharger un firmware personnalisé ou de configurer le logiciel à l'aide de lignes de commande.

Étape 4 : Configuration du portail captif Accédez à l'interface d'administration du logiciel de portail captif et configurez les paramètres de base, tels que le SSID du réseau, les paramètres de sécurité et les options d'authentification.

Étape 5 : Personnalisation de la page d'authentification Le portail captif redirigera automatiquement les utilisateurs vers une page d'authentification. Personnalisez cette page avec les informations que vous souhaitez afficher aux utilisateurs et les options d'authentification (par exemple, nom d'utilisateur et mot de passe, ou une option d'inscription).

Étape 6 : Test du portail captif Connectez un appareil à votre réseau local pour tester le fonctionnement du portail captif. Lorsque vous accédez à Internet pour la première fois, vous devriez être redirigé vers la page d'authentification. Une fois que vous vous êtes authentifié avec succès, vous devriez pouvoir accéder à Internet normalement.

Veuillez noter que la mise en place d'un portail captif peut être complexe selon le logiciel utilisé et votre niveau d'expertise technique. Assurez-vous de bien comprendre les implications de la configuration du portail captif pour votre réseau local, car cela peut affecter la sécurité et la confidentialité des utilisateurs.

Si vous souhaitez créer un portail captif sans accès à Internet, vous pouvez le faire en configurant simplement un réseau local isolé. Voici comment procéder :

Étape 1 : Configuration du réseau local Assurez-vous d'avoir un réseau local fonctionnel avec un routeur ou un point d'accès sans fil qui gère les connexions des utilisateurs. Connectez-vous à l'interface d'administration du routeur/point d'accès pour configurer les paramètres du réseau.

Étape 2 : Isoler le réseau local Dans les paramètres du routeur/point d'accès, recherchez l'option "Isolation des clients" ou "Isolation du réseau" et activez-la. Cette fonctionnalité empêchera les appareils connectés au réseau local de communiquer directement les uns avec les autres.

Étape 3 : Personnalisation de la page d'authentification (facultatif) Si vous souhaitez toujours rediriger les utilisateurs vers une page d'authentification, vous pouvez le faire, mais sans leur accorder l'accès à Internet. Cela peut être utile si vous voulez fournir des informations locales ou des instructions aux utilisateurs.

Étape 4 : Test du portail captif Connectez un appareil à votre réseau local pour tester le fonctionnement du portail captif. Lorsque vous accédez à Internet pour la première fois, vous pouvez être redirigé vers une page d'authentification personnalisée, mais étant donné que l'accès à Internet est isolé, l'utilisateur ne pourra pas naviguer sur le Web.

En suivant ces étapes, vous aurez un portail captif qui redirige les utilisateurs vers une page d'authentification personnalisée, mais sans leur donner accès à Internet. Cela peut être utile pour fournir des informations spécifiques aux utilisateurs ou restreindre l'accès à Internet dans certaines situations.

# A fatal error has been detected by the Java Runtime Environment:
...
# Problematic frame:
# C  [libGL.dylib+0x185e]  glEnable+0xf
# Failed to write core dump. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java again
...

24 bouchons fonctionnent.
Avec la Font Roboto-Medium.ttf

bouton StopEnTouchantGauche et StopEnTouchantDroit fonctionnent avec écran tactile?

Oui: "la tactibilitude du ondes16 fonctionne ... "

Correction: la première image affichée après initxx.jpg est onde0.jpg quand Alea = 0. (C'était onde2.jpg)

le Totem et les Flotteurs de l’Ourcq
Ondes, une création hydrolinguistique* de Guykayser

- Font Oswald-Light.ttf ajoutée
- ondes26.mp3 nouveau
- DureeSketch renommé DureeData enregistré dans TablOnde.csv
- TablOnde.csv modifié:
      Caranda,4 remplacé par Caranda,5
      Colonne DureeData ajoutée
- Readata2020_1.pde renommé Readata2023.pde
- Correction int divisA dans setup() et dans NouveauFichierImage2() (était inutile)
- Mode Alea dans les dossiers d'images -> fonction Urne qui tire 1 fois chaque image du dossier sans répétition avant de recommencer un cycle. "no-repeat random number generator"
 - Ajout header Hauteur dans chouy.csv
 - IndiceData = 0; supprimé dans void DebutCycle()

ondes18 plantait quand DureeData est faible (90 par exemple), et qu'il y a un nouveau cycle.
-> ArrayIndexOutOfBoundsException: Index 1097 out of bounds for length 1097
à la ligne:
formedelacourbe = int(map(TabData[IndiceData], DataMini, DataMaxi, -500, 500));
1097 est le nombre de Data dans chouy.csv

Avec: Envelope: une variable entre 0 et 1 qui suit en temps réel l'enveloppe du son.
Avec sur EcranStopEnTouchantDroit:

Réglage du niveau sonore de -80dB à +6dB.
Affichage du niveau sonore
Affichage du HostName
Affichage du numéro IP
Affichage de l'enveloppe

Avec FFT dans une zone rectangulaire ZoneGauche ZoneDroit ZoneHaut ZoneBas

Avec FFT dans la zone rectangulaire ZoneGauche ZoneDroit ZoneHaut ZoneBas
Au choix verticale ou horizontale

EnMorceaux1.mp3  1'09"
EnMorceaux2.mp3  1'21"
EnMorceaux3.mp3  1'51"

Placer accueilvideototemodif.mp4 (25.6Mo) dans le dossier data
Avec un film en boucle comme écran d'attente.
Avec la library Video

- Enregistrement du niveau sonore choisi en dB dans un fichier Config.txt ?
- + de 63 Bouchons/Conversations ?

L’hydrolinguistique est un terme inventé par l’artiste Guykayser pour désigner une création artistique qui utilise l’eau et la langue comme médiums. Selon sa définition, l’hydrolinguistique est “l’art de faire parler l’eau, de lui donner une voix, une langue, une parole” ¹. Il s’agit d’une pratique qui explore les liens entre le son, le sens et le mouvement de l’eau, ainsi que les différentes langues parlées par les humains. L’hydrolinguistique se manifeste sous différentes formes, comme des installations, des performances, des sculptures ou des enregistrements sonores. L’un des projets d’hydrolinguistique de Guykayser est Ondes, qui consiste à capter les sons de l’eau du canal de l’Ourcq et à les diffuser dans des flotteurs et un totem interactifs ¹. Un autre projet est Écouter-Parler, qui est un laboratoire mobile des langues qui sillonne le territoire français pour faire découvrir les langues parlées en France et inviter les participants à contribuer au portrait sonore de la France ². L’hydrolinguistique est donc une démarche artistique originale et innovante qui met en valeur la diversité linguistique et la richesse de l’eau.

L’hydrolinguistique est un terme intrigant, n’est-ce pas ? En 2019, il a fait son apparition et a suscité la curiosité des esprits linguistiques. Voici sa définition officielle :
Hydrolinguistique [idʀɔlε̃gɥistik] n. f. – XXIe siècle (2019) ; composée de hydro (du grec ancien ὕδριος, signifiant « d’eau, aqueux ») et linguistique. L’hydrolinguistique explore les liens entre l’eau et le langage, peut-être dans des contextes poétiques, métaphoriques ou même scientifiques. Imaginez les mots flottant comme des gouttes d’eau, se mêlant et se transformant dans le courant des conversations. Peut-être que cette année, 2023, sera celle où nous plongerons plus profondément dans les eaux mystérieuses de l’hydrolinguistique.

Je suis désolé, mais je n’ai pas trouvé d’informations précises sur l’hydrolinguistique. Il semble que ce soit un terme très récent et peut-être spécifique à un certain contexte ou domaine. Je vous suggère de rechercher davantage d’informations auprès d’une source fiable ou d’un expert dans le domaine concerné. Si vous avez d’autres questions ou besoin d’aide sur un autre sujet, n’hésitez pas à me le faire savoir.

 1 ->  1
12 ->  2
13 ->  3
14 ->  4
31 ->  5
34 ->  6
36 ->  7

NumeroBouchon,x,y,l,h,p
1, 481,558,15,197,Ourcq
2, 670,153,11,187,Sénégal
3, 911,305,14,195,Loire
4,1715,354,15,184,Palikur
5, 746,653,16,182,Cemuhi
6,1125,573,16,199,Vaudois
7,1468,255,11,204,Loing

- Firefox: OK
- Chrome & Opera & Edge sous MacOS: Pb :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addModule')
at p5.sound.js:1191:41

- Chrome & Edge sous  Windows 10: OK
- MAMP + Chrome: OK

Solution?

Distortion/glitching after hundreds of calls to SoundFile.play() #647
Reuse SoundFile's worklet node to prevent distortion #728
audio distorted, choppy, slow on Chrome in recent p5.sound versions #494
Sound starts to get distorted after a while 

Gibber: Creative Coding for JavaScript -> Sampler
How to change Sound file dynamically in p5.js 
p5.SoundFile has two play modes
getBlob()

"WebPd is a compiler for the Pure Data audio programming language allowing to run .pd patches in web pages."
"It converts the audio graph and processing objects from a patch into plain human-readable JavaScript..."

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

p5.js getAudioContext()
p5.js userStartAudio()

"We’re thrilled to announce aarón montoya-moraga as the 2023 p5.sound Fellow!
The p5.sound Fellow will focus on re-envisioning sound in the p5.js project, as a beginner-friendly intro to working with sound on the web and integrating sound into interactive audiovisual projects. They will review existing features and redefine a lean set of core features for p5.sound (like playing sound, handling mic input, and some basic analysis of sound), while leaving more advanced features, like music composition, to other external libraries."

0 Placer le dossier:
1 Lancer MAMP
2 Chrome
Fenêtre MAMP -> MY WEBSITE -> zondesB3/

Eliastik/simple-voice-changer
How to Implement a Voice Changer Capability
Audio Editor Kit

play([startTime], [rate], [amp], [cueStart], [duration])

jump(cueTime, duration)

1.mp3   Mono 44100Hz
2.mp3 Stereo 44100Hz -> changé Mono
3.mp3   Mono 22050Hz -> Refait 44100Hz à partir original wav Stereo et suppression clic début
4.mp3   Mono 44100Hz
5.mp3 Stereo 44100Hz -> changé Mono
6.mp3   Mono 48000Hz -> changé 44100Hz
7.mp3   Mono 44100Hz

Avec un effet granulaire dans la zone 4 inspiré de:
github ... p5.js-sound ... granular_sampler
Avec un effet "jump" amélioré dans la zone 3

Il y a encore parfois un plantage quand on sort de la zone 3 vers la zone 2...

this.sound.playMode('sustain'); // sustain/restart  sustain = polyphonic playing

this.sound.playMode('restart '); // sustain/restart  sustain = polyphonic playing

Problème résolu du plantage quand on sort de la zone 3 vers la zone 2:

Polyphonie: on peut placer plusieurs bouchons dans les 4 zones et donc plusieurs voix sont entendues simultanément.

let LimiteZone1 = 55;
let LimiteZone2 = 107;
let LimiteZone3 = 185;
let LimiteZone4 = 262;
let LimiteZone5 = 320;