2주차 Basic Programming 과제

제출 브랜치

https://github.com/jeongsunyong/thorvg.example/tree/example/basic-programming

과제 진행 내용

ThorVG 공식 튜토리얼의 Basic Programming 파트를 참고하여 Shape 생성과 Path 작성에 사용되는 기본 Drawing API를 확인했습니다. 학습한 커맨드를 개별 확인할 수 있는 예제를 먼저 작성한 뒤, 해당 API를 Gradient, Scene 및 Effect와 조합한 새로운 그래픽 예제를 제작했습니다.

BasicShapeCommands.cpp: 기본 Drawing Command 확인
InteractiveGradientCard.cpp: 기본 Shape를 활용한 응용 그래픽

1. Basic Drawing Command 확인

BasicShapeCommands.cpp에서는 튜토리얼에 안내된 커맨드가 실제로 어떤 도형과 Path를 만드는지 한 화면에서 확인할 수 있도록 구성했습니다.

BasicShapeCommands.cpp

API	확인한 내용
`appendRect()`	좌표와 크기, 모서리 반경을 이용한 둥근 사각형 생성
`appendCircle()`	서로 다른 가로·세로 반경을 이용한 원과 타원 생성
`moveTo()`	선을 그리지 않고 현재 위치를 이동하여 새로운 Sub-path 시작
`lineTo()`	현재 위치에서 지정한 좌표까지 직선 Path 추가
`cubicTo()`	두 개의 Control Point와 End Point를 이용한 Cubic Bézier 곡선 생성
`close()`	Path의 마지막 지점과 시작 지점을 연결하여 닫힌 도형 생성
`appendPath()`	PathCommand와 Point 배열을 이용한 Path 일괄 생성

각 결과에는 해당 API의 이름을 함께 표시했습니다. 이를 통해 커맨드별 결과와 Open Path, Closed Path, Fill 및 Stroke의 차이를 비교했습니다.

2. 신규 그래픽 예제 제작

Interactive Gradient Card

InteractiveGradientCard.cpp

InteractiveGradientCard.cpp에서는 기본 Drawing API로 생성한 둥근 사각형을 중심으로 여러 Shape와 Scene을 조합하여 커서에 반응하는 카드 그래픽을 구현했습니다.

카드는 Hover 전에는 정적인 형태를 가지고, 카드 위로 커서를 이동하면 내부 Gradient와 테두리의 빛이 커서 위치에 따라 Interactive하게 반응합니다. Basic Drawing API로 만든 도형과 Gradient, Blend, Blur, Clip 및 Opacity을 결합해 Component(Card)에 대한 그래픽 효과로 구현하면서, 사용자 입력에 따라 Paint 속성을 갱신하는 과정을 구현하여 ThorVG 그래픽을 동적으로 다루는 방법을 예제로 연습하고자 했습니다.

주요 구현 내용

Shape와 Scene을 이용한 카드 구성

카드는 하나의 Shape가 아닌 여러 레이어들을 쌓아 구성했습니다. ( Card, Card Gradient, 광원, 가장자리 음영, Stroke, Text)

카드와 효과 영역 및 테두리는 Shape::appendRect()로 생성했고, fill(), strokeFill(), strokeWidth()를 사용해 각 Shape의 내부와 외곽선을 설정 & 여러 Shape를 Scene에 추가하여 렌더링 순서를 관리했습니다.

Gradient

카드 내부 색상에는 LinearGradient를 사용
내부 색상은 자동으로 천천히 움직이면서도 커서 위치에 따라 포지션 및 방향 변경

const float px = (pointerX - CenterX) / (CardW * 0.5f);
const float py = (pointerY - CenterY) / (CardH * 0.5f);

const float shiftX = px * 42.0f;
const float shiftY = py * 26.0f;

커서를 따라오는 표면 광원

커서 주변의 밝기 변화 : RadialGradient
Gradient의 중심을 현재 커서 좌표에 배치하고 반경을 카드보다 크게 설정, 커서 주변에 원형 경계가 직접 나타나지 않고, 카드 표면의 밝기가 커서 위치를 기준으로 변화

fill->radial(x, y, 540.0f, x - 35.0f, y - 45.0f, 8.0f);

커서 위치에 반응하는 테두리

카드 중심에서 커서로 향하는 방향 벡터를 계산하고 해당 방향으로 LinearGradient 배치.
같은 색상 구성을 두 개의 테두리에 적용
- 얇은 테두리: 밝은 영역을 선명하게 표현
- 두꺼운 테두리: Gaussian Blur를 적용하여 퍼지는 빛 표현

border->strokeFill(edgeFill);
borderGlow->strokeFill(glowFill);

깊이감과 카드 영역 제한

카드 중앙에서 가장자리로 갈수록 어두워지는 RadialGradient 추가 (깊이)
Scene::clip() 적용

effectLayer->clip(_clip());

실행 방법

meson compile -C builddir BasicShapeCommands
meson compile -C builddir InteractiveGradientCard

.\builddir\src\BasicShapeCommands.exe
.\builddir\src\InteractiveGradientCard.exe

[과제] 2주차) Basic Programming 정선용