2023. 5. 23. 21:35ㆍ개인노트-인강
인터랙티브 웹 개발 Canvas 인강 정리
# SVG 필터 입히기
- SVG 필터를 활용해서 canvas에 우리가 정의한 filter를 입혀서 끈적끈적해 보이는 이팩트. 즉, gooey(끈적끈적한) 이펙트에 대해 알아보겠습니다.
## gooey 이펙트 구현을 위한 기본 원리
- 구현을 위해서는 Blur 와 Contrast 효과를 함께 사용해야 합니다.
- Blur 효과를 적용한 뒤, contrast를 적용하면 아래와 같이 경계 영역에서 연결된 형태의 gooey 이펙트가 생깁니다.
## css 정의를 통한 gooey 효과 주기 및 단점
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
filter: blur(10px) contrast(10);
background-color: #f1f1f1;
}
</style>
</head>
<body>
<canvas></canvas>
<script type="module" src="./index.js"></script>
</body>
</html>- css filter로 glur와 contrast 값을 10씩 효과를 주면 gooey 효과가 나타납니다. 이 값을 높여주면 ( 예 : 50씩) gooey 효과가 더 강해집니다.
### css filter로 gooey 효과 주기의 단점
- 하지만 이 css filter의 단점은 뒤에 배경색상이 있어야 동작이 되다보니, 배경 색상에 따라서 우리가 원하는 파티클 색상이 아니라 대비되는 색상으로 변경되어버립니다.
- 예를 들어 배경색상이 없다면 contrast 효과가 일어나지 않고, 배경색상이 있어도 배경색상에 따라 원래의 파티클 색상이 아닌 대비되는 색상으로 바뀌어 버립니다.
## svg 필터를 이용한 gooey 효과 주기
- 그래서 css의 필터가 아니라, svg 안에서 가지고 있는 필터 속성을 활용해서 이 css 필터에 우리가 정의한 custom 필터를 입혀주는 더 좋은 방법이 있습니다.
- <defs> 태그 : 재 사용할 수 있도록 요소들을 정의할 때 사용합니다. 이 곳에 각종 필터들을 정의할 수 있고, 클리핑 마스크처럼 svg를 마스킹 처리를 할 때, 마스킹 처리 영역 또한 이곳에서 정의할 수 있습니다. 그리고 circle이나 rect와 같은 태그들을 직접 svg에 넣어서 바로 사용하는 것이 아니라 마치 react.js의 재사용 컴포넌트들을 정의하는 것처럼 이곳에 다양한 그려진 형태 또한 미리 정의만 해둘수 있다고 생각하면 됩니다.
- 우리예제에서는 <defs> 에 재사용 가능한 필터를 정의합니다.
- 사용되는 svg 필터들 : <feGaussianBlur /> <feColorMatrix />
### 코드
### feGaussianBlur Element
- Blur 효과를 적용해줍니다.
stdDeviation 속성
- 첫번째 값은 가로의 Blur 값을 담당하고, 두번째 값은 세로의 Blur 값을 담당합니다.
- 이미지 슬라이더에 속도가 빠른것처럼 보이게 하기 위해서, 가로 값만 활용해서 이미지 슬라이더를 만드는 예제들도 인터넷을 검색해보면 있습니다.
- 값을 하나만 사용하게 된다면 가로, 세로 값이 전부 적용되어 우리가 일반적으로 사용하게되는 Blur 처리와 같게됩니다.
in 속성
- 이 필터가 어디에 입혀지게되는지 정의합니다.
- SourceGraphic 값을 주게 되면 canvas 엘리먼트에 다이렉트로 적용이 됩니다.
result 속성
- 필터의 이름을 정의합니다.
### feColorMatrix Element
- contrast 효과를 적용해줍니다.
in 속성
- feColorMatrix에서 정의한 값을 in에 값으로 넣은 효과이름에 적용해줍니다.
mode 속성
- mode에는 여러가지가 있습니다.
- 우리는 값으로 matrix 를 사용하고 5x4 행렬 형태로 된 매트릭스 값 안에서 일부 값만 수정해 줄 것입니다.
values 속성
- matrix의 값을 입력해줍니다.
- 기본적으로는 "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" 값을 입력합니다.
- 위 values 값으로는 아무 변화도 없습니다. 마지막 행의 값을 0 0 0 20 -3 으로 수정해 주면 gooey 효과가 조금 생깁니다.
- 0 0 0 100 -23 으로 변경하면 gooey 효과가 더 강해집니다.
### 최종코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
filter: url("#gooey");
/* filter: blur(10px) contrast(10);
background-color: #f1f1f1; */
}
</style>
</head>
<body>
<canvas></canvas>
<svg>
<defs>
<filter id="gooey">
<feGaussianBlur stdDeviation="40" in="SourceGraphic" result="blur1" />
<feColorMatrix
in="blur1"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -23"
/>
</filter>
</defs>
</svg>
<script type="module" src="./index.js"></script>
</body>
</html>
## SVG 필터들 미리 테스트해보기
https://yoksel.github.io/svg-filters/#/
'개인노트-인강' 카테고리의 다른 글
| 개인 노트 정리) Canvas - 1-07. dat GUI 활용하기 (0) | 2023.06.01 |
|---|---|
| 개인 노트 정리) Node.js 백엔드 part 1-5 require와 모듈, 모듈의 레졸루션 (0) | 2023.05.25 |
| 개인 노트 정리) Canvas - 1-05. 파티클에 가속도 주기 (0) | 2023.05.23 |
| 개인 노트 정리) Canvas - 1-04. 파티클 애니메이션 시키기 (0) | 2023.05.22 |
| 개인 노트 정리) Canvas - 1-03. 파티클 그리기 (0) | 2023.05.21 |