Визуальные эффекты живого кодирования
Hydra — это платформа JavaScript, используемая для создания визуальных эффектов живого кодирования. Живое кодирование — это процесс выполнения программы и наблюдения за изменениями, представленными во время выполнения. Hydra позволяет легко создавать «заплатки» в браузере для получения множества различных типов изображений. Эти патчи представляют собой серию функций JavaScript, которые связаны друг с другом, чтобы сгибать и ломать цвета и формы, чтобы создавать изображения по своему вкусу.
Есть 5 основных типов функций, которые Hydra реализовала, чтобы сделать эти визуальные эффекты возможными; источник, цвет, геометрия, смесь, модуляция. Это основные компоненты для создания суперпсиходелических и потрясающих визуальных эффектов на экране.
Исходные функции будут началом любого патча и определят начальную точку отрисовки изображения. Существует noise(), который может принимать два параметра: один для масштаба «шума», создаваемого на экране, а второй — для смещения, которое вы хотите, чтобы этот шум постоянно сбрасывался. Это создаст вещи, которые будут быстро перемещаться, например, хлопать рукой по воде в случайных местах и анализировать поверхность. Существует также veronoi(), который будет принимать параметры масштаба, скорости и смешивания, которые будут определять размер, скорость движения и модульность между каждым изображением соответственно. Этот напоминает мне кирпичи, которые уходят с пути, чтобы попасть в «Косой переулок» в «Гарри Поттере», за исключением того, что кирпичи имеют другую форму. Следующим, вероятно, одной из моих любимых отправных точек в Гидре, является осциллятор osc(), который принимает параметры частоты, синхронизации и смещения, чтобы определить скорость движения вперед и назад, синхронное поведение и то, как смещение от отправная точка, к которой можно вернуться. Они изменяют поведение и цвет изображения многими различными и интересными способами, прежде чем даже связывать какие-либо другие типы функций. Существует также функция shape(), которая создаст форму на основе переданных параметров, первая из которых определяет количество сторон, вторая определяет радиус, а третья определяет гладкость формы. Существуют и другие методы начальной точки, такие как gradient(), src() и solid(), которые будут создавать различные начальные шаблоны на основе переданных аргументов.
voronoi().color(8,3, 44)
.rotate(({time}) =>(time%360)/20)
.modulate(osc(5,.1,0.5)
.kaleid(58).scale(({time})=>
Math.sin(time*50)*5).
modulate(noise(0.6,0.5)),0.5)
.out(o0)
Цветовые функции могут создать основу желаемой цветовой палитры в Hydra. Хотя некоторые исходные функции добавляют цвет в зависимости от их функциональности, цветовые функции позволяют вам лучше контролировать, какие цвета размещаются и когда. Функция color() принимает три параметра: скорости r, g и b, которые представляют уровни «rgb» с любыми пронумерованными значениями, которые вы передаете для каждого из них. Функции brightness() , contrast() , saturate() и hue() будут выполнять именно те общие эффекты изображения, в честь которых они названы, что поможет вам достичь желаемой конкретной настройки изображения. Есть еще несколько функций цветовых эффектов, таких как posterize() , shift() и invert() , которые помогут разработчику еще глубже погрузиться в цвета на экране, особенно когда задействовано больше цепочек в ваших патчах.
a.setScale(5) osc().modulate(noise(7),()=>a.fft[0]) .color(0,2, 34) .kaleid(48) .scrollX([-0.2, 0.2]) .out(o0)
Функции геометрии не только добавляют размеры и форму к изображению, но также создают различные положения изображения (или набора изображений), которыми человек манипулирует. Функция pixelate() превратит изображение в «пиксельную» версию визуализируемого изображения с параметрами pixelX и pixelY, а числа, переданные в качестве аргументов, будут количеством пикселей в соответствующих позициях. Метод repeat() будет создавать копии изображения на основе переданного ему числа, а также позиций x и y, если вы решите использовать эти параметры. Метод kaleid() (сокращение от kaleidoscope) — один из моих любимых, так как он берет все, что находится перед ним в цепочке в патче, и превращает его в калейдоскопический узор, количество сторон также можно установить в качестве параметра. Метод rotate() принимает 2 параметра, первый из которых будет вращать изображение в определенном направлении и останавливаться в указанной пронумерованной позиции, а второй параметр будет фактически непрерывно вращать все изображение с указанной скоростью. Как вы понимаете, это довольно гипнотизирует (или вызывает головную боль, в зависимости от того, кого вы спросите). Конечно, есть и другие, такие как scroll() и scale(), которые также добавят больше размеров и глубины вашим геометрическим аспектам.
shape(2,0.8) .kaleid(()=>6+Math.sin(time)*4) .out(o0)
Функции смешивания — это больше вспомогательные функции, такие как эффекты, которые можно добавить к ранее упомянутому стилю функций. Они добавляют элемент перехода и глубины к шаблонам для создания более сложных эффектов. Метод sub() добавит текстуру, а также количество текстуры, которое вы видите при рендеринге в патче. Параметр текстуры может быть целым исходным методом, и именно здесь мы познакомимся с замечательными функциональными возможностями JavaScript в Hydra. blend() создаст два изображения, которые модулируются вместе определенным образом, например, первый параметр может быть простой формой, тогда вторым аргументом будет массив измерений, которые вы хотите, чтобы второе изображение отображалось как. Вы также можете использовать метод layer() в своем патче, чтобы добавить целый слой, определяемый текстурой, и «наложить» его поверх исходного вида с заданной скоростью. Есть и другие похожие функции, такие как diff() , mult() и mask() , которые помогут добавить сложности этим изображениям, чтобы сделать их все более и более уникальными (и на них интересно смотреть!).
osc(9,0.1,2) .mult(osc(13,0.5,5)) .out()
Методы модуляции являются более сложными версиями геометрических методов, поскольку они принимают больше параметров и целых текстур, к которым применяются эти геометрические эффекты. modulateRepeat() примет текстуру, а также другие необязательные параметры, которые устанавливают частоту повторения по осям x и y, а также еще два параметра, которые устанавливают «смещение» осей x и y. Метод modulateKaleid() примет текстуру и число, которое будет равно «n» количеству сторон. Это дает очень интересный эффект и добавляет больше деталей к изображению. На самом деле, все методы типа модуляции добавляют этот уровень детализации и сложности вашим патчам. Все они являются модулированными версиями геометрических функций, таких как modulateScroll(), modulatePixelate() и modulateRotate().
osc(40,0.2,1) .modulateScale(osc(-40,0,1).kaleid(80)) .repeat(2) .modulate(o0,0.05) .modulateKaleid(shape(4,320,69)) .out(o0)
Существуют и другие категории методов, такие как «внешние источники», «настройки синтезатора», «аудио» и «массив». Наиболее важным для метода живого кодирования, вероятно, является метод аудио «fft», который позволяет изображениям реагировать на музыку с ()=>a.fft[0], привязанным к вашему патчу. Внешние методы позволяют использовать источник веб-камеры или источники изображений в качестве шаблонов для исходных представлений о результате исправления. Метод bpm() позволит вам явно указать скорость модуляции, вращения или колебаний до определенного количества «ударов в минуту». Все это объединяется, чтобы создавать действительно крутые и развлекательные эффекты для любых творческих начинаний как для любителей кодирования, так и для любителей искусства.
Живой и простой в использовании/изучении аспект является главной особенностью Hydra как визуальной платформы живого кодирования. Именно по этой причине Оливия Джек, создательница Hydra, построила эту платформу визуализации. Тот факт, что Hydra работает в браузере, также повышает ее привлекательность, поскольку позволяет программисту отображать изображения в максимально возможном масштабе по сравнению с другими визуализаторами живого кодирования, которые используют двухпанельную систему. Вы можете начать самостоятельно по этой ссылке здесь!
Источники:
