Web-технологии

В прошлой части мы поговорили в целом о создании NFT, о модульном синтезаторе, рассмотрели как генерируется случайное число или случайная линия, с помощью которых NFT и приобретает свою ценность, то есть становится уникальным.

Сегодня мы сделаем нечто посерьёзнее, чем рисование случайных линий, построим модульную абстракцию с класса порта

А тут кстати мы делимся полезными приколюхами для фронт-ендов. Если вы новичок, то это для вас.

Хватит пиздеть, пора к делу

Порт — это просто именованное хранилище числа с геттером и сеттером, имеющее своё визуальное представление (например в виде кружочка с подписанным названием). Задача порта — хранить число, переданное ему кабелем в момент вызова метода process() (подробнее о том что это за метод — чуть ниже) и отдавать это число владеющему портом модулю в момент востребования. Ещё порт должен уметь отдавать свои экранные координаты, чтобы движок мог правильно нарисовать кабель из одного порта в другой

Класс Port

class Port {
constructor(x, y, name) {
this.x = x; 
this.y = y;
this.name = name;
}
set(value) {
this.value = value;
}
get() {
return this.value; 
}
get_position() {
return [this.x, this.y];
}
draw() {
// тут надо нарисовать кружочек с координатами this.x
// и this.y и написать рядом с ним this.name
}
}

Дальше нам понадобятся кабели, чтобы передавать значения между портами. Кабель должен хранить в себе ссылки на порты, которые он соединяет, уметь отрисовывать себя и иметь метод process(), в котором он будет перекладывать значение входного порта в выходной. Добавим также параметры scale и offset, задающие масштабирование и сдвиг сигнала при передаче по кабелю.

Класс Wire

class Wire {
constructor(porta, portb, scale=1, offset=0) {
this.porta = porta; 
this.portb = portb;
this.scale = scale;
this.offset = offset; 
}
process() {
this.portb.set(this.porta.get() * this.scale + this.offset);
}
draw() {
let p1 = this.porta.get_position(); // координаты первого порта
let p2 = this.portb.get_position(); // координаты второго порта
// рисуем сплайн из точки p1 в точку p2
}
}

Теперь напишем базовый класс модуля, реализующий в себе всё те же методы process() и draw(), вызываемые на каждый семпл и каждый кадр соответственно. Так как у каждого модуля наверняка будут какие-то входные и выходные порты, сразу создадим под них переменные и методы добавления. Получится примерно так:

Класс Module

class Module {
constructor(x, y, w, h, name) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.name = name;
this.i = []; // входные порты
this.o = []; // выходные порты
}
add_input(port) {
this.i[port.name] = port;
}
add_output(port) {
this.o[port.name] = port;
}
process() {
// здесь будет происходить весь процессинг аудио
}
draw() {
for(var name in this.i) this.i[name].draw(); 
for(var name in this.o) this.o[name].draw(); 
}
}

Наконец, движок. Движок модульного синтезатора должен уметь делать три главных вещи:

2. Отрисовывать модули, вызывая метод draw() каждого из них с некоторым FPS.

3. Уметь соединять модули проводами и пропагировать по ним сигнал.

С учётом этих требований, он будет выглядеть как-то так:

Класс Engine

class Engine {
constructor() {
this.modules = []; 
this.wires = []; 
this.OUT = new InvisiblePort(); 
}
add_module(m) {
this.modules.push(m); 
}
add_wire(oport, iport) {
this.wires.push(new Wire(oport, iport))
}
draw() {
for (const m of this.modules) m.draw(); 
for (const w of this.wires) w.draw(); 
}
process() {
for (const w of this.wires) w.process(); 
for (const m of this.modules) m.process(); 
return this.OUT.get(); 
}
}

Осталось только прикрутить движок к аудиопроцессору webaudio и p5js. И если с p5js всё более-менее понятно (нужно просто вызвать из глобальной функции draw() метод draw() движка), то с аудио есть один нюанс. API onaudioprocess, которое я использовал в своём проекте, уже давно маркируется как deprecated, но так как оно показалось мне удобнее чем audioworklet, я использовал его. В теории этот способ может не работать в каких-то браузерах.

Взаимодействие движка и webaudio API

audioContext = new AudioContext(); 
let scriptNode = audioContext.createScriptProcessor(2048, 0, 1); 

scriptNode.onaudioprocess = function(audioProcessingEvent) {
let outputBuffer = audioProcessingEvent.outputBuffer; 

for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
let outputData = outputBuffer.getChannelData(channel); 
for (let sample = 0; sample < outputData.length; sample++) {
outputData[sample] = engine.process() / 10.0; 
}
}
}

scriptNode.connect(audioContext.destination);

Модули

Для коммуникации модулей друг с другом в реальных системах как правило используется интерфейс CV/GATE. CV это control voltage, управляющее напряжение от -10 до 10 вольт, а GATE — прямоугольный импульс +10В, триггер.

VCO

Напишем в качестве примера один, но самый главный модуль, без которого не обходится ни один патч — VCO. VCO расшифровывается как Voltage Controlled Oscillator — это модуль, осциллирующий на высоте тона, пропорциональной напряжениям на входах CV (control voltage) и FM (frequency modulation). Здесь есть важная деталь — высота тона осциллятора пропорциональна напряжениям на входах, если измерять её в октавах а не в герцах. Эта конвенция называется 1V/OCT, что значит что прирост напряжения на 1 вольт даёт прирост частоты на октаву, то есть в 2 раза. Зная это, напишем модуль VCO с двумя управляющими частотой входами CV и FM.

Класс VCO

class VCO extends Module {
constructor(name, freq, x=-1, y=-1) {
super(name, x, y, 30, 70); 
this.freq = freq; 
this.delta = Math.PI * 2 / (sample_rate / freq); 
this.phase = 0; 
this.add_input(new Port(x=8, y=38, r=7, 'CV')); 
this.add_input(new Port(x=22, y=38, r=7, 'FM')); 
this.add_output(new Port(x=22, y=62, r=7, 'OUT')); 
this.value = 0; 
this.mod = 0; 
}
set_frequency(f) {
this.freq = f; this.delta = Math.PI * 2 / (sample_rate / f); 
}
draw() {
super.draw(); // здесь можно например нарисовать осциллограф
}
process() {
this.value = Math.sin(this.phase); 
this.o['OUT'].set( this.value ); 
this.mod = this.i['CV'].get() + this.i['FM'].get(); 
this.phase += this.delta * Math.pow(2, this.mod); 
if (this.phase > Math.PI * 2) this.phase -= Math.PI * 2; 
}
}

Как работают другие типы модулей и как их написать можно подсмотреть например в исходниках VCV Rack. Вместо разбора их реализации расскажу, что делает и зачем нужен каждый из них.

2. Delay — модуль задержки сигнала. Имеет параметры time, устанавливающий время задержки, dry/wet, отвечающий за смешивание исходного сигнала с задержанным и feedback, регулирующий величину обратной связи.

3. Reverb — ревербератор, имитирующий естественное эхо большого помещения. Довольно сложная штука, реализованная на дилеях и фильтрах, как именно — можно посмотреть здесь и здесь

4. Scale — он же quantizer, штука притягивающая напряжение на входе к ближайшему напряжению, соответствующему ноте находящейся в заданной тональности.

5. Filter — частотный фильтр, low pass или high pass.

Итого

В итоге мы разобрались с вами как создавать NFT проекты и сделали генеративные горы)

Каждый, кто создаст экземпляр этого синтезатора на NFT платформе получит уникальную итерацию значений параметров, тональности, базового сиквенса, визуального оформления. И возможно, получит некоторое удовольствие от залипания в него.

Черкайте комменты, работали ли вы раньше с NFT? Если да, то расскажите про свой опыт :3

Продвинутая реализация каррирования

Выше представлен "продвинутый" вариант функции каррирования.

Когда мы запускаем её, есть две ветви выполнения if:
1. Вызвать сейчас: если количество переданных аргументов args совпадает с количеством аргументов при объявлении функции (func.length) или больше, тогда вызов просто переходит к ней.
2. Частичное применение: в противном случае func не вызывается сразу. Вместо этого, возвращается другая обёртка pass, которая снова применит curried, передав предыдущие аргументы вместе с новыми. Затем при новом вызове мы опять получим либо новое частичное применение (если аргументов недостаточно) либо, наконец, результат.

На картинке выше показано, что произойдёт в случае sum(a, b, c). У неё три аргумента, так что sum.length = 3.

Telegram