Skip to content

Commit

Permalink
Upgrade sonification algorithm
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaxAlyokhin
MaxAlyokhin committed Jul 17, 2022
1 parent 61aafa1 commit e589f0e
Show file tree
Hide file tree
Showing 10 changed files with 581 additions and 414 deletions.
18 changes: 17 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,32 @@

`audio.js` принимает данные о движении и генерирует звук

### Запуск
### Настройка

npm i

Генерация ssl-сертификата

https://stackoverflow.com/questions/21397809/create-a-trusted-self-signed-ssl-cert-for-localhost-for-use-with-express-node

cd client

npm i

### Запуск

В первом терминале:
nodemon index

Во втором терминале:
cd client

gulp

На компе и смартфоне открываем https://192.168.0.103:3000/

Включаем удалённую стратегию синтеза

#### Название?

audio
Expand Down Expand Up @@ -80,6 +94,8 @@ Sonification Interface for motion and orientation
акселерометр определяет громкость;
гироскоп частоту;

При таком раскладе нам не надо делать oscillator.stop() т.к. громкость у нас сама падает при отсутствии движения. Тогда всё можно делать на одном осцилляторе.

#### TODO:

- троттлинг-лимит (события генерятся со скоростью 16 мс; можно сделать больше для облегчения вычислений); этот параметр должен коррелировать с exponentialRampToValueAtTime, т.е. затуханием звука, чтобы всё сливалось в непрерывный звук;
Expand Down
281 changes: 131 additions & 150 deletions client/src/html/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Audio Motion Interface</title>
<title>Audio-Motion Interface</title>

<!-- prettierignore -->
//=include templates/head.html
Expand All @@ -11,184 +11,165 @@

<!-- main:js -->
<!-- endinject -->

<!-- <script src="/socket.io/socket.io.js"></script> -->
</head>

<body>
<div class="frontendDesktop">
<div class="container">
<div class="info">
<div class="regime">Режим приёмника данных включён</div>
<div class="connections">
<div class="connections__to-server connections--wait">Подключение к вебсокет-серверу...</div>
<div class="connections__status connections--wait">Ожидание подключений...</div>
<div class="connections__devices"></div>
</div>
</div>
<div class="container">
<div class="title">Audio-Motion Interface</div>

<div class="motion">
<div>
<span>Наличие движения</span>
<span class="motion__is-motion">false</span>
</div>
<div>
<span>Движение по оси α (м/с²)</span>
<span class="motion__alpha">0</span>
</div>
<div>
<span>Движение по оси β (м/с²)</span>
<span class="motion__beta">0</span>
</div>
<div>
<span>Движение по оси γ (м/с²)</span>
<span class="motion__gamma">0</span>
</div>
<div>
<span>Максимальное значение (м/с²)</span>
<span class="motion__maximum">0</span>
</div>
<div>
<span>Положение смартфона по оси γ</span>
<span class="motion__orientation">0</span>
</div>
<div>
<span>Генерируемая частота (Гц)</span>
<span class="motion__frequency">0</span>
</div>
<div class="info">
<div class="regime">Режим приёмника данных включён</div>
<div class="connections">
<div class="connections__to-server connections--wait">Подключение к вебсокет-серверу...</div>
<div class="connections__status connections--wait">Ожидание подключений...</div>
<div class="connections__devices"></div>
</div>
</div>
</div>

<div class="frontendMobile">
<div class="container">
<div class="motion">
<div>
<span>Наличие движения</span>
<span class="motion__is-motion">false</span>
</div>
<div>
<span>Движение по оси α (м/с²)</span>
<span class="motion__alpha">0</span>
</div>
<div>
<span>Движение по оси β (м/с²)</span>
<span class="motion__beta">0</span>
</div>
<div>
<span>Движение по оси γ (м/с²)</span>
<span class="motion__gamma">0</span>
</div>
<div>
<span>Максимальное значение (м/с²)</span>
<span class="motion__maximum">0</span>
</div>
<div>
<span>Частота событий акселерометра (мс)</span>
<span class="motion__interval">0</span>
</div>
<div>
<span>Положение смартфона по оси γ</span>
<span class="motion__orientation">0</span>
</div>
<div class="motion">
<div>
<span>Наличие движения</span>
<span class="motion__is-motion">false</span>
</div>
<div>
<span>Движение по оси α (м/с²)</span>
<span class="motion__alpha">0</span>
</div>
<div>
<span>Движение по оси β (м/с²)</span>
<span class="motion__beta">0</span>
</div>
<div>
<span>Движение по оси γ (м/с²)</span>
<span class="motion__gamma">0</span>
</div>
<div>
<span>Максимальное значение (м/с²)</span>
<span class="motion__maximum">0</span>
</div>
<div class="settings">
<div class="synthesis-regime">
<span>Стратегия синтеза:</span>
<div>
<span>Положение смартфона по оси γ</span>
<span class="motion__orientation">0</span>
</div>
<div>
<span>Генерируемая частота (Гц)</span>
<span class="motion__frequency">0</span>
</div>
</div>

<div class="notes"></div>

<div class="tuner">
<span class="tuner__min"></span>
<span class="tuner__actual"></span>
<span class="tuner__max"></span>
</div>

<div class="settings">
<div class="synthesis-regime mobile">
<span>Стратегия синтеза:</span>
<div class="synthesis-regime__container">
<div class="radio-element">
<input type="radio" name="synthesis" id="local" value="local" checked />
<label for="local">Локальный</label>
<input type="radio" name="synthesis" id="local" checked />
<label for="local">Локальная</label>
</div>
<div class="radio-element">
<input type="radio" name="synthesis" id="remote" value="remote" />
<label for="remote">Удалённый</label>
<input type="radio" name="synthesis" id="remote" />
<label for="remote">Распределённая</label>
</div>
</div>
<div class="oscillator-regime">
<span>Режим работы осцилляторов:</span>
<div class="radio-element">
<input type="radio" name="oscillator" id="plural" value="plural" checked />
<label for="plural">plural</label>
</div>
</div>

<div class="oscillator-regime">
<span>Режим работы осцилляторов:</span>
<div class="oscillator-regime__container">
<div class="radio-element">
<input type="radio" name="oscillator" id="single" value="single" />
<input type="radio" name="oscillator" id="single" value="single" checked />
<label for="single">single</label>
</div>
<div class="radio-element">
<input type="radio" name="oscillator" id="spatial" value="spatial" />
<label for="spatial">spatial</label>
<input type="radio" name="oscillator" id="plural" value="plural" />
<label for="plural">plural</label>
</div>
</div>
<div class="data-regime">
<span>Источник данных:</span>
</div>

<div class="frequency-regime">
<span>Режим генерации частот:</span>
<div class="frequency-regime__container">
<div class="radio-element">
<input type="radio" name="data-regime" id="maximum" value="maximum" checked />
<label for="maximum">Максимальная скорость</label>
<input type="radio" name="frequency" id="continuous" value="continuous" checked />
<label for="continuous">Непрерывный</label>
</div>
<div class="radio-element">
<input type="radio" name="data-regime" id="different" value="different" />
<label for="different">Отдельные оси</label>
<div class="axis-container">
<div class="axis">
<div class="checkbox-element">
<input type="checkbox" name="different-item" id="alpha" value="alpha" checked />
<label for="different">α</label>
</div>
<div class="checkbox-element">
<input type="checkbox" name="different-item" id="beta" value="beta" />
<label for="different">β</label>
</div>
<div class="checkbox-element">
<input type="checkbox" name="different-item" id="gamma" value="gamma" />
<label for="different">γ</label>
</div>
</div>
</div>
<input type="radio" name="frequency" id="tempered" value="tempered" />
<label for="tempered">Темперированный</label>
</div>
</div>
<div>
<span>Порог срабатывания датчика (м/с²): </span>
<input type="number" name="threshold" class="threshold" value="1" />
</div>
<div>
<span>Тип волны:</span>
<select name="wave" class="wave">
<option value="sine">sine</option>
<option value="square">square</option>
<option value="sawtooth">sawtooth</option>
<option value="triangle">triangle</option>
</select>
</div>
<div>
<span>Длительность тона:</span>
<input type="number" name="duration" class="duration" value="1.2" />
</div>
<div>
<span>Множитель частоты:</span>
<input type="number" name="factor" class="factor" value="20" />
</div>
<div>
<span>Частота фильтра:</span>
<input type="number" name="filter" class="filter" value="600" />
</div>
<div>
<span>Затухание:</span>
<input type="number" name="attenuation" class="attenuation" value="0.0001" />
</div>
<div>
<span>Громкость:</span>
<input type="number" name="gain" class="gain" value="0.08" />
</div>

<div class="frequencies-range">
<span>Диапазон частот:</span>
<div class="frequencies-range__container">
<span>От:</span>
<input type="number" name="frequencies-range-from" class="frequencies-range-from" />
<span>До:</span>
<input type="number" name="frequencies-range-to" class="frequencies-range-to" />
</div>
<div>
<div>Errors:</div>
<div class="errors"></div>
</div>

<div class="notes-range">
<span>Диапазон нот:</span>
<div class="notes-range__container">
<span>От:</span>
<input type="number" name="notes-range-from" class="notes-range-from" />
<span>До:</span>
<input type="number" name="notes-range-to" class="notes-range-to" />
</div>
</div>

<div>
<span>Отсечка датчика (м/с²): </span>
<input type="number" name="threshold" class="threshold" />
</div>
<div>
<span>Тип волны:</span>
<select name="wave" class="wave">
<option value="sine">sine</option>
<option value="square">square</option>
<option value="sawtooth">sawtooth</option>
<option value="triangle">triangle</option>
</select>
</div>
<div class="duration-container">
<span>Длительность тона:</span>
<input type="number" name="duration" class="duration" />
</div>
<div class="attenuation-container">
<span>Затухание:</span>
<input type="number" name="attenuation" class="attenuation" />
</div>
<div>
<span>Частота фильтра:</span>
<input type="number" name="filter" class="filter" />
</div>
<div>
<span>Громкость:</span>
<input type="number" name="gain" class="gain" />
</div>
<div>
<div>Errors:</div>
<div class="errors"></div>
</div>
</div>
<div id="motionSupported"></div>
<div id="orientationSupported"></div>

<div id="motionSupported" class="mobile"></div>
<div id="orientationSupported" class="mobile"></div>
</div>

<div class="button run">Run</div>
<div class="cover">
<div class="title">Audio-Motion Interface</div>
<div class="button run">Run</div>
</div>
</body>
</html>
Loading

0 comments on commit e589f0e

Please sign in to comment.