'흐름' 인터렉티브 웹 작업

2024. 1. 9. 01:04상명대학교 포트폴리오

 

 

작업사이트 링크 : 

https://nam031001.github.io/IMD232_FIN_202220255/

 

  • 제목 - 흐름 
  • 공개 연도 - 2023.12.18
  • 인터렉티브 웹 작업, js 작업물, 사이트를 이용해 접근한다.
  • 상명대학교 커뮤니케이션디자인전공 인터랙티브미디어디자인 수업 기말 프로젝트

'흐름' 을 주제로 하여 파티클의 이동과 색상을 이용한 인터렉티브 웹 작업을 디자인, 제작했다. 카메라에 비추는 물체의 크기, 색상을 반영하여 화면상에 동일한 비례와 색상으로 해당 파티클들이 나타나도록 한다. 실제로 기기 상에 등록된 카메라 앱을 실행한 후 해당 카메라에 물체를 갖다 대면 그 카메라 화면상에 존재하는 물체의 색상이 작업에 반영되어 카메라에서 확인되는 물체의 위치 그대로 작업 내에서 해당 색상의 파티클들이 생성되는 것을 볼 수 있다.

 

클릭 - 소리를 내며 방향 전환 / 마우스를 캔버스 위로 이동할 시 - 파티클의 크기가 작아짐 / 마우스를 캔버스 아래로 이동할 시 - 파티클의 크기가 커짐 / 영타 a - 새로고침

등의 부가 기능을 가진다.

 

 

 

 

레퍼런스

https://openprocessing.org/sketch/813503 

https://www.youtube.com/watch?v=sZBfLgfsvSk&list=LL&index=14