본문 바로가기
IT & 코딩

렌즈에 따른 피사계 심도 - 자바스크립트 예제

by 에일라거 2018. 5. 12.

* 이 글을 읽기 전 오른쪽 글을 읽으시면 좋습니다 : 렌즈에 따른 피사계 심도

 

* 현재 자바스크립트가 동작하지 않습니다. 곧 수정해 두겠습니다.

 

지난 번에 렌즈와 피사계 심도에 대해 위와 같이 글을 썼는데, 그림과 글로 되어 있어서 좀 더 쉽게! 움직이게! 이해할 수 있게 자바스크립트로 예제를 만들어보았다. 일단 결과물은 아래와 같다.

 

 

조작법은 화면에 나와있는 대로, 각 키에 기능을 할당해 두었다. 

 

* 조작 전 회색 바탕을 마우스로 한 번 클릭하세요

* Q/W : 파란 물체를 좌우로 움직임

* A/S : 주황색 물체를 좌우로 움직임

* E/D : 조리개 조절

* R/F : 줌인아웃(초점거리 변경)

* T/Y : 렌즈를 움직임

* G : 파란색/주황색 물체를 동시에 움직일 수 있게 함 (토글 방식)

* H : 주황색 물체를 안보이게 함 (토글 방식)

 

주황색 물체를 안보이게 하는 기능은 화면이 좀 복잡해 보여서 넣었다.

 

지난 글에서 조리개 값에 따라, 렌즈의 초점거리에 따라, 물체와의 거리에 따라 심도가 달라진다고 설명하였는데 이 프로그램을 통해서 실제로 그러한지 아래에서 간단히 비교해 보자.

 

 

조리개 값에 따른 심도 차이

 

 

주황색 물체를 일단 없애고 파란색 물체에 초점을 맞춘다.

 

 

그리고 주황색 물체를 보면, 조리개 f1.0일 때 착란원 (빨간색 원)이 위 그림과 같다.

 

 

조리개를 조이면 착란원이 쭉쭉쭉 줄어든다. (심도 깊어짐) 이 부분은 머 제일 이해하기 쉬운 듯...

 

 

초점거리에 따른 심도 차이

 

 

먼저 원래 화면 그대로의 상태에서 주황색 착란원의 크기를 기억한다. 그리고 이 상태에서 줌인 (초점거리 늘림).

 

 

그러면 파란색 물체에 초점이 안 맞는다. 일단 물체를 그룹화하고 (G), 렌즈와 물체를 동시에 이동시켜주면서 파란색 물체에 초점이 맞도록 이동. (Q/T 동시에 누를 수 있음)

 

 

결과로, 물체에서 렌즈까지의 거리 및 조리개값이 같을 때 초점거리의 변화에 따라 착란원의 크기가 어마어마하게 차이가 난다. (이 프로그램 상에서 물체와 렌즈의 거리가 가까워서 더 그렇다). 착란원이 크다는 것은 곧 심도가 얕다는 뜻. 조건이 같으면 초점거리가 늘어날수록 심도는 얕아진다.

 

 

거리에 따른 심도 차이

 

이 부분을 지난번에 공식으로 설명하고 말았는데 이번엔 실제 그림으로 보자.

 

 

물체와 렌즈의 거리가 가까운 상태이다. 파란색 물체에 초점이 맞았을 때 주황색 물체의 착란원이 엄청 크다. 이제 다른 조건은 그대로 두고, 물체와 렌즈 사이의 거리를 벌려보자.

 

 

결상되는 크기 자체가 굉장히 작아졌고, 착란원의 크기도 같이 작아졌다. 멀리 있는 것들 (풍경) 을 찍을 때는 심도도 깊어지고 크기도 작아진다. (원근감)

 

아무래도 직접 조작해 가면서 해 보면 내용 이해가 쉬울 것 같아서 만들어 보았다... 최근에 자바스크립트를 배우고 있는데 이런 거 만드는 재미가 쏠쏠하네 ㅎㅎ

댓글