[패스트캠퍼스] 챌린지 3일차 2.22

Part2. Canvas 챕터 01 - 6. SGV 필터 입히기 강의 시작!
 

강의 시작!

이번 강의에서는 SGV 필터를 활용하여 정의한 필터를 캔버스에 적용하는 과정을 다룬다.
이 강의에서 만들 효과는 강의 소개에서 보여줬던 파티클이 겹쳐져있을 떄 끈적끈적하게 붙어있는 느낌이 드는 효과를 만들 예정이다.

이미지 출처 : https://css-tricks.com/shape-blobbing-css/

효과를 만들기 앞서 효과의 기본 원리 중 일부분을 알아보기 위해 위의 이미지를 활용했다.
값이 점점 높아지면 흐릿해지는 blur와 값이 점점 높아지면 색상의 대비값이 높아지는 Contrast를 함께 쓰면 흐릿해지면서도 뚜렷해지는 듯한 모습을 볼 수 있다. 필터 두개를 섞어 쓰게 되면 아래와 같은 효과를 얻을 수 있다고 한다.

이미지 출처 : https://css-tricks.com/shape-blobbing-css/

효과를 넣기 위해서 간단한게 html 파일을 수정했다.

...
    <style>
        html, body{
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas{
            filter: blur(50px) contrast(50);
            background-color: #f1f1f1;
        }
    </style>
...

이러면 끈적끈적한 느낌이 나는 효과가 나기는 하지만 배경색에 따라서 효과가 제각기 다르기 때문에 svg를 활용해서 필터를 적용해서 균일한 컨텐츠를 제공할 수 있다.
index.html에서 canvas의 css 속성은 주석처리를 하고 canvas 태그 아래에 svg 태그와 그 안에 defs태그를 넣어줘서 재사용할 수 있도록 요소들을 정의할 수 있게 해주는 태그이다.
defs 태그 안에 재사용 가능한 필터요소를 정의해준다. filter 태그에 "gooey" 라는 id 값을 넣어주고 그 안에 feGaussianBlur 요소를 넣어 필터를 정의해준다.
feGaussianBlur 태그에는 stdDeviation과 in, result 등 요소 값을 설정해줄 수 있고 이를 css에서 활용할 수 있다.
아래는 index.html을 svg태그를 활용하도록 수정한 코드이다.

...
    <style>
        html, body{
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas{
            filter: url('#gooey')
            /* filter: blur(50px) contrast(50);
            background-color: black; */
        }
    </style>
...
    <svg>
        <defs>
            <filter id="gooey">
                <feGaussianBlur stdDeviation="10" in="SourceGraphic" result="blur1" />
            </filter>
        </defs>
    </svg>
...

이렇게 하면 filter: blur(50px) 을 css에서 사용한 것과 비슷한 효과를 얻을 수 있다. 여기서 contrast 필터를 적용하기 위해서는 feColorMatrix의 태그를 사용해서 in의 값을 blur1로 mode를 metrix로 하고 values를 5x4 형태의 배열값을 입력해주면 된다. values에 배열 형태의 값을 넣기 위해선 한 행은 띄어쓰기 한칸으로 열은 띄어쓰기 두칸으로 구분해주면 된다.
아래는 feColorMatrix의 값을 추가해준 코드이다.

    <svg>
        <defs>
            <filter id="gooey">
                <feGaussianBlur stdDeviation="10" in="SourceGraphic" result="blur1" />
                <feColorMatrix in="blur1" mode="metrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -3" />
            </filter>
        </defs>
    </svg>

여기서 values의 마지막 행의 뒤 두 값을 조절하면 좀 더 끈적끈적한 효과를 얻을 수 있다.

	R	G	B	A	M
R	1	0	0	0	0
G	0	1	0	0	0
B	0	0	1	0	0
A	0	0	0	1	0

이 표는 values 값을 설명하는 것으로 색상값은 그대두고 마지막 A행의 A, M 열값을 변경해주면 색상 값은 그대로 두고 알파값을 조절하면서 Contrast 값을 조절할 수 있다. 이를 테스트가 가능한 PlayGround사이트가 있다. 여기서 다양한 svg filter를 테스트할 수 있다.
 

강의 결과물

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.