본문 바로가기
교육은 한 사람의 인생을 바꾼다/AI교육

완전 초짜 VVVV : 마우스 인터랙션으로 그림판 기능 구현

by 함께 만드는 블로그 2021. 1. 25.
반응형

▷Mouse 노드와 renderer 활용1

 저번에 배운 Mouse 노드를 활용해 renderer에 그림판 기능을 구현해보려고 한다. Mouse 노드와 unzip 노드의 활용은 이전 포스팅 완전 초짜 VVVV : 마우스 좌표값과 상태를 확인해보시면 된다. 

 Mouse 노드와 Point 노드를 연결해 renderer 창 위에 마우스 포인터를 따라 마킹이 생기는 기능을 만들 수 있다.

 Mouse 노드의 오른쪽 클릭 핀과 renderer의 clear 핀(2번째 인풋핀)을 토글박스로 연결하면 마우스로 오른쪽 클릭을 하면 renderer 위의 모든 포인터가 지워지는 효과를 구현할 수 있다.

   


 

▷Mouse 노드와 renderer 활용2

 이번엔 추가기능 구현이다. 중요한 건 Mouse 노드의 어떤 핀과 어떤 노드가 연결되었는지 확인하는 것이다. Mouse 노드의 왼쪽 클릭핀을 Point 노드의 enable과 토글박스로 연결하면, 왼쪽 클릭을 하고 있어야 마우스를 따라 마킹이 생기는 기능을 만들 수 있다.

 

 이후 Mouse 노드의 휠핀과 Point 노드의 팬컬러 핀을 HSL 노드를 활용해 연결해 휠을 돌릴때마다 팬 색깔이 바뀌게 만들 수 있다. 실제 노드들이 어떻게 작동하는지 아래 데모 영상을 통해 확인해보자

 


 

▷마우스  인터랙션으로 그림판 기능 구현 데모 영상

 

반응형

댓글