https://www.youtube.com/watch?v=0myFda9ae0E&list=WL&index=13
해당 동영상을 보고 영감을 받았다. 파스타 머신을 이용하여 사진을 자르고 배치하여 사진이 아날로그식으로 압축되는게 특히 인상깊었다.
2021년에 처음으로 이 동영상을 보고 웹으로 이를 구현해본 것이 시작이었는데, 그 때는 완성도가 높지 않았다.
https://luckypear.io/shredder/
간단하게 쇄절기의 힘(Force)를 바꿀 수 있고, 그 힘에 따라 이미지가 재배열되는 형태의 프로젝트이다. 완성도 면에서 아쉬움이 남는 이유는 잘리고 이어붙어지는 과정을 애니메이션의 형태로 보여주지 못했다. 그래서 이런 아쉬움을 달래고자 이번에는 동영상처럼 전부 다 구현 해보자 싶었다.
이번엔 애니메이션을 제대로 구현하기 위해서 2D 그래픽스 라이브러리인 Skia 환경에서 구현하기로 정했다. Skia로 사용하게 되면 앱 환경 뿐만 아니라 웹에서도 구동이 가능해서 다양한 디바이스에서 내가 원하는 형태로 개발이 가능할 것이라고 생각했다.
유저는 사진을 드래그하여 파스타 머신에 넣게 된다. 중앙에 위치한 파스타머신을 지나게되면 이미지는 세로로 잘리게 된다.
세로로 잘라주기 위해서는 “마치 세로로 잘린듯한” 효과가 중요하다. 다양한 방법이 있겠지만 여기서는 텍스쳐 매핑을 통해서 이를 해결해 주었다. 세로선에 따라서 각각 버텍스에 텍스쳐로 매핑해준다. 이렇게 하면 각 세로선의 버텍스가 달라져도 매핑된 텍스쳐가 같이 이동하게 되므로 “마치 세로로 잘린듯한” 효과를 누릴 수가 있다.
삼각형 형태로 그어진 검은선은 Skeleton으로 이게 없으면 세로로 잘렸다는 사실을 시각적으로 알 수가 없어서 표시해 두었다. 그렇다는 것은 다시말해 이 선이 사라지면 잘린 것 처럼 보이지 않는 다는 뜻이다. 그래서 잘린 것 처럼 보여주기 위한 시각적인 효과가 어떤 것이 있을까 하다가 각 좌표를 드래그 할 때마다 랜덤하게 배치해 주었다.
드래그하는 행위 자체가 파스타 머신의 손잡이를 돌리는 행위라고 치환해서 생각할 수 있는데, 이게 바로 드래그할 때마다 랜덤하게 배치해 준 이유이다. 실제 손잡이를 돌리면서 종이는 달그락 달그락 흩날리게 되는데 이 모양을 노이즈 효과로 구현할 수 있었다.
chromatic-noise-24340c49afbd7146f3b04f86ed5a0357.mp4
간단하게 설명하자면
const simplex = new SimplexNoise();
const delta = simplex.noise2D(index, frequency * y) * amplitude;