LIS SINTEZATOR
Веб-синтезатор посвящён серии игр Life is Strange, и, в особенности, главным персонажам франшизы: Макс и Хлое
В веб-синтезаторе представлены
два голоса (мелодии), которые соотносятся к каждому из персонажей. В случае Макс это песня Syd Matters «Obstacles», а конкретно фраза «We played hide and seek in waterfalls». У Хлои — Local Natives «Mt Washington» с фразой «I don’t have to see you right now».Знакомый мотив узнаётся, однако сами голоса видоизменены вручную. Так же при переборе темпов создаётся симбиоз голосов, словно один голос начинает разговор, а второй робко заканчивает его. Так я как автор показываю различия между персонажами, но и их гармонию в судьбоносный момент.01. Этапы создания синтезатора
Изначальный промт для \\claude.ai\\:
«Мне нужно сделать веб-синтезатор, чтобы там работало несколько отдельных звуков, которые активируются при помощи кнопок; биты из korg KR-55 Sample Pack; горизонтальных полос с бегунком, при помощи которых я смогу добавлять или убавлять эффект на сложившуюся мелодию; Осциллятор; Фильтр; Усилитель; Секвенсор; Панель управления. Код не должен быть написан очень сложно, мне нужно понимать, что написано в нём.»Цельный вид синтезатора-референса
Визуальный стиль создавался самостоятельно.Примером визуала является главное меню последней игры серии «Life is Strange: Reunion»
экраны главного меню игры «Life is Strange: Reunion»
Далее я использовала свой дизайн,
чтобы «отсечь» лишние эффекты и сделать максимально чистый интерфейс. В итоге среди инструментов осталось: 2 голоса, темп, скорость, осциллятор (форма волны, октава, расстройка), фильтр (тип, частота, резонанс), эхо (вид, «влажность», обратный ответ) и реверберация («влажность», затухание).Биты и Секвенсор
в инструменте не используются, чтобы не превращать мелодию в набор сложносочинённых звуков. Более важно было передать «диалог» между ними, лёгкий и чистый.02. Элементы дизайна
элементы управления
Так же я разделила голоса на два проигрывателя и придала им свои оттенки: оттенок Макс — более тёплый, осенний мотив, оттенок Хлои — холодный, загадочный, смелый. Иконки для кнопок и главных ползунков голосов отрисовывались самостоятельно и относятся к голосам индивидуально по их характерам и особенностям
ползунки основных секций с голосами
фотокарточки с эффектами
Вместо ползунков, двигающих параметры эффектов, я использовала фотоэлементы из оригинальной серии игр, чтобы тем самым создать эффект многослойности и сблизить голоса с их особенными качествами. Вместо оригинальных названий инструментов и эффектов я придумала подписи, которые подходят персонажам по смыслу и повествованию игры (в которых разбираюсь)
Стикеры-иконки из игры
В качестве декоративных элементов на экране можно встретить стикеры, которые использовались в игре в качестве элементов загрузки, так же внизу лежит стикер с моим автопортретом, выполненный в стилистике артов игры.
Финальный дизайн веб-синтезатора
Главный экран синтезатора
Все плашки имеют прозрачность, а главные плашки — эффект матового стекла
Основной файл \index.html\ собирался из примера кода, сделанного ИИ \claude.ai\. Файлы \base.html\,\mtWashington.html\ и \obstacles.html\ были созданы при помощи ИИ и служили толчком к созданию собственного синтезатора. \claude.ai\ помог при создании и заполнении файла \script.js\ и \script_2.js\. Основным скрипт-файлом является \script_2.js\.
