의식의 흐름으로 캔버스에 그림그리기

Dengo·2022년 8월 15일
0

Creative Coding

목록 보기
1/1
post-thumbnail

사실 예전부터 하고 싶었어요

작년 초였나.. 유튜브에서 우연히 'Interactive Developer' 라는 이름으로 유튜브를 하고 있는 분의 영상을 보게 되었다.
구글에서 일 하고 계시는 김종민 님의 포트폴리오 영상이었는데 그 영상을 보고 마음이 많이 움직였던 것 같다.
영상 링크 : https://www.youtube.com/watch?v=TzNQs85fL1w&t=572s

캡쳐한 사진은 화면에 보이는 작은 사진에 효과를 입혔더니 저런 만화경 효과가 나왔다는 대목이다.
이 영상을 계기로 종민님의 제작물을 몇 개 더 보게되었는데 상당한 흥미를 느꼈다.

종민님은 이 분야를 Interactive Coding이라고 부르시기도 하지만 더 많이 표현되는 것은 Creative Coding이라고 설명해주셨다. 주로 디자인 적 영감을 인스타그램같은 SNS를 통해 본인이 영감을 느끼는 사람들을 팔로우하면서 깨달은게 많았다고 했다.

Creative Coding이라는 키워드로 나 또한 그간 인스타그램을 통해서 많은 코더들이 만든 결과물들을 보게 되었고 그 과정에서 three.js라던지 p5.js 같은 라이브러리가 있다는 사실도 알게 되었지만 근본적으로 HTML Canvas와 JavaScript를 사용해서 만들어 보는 것이 선행되어야 겠다고 생각했다.

순전히 취미활동으로써 그냥 바로 p5.js를 사용하고 싶기도 했지만 또 한 편으로는 뭐 급할게 있나 싶기도 하고 해서 캔버스를 먼저 사용해 보았다.

연습하다가 만들어 버렸다


의식의 흐름이 이렇게 되었다.
1. 음.. moveTo, lineTo를 쓰면은 선을 그릴 수 있구나
2. 반복문을 쓰면은 선으로 이루어진 박스를 그릴 수 있네
3. 그럼 원도 그릴 수 있겠네? (시작점 은 중심점, 끝은 중심점 + 반지름 * cos, sin)
4. 원을 반복문을 사용해서 그리면 많이 그릴 수 있겠네 ㅋ 기왕이면 랜덤으로
5. 검정색이니까 칙칙하네 랜덤으로 색도 바꿔볼까?
6. rgb 값을 기본적으로 높은 값들을 랜덤으로 하면 어떨까? -> 랜덤의 파스텔톤이 나옴
7. 원을 많이 그리면 화면이 꽉 차면서 자연스러운 파스텔 톤의 블러가 나오지 않을까?
8. 반지름도 랜덤으로 하면...?

대충 이렇게 하다보니 저런 화면이 완성되었다.
첫 시도 치고 나름 예쁜 화면을 만들어서 만족스러움
그래서 원래는 파일 이름을 practice.js라고 지었다가 pastel-circle-blur.js라고 변경했다.
저런 효과를 고급스럽게 부르는 이름이 있을거 같긴 한데 걍 대충 지었다.

어쨌든 저 화면은 새로고침 할때마다 다른 사진이 나온다. (랜덤이니까)
이걸 만들면서 또 떠오른 영감은
이번에는 너무 많이 원을 만들지 않은 상태에서 대신에 마우스를 원이랑 가까이 하면 마우스랑 가까운 선이 더 길어지게 하는 애니메이션 효과를 넣으면 (멀어지면 다시 짧아지게 됨)
재밌는 인터렉션이 되지 않을까? 생각하게 되었다.
물론 아직은 애니메이션을 잘 활용하지 못해서 못한다.
그냥 상상만...

profile
Software Engineer (전산쟁이)

0개의 댓글