문어 다리 잘린 면을 화면 밖으로 미는 데 반나절
메인 화면에 문어 다리 사진을 오브젝트로 띄웠다. 배경은 따져 있는데, 다리가 프레임 밖으로 나가는 쪽은 당연히 잘려 있다.
그 잘린 면이 화면 한가운데 떠 있으니 스티커 같았다. 붙여넣은 티가 났다.
어느 쪽이 잘렸나
화면 밖으로 밀면 된다. 문제는 어느 변이 잘린 면인지였다. 눈으로 보면 알 것 같은데 확신이 안 섰다. 다리가 대각선으로 누워 있어서 위인지 왼쪽인지 애매했다.
캔버스에 그려서 네 변의 알파를 셌다.
위 27.5%
아래 0
왼쪽 0
오른쪽 0위였다. 상단 모서리의 27.5% 구간에 불투명 픽셀이 닿아 있었다.
세우면 왼쪽으로 간다
반시계로 90도 돌리면 위가 왼쪽으로 간다. 세로로 세우고 싶기도 했으니 겸사겸사 돌렸다.
이제 잘린 면이 왼쪽이니 왼쪽으로 밀면 된다. 화면 밖으로 나가면 안 보인다.
여기까지는 30분이면 됐다.
그 뒤가 길었다
문제는 이게 한 번으로 안 끝난다는 거였다.
오브젝트 깊이를 바꿨다. 크기가 달라지면서 잘린 면이 화면 안으로 다시 들어왔다. 다시 쟀다.
크기를 뷰포트에 묶었다. 창 크기에 따라 오브젝트가 줄어드니 또 들어왔다. 다시 쟀다.
무게중심 맞추느라 위치를 옮겼다. 또 쟀다.
여백이 이렇게 오갔다.
63px → 0px → 17px → 4px → 24px0px 이 나왔을 때가 제일 아찔했다. 딱 경계에 걸려서, 마우스를 움직여 화면이 기울면 단면이 슬쩍 보였다 말았다 했다.
결국 스크립트를 짰다
가로 위치를 후보값으로 바꿔가며, 다섯 가지 기울기 상태에서 화면 밖 여백의 최솟값을 재는 코드를 짰다.
x=2 최소 여백 46px
x=4 최소 여백 27px
x=6 최소 여백 9px
x=8 최소 여백 -10px ← 단면 노출x=4 를 골랐다. 27px 이면 어떤 기울기에서도 안 보인다.
사진 한 장 때문에 스크립트를 짰다. 좀 과한가 싶었는데, 그 뒤로 위치를 세 번 더 바꿨으니 결과적으로는 이득이었다.
남은 것
이 사진을 다른 걸로 바꾸면 위 과정을 처음부터 다시 해야 한다. 알파를 다시 재고, 어느 쪽이 잘렸는지 보고, 여백을 다시 잡고.
애초에 잘린 면이 없는 사진을 쓰면 이런 일이 없다. 그런데 잘린 면이 있어서 화면 밖으로 이어지는 느낌이 나는 거라, 그게 이 화면에서 제일 마음에 드는 부분이기도 하다.
계속 재는 쪽을 택했다.