히드라란?

Hydra는 Olivia Jack이 만든 대화형 시각 예술을 만들기 위한 JavaScript 라이브러리입니다. API는 한 프로세스의 출력이 다음 프로세스로 공급되는 아날로그 비디오 합성기처럼 작동하도록 설계되었습니다.

Image: Sandin Image Processor, exhibited at School of the Art Institute of Chicago (SAIC), photographed by Rosa Menkman, https://commons.wikimedia.org/wiki/File:Sandin\_Image\_Processor.jpg

Hydra는 결과 출력을 가져와 fragment shader element.

이 기사에서는 히드라 스케치를 만드는 데 필요한 세 가지 기본 요소인 소스, 수정자 및 출력에 대해 설명합니다. 시작하기

로 렌더링되는 을 구성합니다.

코드 예제를 따라 하려면 https://hydra.ojack.xyz/에서 hydra 편집기를 사용할 수 있습니다.

출처

소스는 모든 히드라 스케치의 시작 입력입니다. hydra에서 제공하는 몇 가지 미리 정의된 조각 셰이더가 있습니다. osc부터 살펴보겠습니다.

오실레이터는 화면의 x 좌표를 가져와 사인파를 통해 전달하며 기본적으로 검은색(vec3(0.0,0.0,0.0) )과 흰색(vec3(1.0,1.0,1.0) ) 사이를 계속 이동합니다.



오실레이터를 렌더링하기 위해 소스 함수에 out 함수를 첨부합니다.

osc().out()

osc 함수는 주파수, 속도 및 오프셋의 세 가지 매개변수를 사용합니다.

주파수는 사인파에 대해 전체 주기가 걸리는 시간 또는 기본적으로 화면에 나타나는 밴드 수에 영향을 미칩니다(기본값: 60)

속도는 오실레이터가 왼쪽으로 이동하는 속도에 영향을 미칩니다(기본값: 1.0)

오프셋은 빨간색, 녹색 및 파란색 채널 사이의 거리에 영향을 미칩니다(기본값: 0)

osc(10, 0.1, 0.3).out()

gradient , noise , shape , solid 또는 voronoi 를 사용하면 어떻게 되는지 확인하십시오.

수식어

수정자는 이전 프로세스에서 픽셀 데이터를 가져와 조작하고 다른 수정자 또는 출력 채널에 전달할 수 있는 새 함수를 반환합니다.

예를 들어 오실레이터를 90도 회전시킬 수 있습니다. WebGL로 작업하고 있으므로 각도를 라디안으로 변환해야 합니다.



이를 설정하는 쉬운 방법은 <DEGREES> * Math.PI / 180를 사용하는 것입니다.

osc(10, 0.1, 0.3).rotate(90 * Math.PI / 180).out()
// or
osc(10, 0.1, 0.3).rotate(Math.PI * 0.5).out()

모든 매개변수는 함수 또는 배열로 정의할 수 있으므로 시간이 지남에 따라 회전을 변경할 수 있습니다.

osc(10, 0.1, 0.3)
.rotate((args) => {
   const d = args.time * 0.1
   return Math.PI * d
})
.out()


const r1 = Math.PI * 0.5
const r2 = Math.PI * 0.25

osc(10, 0.1, 0.3)
.rotate([r1, r2])
.out()

saturate를 사용하여 셰이더의 채도를 높일 수도 있습니다.

osc(10, 0.1, 0.3).rotate(Math.PI * 0.5).saturate(5).out()

add , blend , mult 와 같은 연산자를 사용하여 레이어를 혼합할 수도 있습니다.

const triangle = shape(3, 0.4).scrollY(0.07).rotate(Math.PI)

osc(10, 0.1, 0.3)
.rotate(Math.PI * 0.5)
.saturate(5)
.mult(triangle)
.out()

산출

Hydra에는 네 가지 가능한 출력 버퍼가 있습니다. 기본적으로 out 셰이더를 첫 번째 버퍼 또는 o0로 보냅니다. 매개변수 없이 render 함수를 사용하여 4개의 버퍼를 모두 관찰할 수 있습니다.

osc().out(o0)
noise().out(o1)
shape().out(o2)
voronoi().out(o3)

render()

버퍼 이름을 매개변수로 전달하여 단일 버퍼 표시로 전환할 수 있습니다.

render(o2)

실험!

이제 소스, 수정자 및 출력 버퍼를 포함하여 hydra의 구문에 익숙해졌으므로 여러 가지 방법으로 함수를 함께 연결하여 몇 가지 재미있는 시각적 개체를 만드는 탐색을 시작할 수 있습니다!

추가 리소스:

Hydra Github 리포지토리: https://github.com/hydra-synth/hydra

모든 히드라 기능: https://github.com/hydra-synth/hydra/blob/main/docs/funcs.md

2019년 2월 NYU Hydra 워크숍 소개: https://www.slideshare.net/ZachKrall/hydra-workshop-nyu-live-code-lab-feb-2019