아이디어
한자는 뭔가 한 글자 한 글자가 그림처럼 느껴지는 면이 있다. 익숙한 글자는 그림보다 글자로 받아들이기 때문에 이런 점이 덜한데, 모양이 복잡하거나 여러 선이 섞여 있는 글자일수록 의미보다 구조에 집중하게 된다. 익숙한 글자더라도 변화를 주어 한 번에 의미를 파악하기 어렵게 만들면 자형의 구조적 특징에 집중할 수 있지 않을까, 하는 의문이 들었다. 그래서 빛과 그림자를 이용해 보기로 했다. 글자를 그대로 보여주지 않고 그림자를 통해 간접적으로 보여주어 글자로서 받아들이지 않고 그림으로서 받아들이도록 만들고자 했다.
구현
const pointerX = event.pageX - POINTER_RADIUS;
const pointerY = event.pageY - POINTER_RADIUS;
const distanceX = centerX - pointerX;
const distanceY = centerY - pointerY;
const distance = (distanceX ** 2 + distanceY ** 2) ** 0.5;
const shadowX = (distanceX / distance) * LENGTH;
const shadowY = (distanceY / distance) * LENGTH;구현은 크게 어렵지 않았다. 마우스 위치를 광원으로 삼아 반대쪽에 그림자가 생기도록 만들었다. 저번과 마찬가지로 색을 변하게 만들면 더 생동감이 느껴질 것 같아 그 부분도 추가했다.
const hue =
Math.round((Math.atan(distanceX / distanceY) / Math.PI + 0.5) * 180) +
(distanceY > 0 ? 0 : 180);
letter.style.filter = `drop-shadow(${shadowX}px ${shadowY}px 0px hsl(${hue}, 100%, 60%))`;역시나 네온 사인 느낌의 강한 색을 내고 싶어서 HSL을 이용했고, 마우스 각도에 따라 색상이 바뀌도록 만들기 위해 atan 함수를 이용했다.
결과물
그림자의 위치나 글자 레이아웃을 바꿔가며 여러 가지로 시험해 봤지만 이게 가장 깔끔한 모습인 것 같아 이렇게 완성했다.
