v424 완전 초짜 VVVV : 2D를 표현하는 GDI Renderer ▷GDI RENDERER VVVV 안에서 이미지를 표현하려면 Renderer(랜더러)를 사용해야 한다. 기본적으로 사용할 수 있는 renderer는 2D를 표현하는 GDI Renderer 와 3D를 표현하는 EX9 Renderer가 있다. 이중 이번 포스팅에서는 2D 이미지를 보여주는 GDI Renderer 노드에 대해 살펴본다. ▷GDI RENDERER(+Point / Circle 노드) 먼저 GDI Renderer는 처음에 삽입하면 개별 창으로 뜬다. 이럴 경우 한눈에 잘 안보이기 때문에 ALT + 2 를 눌러 VVVV안에 Renderer 창을 삽입 할 수 있다. renderer 창이 띄워지면 창 안에 이미지를 표시하는데는 다른 노드가 필요하다. 기본적인 이미지 표현 노드로 Point 노드와 Circ.. 2021. 2. 1. 완전 초짜 VVVV : 키보드 입력과 랜덤 인터랙션 이전 글에서 기본적인 키보드 입력 노드인 keyboard / keymatch 노드와 그 활용법에 대해서 알아보았다.(완전 초짜 VVVV : 키보드 입력) 이번에는 multiflipflop 노드를 활용한 키보드 입력값의 수치화와 Random 노드를 통한 난수 생성에 대해 배워본다. ▷키보드 입력과 난수(random) 생성 작품 구 위에 외부 데이터를 텍스처로 입히고, 그 데이터를 키보드 방향키로 변경시키는 작품이다. 또 배경색은 다른 방향키를 누를 때마다 랜덤하게 바뀌게 구성한 작품이다. 영상을 통해 어떠게 조작되는지 확인할 수 있다. 자 그럼, 어떤 노드를 어떻게 활용했을까? ▷MultiFlipFlop / Random MultiFlipFlop 노드를 통해 방향키 위, 아래, 좌, 우 의 값을 숫자 0~3.. 2021. 1. 31. 완전 초짜 VVVV : 비교연산과 불린 연산 ▷비교연산 비교 연산을 다룰 수 있는 노드를 살펴보자. 비교 연산이란 말 그대로 크다, 작다, 같다 등의 수치값을 비교하는 연산을 말한다. = / = 의 5가지의 노드들의 아웃풋핀에 토글박스를 연결하면, 인풋핀의 값이 참일 경우는 토글박스가 켜지고 인풋핀의 값이 거짓일 경우는 토글박스가 꺼지게 표현된다. ▷불린 연산 불린 연산은 참 혹은 거짓을 판별하는 노드이다. AND노드는 인풋핀의 값이 모두 참일 경우만 참으로 표현되지만, OR노드의 경우 인풋핏 둘 중 하나만 참이어도 참으로 표현된다. 위의 비교연산 노드와 마찮가지로, 아웃풋핀에 토글박스를 연결하면 토글박스의 켜지거나 꺼진 상태를 보고 참 거짓을 판별할 수 있다. ▷change 노드 / toggle 노드 / flipflop 노드 유사한 .. 2021. 1. 30. 완전 초짜 VVVV : 큐(QUEUE) 스프레드 ▷큐(queue) 노드 큐(queue)가 뭔지 모르겠어서 구글에 검색해보니 위와 같은 이미지가 나온다. 여러 사람이 줄지어 서 있는 것 같은 모습을 큐(queue)라고 한다고 한다. 큐(queue)는 이처럼 연속적인 사건(값)의 나열이다. 큐(queue)노드는 입력되는 자료를 연속되는 값의 흐름으로 나타내주는 노드이다. 위의 사진은 큐(queue)노드를 활용해 마우스의 움직임을 선의 흐름으로 표현한 출력 값이다. 이때 Insert는 시작 스위치, Frame Count는 큐스프레드로 만들 자료의 수이다. 하지만 큐스프레드 값의 흐름을 눈으로 확인하기 위해선, 이렇게 큐노드가 처리한 데이터를 표현할 수 있는 아웃풋박스가 필요하다. 위의 사진처럼, 넘버박스의 inspektor를 수정해서 물결치는 박스형태로 만.. 2021. 1. 29. 완전 초짜 VVVV : 스프레드의 슬라이스 값 다루기 ▷스프레드의 슬라이스 값 다루기(CircularSpread노드 / GerSlice노드) 이번에는 스프레드 속에서 개별 슬라이스 값을 추출하거나 분리, 병합해보려고 한다. 즉, 일련의 데이터들 속에서 개별 데이터 값을 추출해 활용하는 것이다. 위의 사진에서는 CircularSpread 노드를 활용해 원형으로 스프레드를 만들었다. 현재 자료는 포인터들의 좌표값이다. 이런 스프레드에서 개별 데이터를 추출하기 위해 GetSlice 노드를 활용한다. GetSlice 노드의 첫번째 인풋핀은 받아드리는 데이터의 수, 두번째 인풋핀은 추출하고자 하는 데이터의 위치이다. 현재, 10 / 6 의 값을 주었기 때문에 10개의 데이터 중 6번째 데이터를 추출한다는 뜻이다.(단, 시작이 0번부터이므로 6번째 값은 -0.43이 .. 2021. 1. 28. 완전 초짜 VVVV : 수식의 활용/ 선 없는 데이터를 연결 ▷순차적 연산 위는 일반적인 연산 방법이다. VVVV는 이렇게 위에서 아래로 가는 순차의 흐름대로 연산이 이뤄진다. 하지만 연산을 할때마다 이렇게 일일이 나열하면서 해야 한다면, 복잡한 연산에서는 매우 불편할 것이다. ▷수식의 활용 Expr노드 Expr 노드를 활용하면, 복잡한 계산도 쉽고 간결하게 표현할 수 있다. Expr 노드를 삽입 후 inspektor(ctrl + L)를 열어, variable name(변수명)에 필요한 변수를 생성하고 Term에 표현하고자 하는 수식을 작성하면 Expr 노드는 해당 수식대로 연산을 진행하는 노드로 기능한다. 이때, 인풋핀에 A, B, C, D 변수의 순서대로 정확하게 데이터값을 입력해야 한다. ▷선 없는 데이터 연결 : S(Sender) 노드와 R(Reciever.. 2021. 1. 27. 완전 초짜 VVVV : 웹캠 영상을 텍스처로 renderer 위에 출력된 다양한 도형에 다양한 자료들을 텍스쳐로 입히는 방법을 배우고 있다. 이번엔 웹캠 영상까지 텍스쳐로 입혀본다. ▷VideoIn과 VideoTexture Sphere나 Transform 노드는 이미 많이 사용해서 익숙하다. Sphere와 Transform 노드로 renderer 위에 구가 생성되면, 웹캠을 덮기 위해 VideoIn과 VideoTexture 노드를 사용한다. VideoIn은 웹캠을 실행시켜서 그 데이터를 VVVV로 가져오는 역할이라면 VideoTexture는 그렇게 가져온 웹캠 데이터를 구 위에 입히는 역할을 한다.(VideoIn 노드를 사용하기 위해 필수적으로 필요한 인풋값들이 있음을 알기!) ▷VideoIn과 VideoTexture 활용 예제(영상 동시 송출) .. 2021. 1. 26. 완전 초짜 VVVV : 마우스 인터랙션으로 그림판 기능 구현 ▷Mouse 노드와 renderer 활용1 저번에 배운 Mouse 노드를 활용해 renderer에 그림판 기능을 구현해보려고 한다. Mouse 노드와 unzip 노드의 활용은 이전 포스팅 완전 초짜 VVVV : 마우스 좌표값과 상태를 확인해보시면 된다. Mouse 노드와 Point 노드를 연결해 renderer 창 위에 마우스 포인터를 따라 마킹이 생기는 기능을 만들 수 있다. Mouse 노드의 오른쪽 클릭 핀과 renderer의 clear 핀(2번째 인풋핀)을 토글박스로 연결하면 마우스로 오른쪽 클릭을 하면 renderer 위의 모든 포인터가 지워지는 효과를 구현할 수 있다. ▷Mouse 노드와 renderer 활용2 이번엔 추가기능 구현이다. 중요한 건 Mouse 노드의 어떤 핀과 어떤 노드가 연결되.. 2021. 1. 25. 완전 초짜 VVVV : 불규칙한 수치데이터 다듬기 불규칙적인 데이터를 바로 그래픽화 시켜 사용하다보면, 너무 급작스러운 변화 때문에 부자연스럽게 느껴질때가 있다. 따라서 보다 자연스러운 그래픽으로 만들기 위해선 수치 데이터를 다듬을 필요가 있다. 불규칙한 수치 데이터를 다듬을 때는 크게 2가지 노드를 사용한다. WaveShaper 와 Damper 이다. ▷WaveShaper WaveShaper는 인풋된 데이터들을 그래프의 파형모양으로 다듬어서 활용하는 노드이다. 크게 5가지 shape를 고를 수 있다. -Linear : 선형 / 최소값에서 최대값으로까지 상승하고 다시 처음인 최소값으로 돌아오는 방식 -inverse : 역순형 / 최대값에서 최소값으로 하락하고 다시 처음인 최대값으로 돌아오는 방식 -triangle : 삼각형 / 최소값에서 최대값으로 점차.. 2021. 1. 22. 이전 1 2 3 다음
