티스토리 물결(Wave)를 만들어보자!

안녕하십니까.

 

야생에서 출몰한 하프입니다. 🫠

 

블로그에 다음과 같이 아름다운 웨이브를 만들어보도록 합시다

 

별자리랑 웨이브가 있으니 정말 아름답네요 😊

 

📝 목차

 

 

웨이브

1. 사용 기술

이번에도 사용한건 Javascript Canvas 입니다.

찾아보니, hero Waves 라는것도 있고 svg 웨이브 마스크를 사용한 방법도 있더라구요.

 

hero Waves : https://codepen.io/KrzysiekF/pen/oNNLwZq

svg Wave :  https://wsss.tistory.com/1520

 

기존에 있는건 식상하니! 만들어 보도록 합시다!

 

 

2. 기술 구상

우선 어떻게 만들지 정해야 겠지요!

저는 "인터렉티브 디벨로퍼 김종민"님의 영상을 참고 했습니다.

 

 

 

 

일단 동그라미를 여러개 그리고 생각해봅시다.

 

 

흠 🤔 우선 움직임을 설정해야 하는데, 위로 올라갔다가 아래로 내려가도록 설정할겁니다.

그렇다는건 삼각함수에서 sin 파형으로 움직이면서 위아래로 움직이면 될 것 같군요!

출처 : https://infograph.tistory.com/228

 

 

 

sin함수로 각각의 시간차를 둔다고 하면 수식은 다음과 같이 되겠네요!

/**
 * i : 반복문 index
 * this.cur : 누적된 시간
 * bandWidth : 진폭
 */
let x = posX * i;
let y = this.canvas.height / 2 + Math.sin((this.cur + (i + 1)) / Math.PI * 2) * bandWidth;

 

 

 

그럼 결과적으로는 이렇게 될 겁니다!

 

context.lineTo를 이용해 각각 점에서 점끼리 line을 그려주게 되면

요렇게 될것입니다!

 

 

여기다가 context.quadraticCurveTo를 사용해서 곡선을 만들어주면!!

삐뚤어졌긴 했지만.. 웨...웨이브가! 될 겁니다 

대신 코드를 수정해야겠지요!

/**
 * i : 반복문 index
 * this.cur : 누적된 시간
 * bandWidth : 진폭
 * prevX : 이전 x값
 * prevY : 이전 y값
 */
let x = posX * i;
let y = this.canvas.height / 2 + Math.sin((this.cur + (i + 1)) / Math.PI * 2) * bandWidth;
let cx = (prevX + x) / 2;
let cy = (prevY + y) / 2;
this.ctx.quadraticCurveTo(prevX, prevY, cx, cy);

 

 

 

 

결과론적으론.. 이게 끝 입니다 🤣

크게.. 들어간 기술이다! 이런건 아니니 .. 참고만 하시면 될 듯 합니다!

 

 

3. 시행착오

전에서부터 만들어봤어서, 크게 어려움은 없었습니다.

단지 어려움이 있었다 라고 한다면, javascript canvas를 컨트롤할 때 파일 두개로 분할하면 안된다는 점..? 인거 같네요.

 

저는 당연히 되겠거니 하며, 별자리 따로 웨이브 따로 설정을 해주었지만 

별자리가 되면 웨이브가 안되고

웨이브가 되면 별자리가 안되는..? 하나를 포기해야 하는 상황에 놓여져 있었습니다.

 

이 상황을 해결하기 위해

Canvas Controller로 앞에 두고

하단으로 Wave모듈, Constellation모듈로 나누어 하나로 합친다음 그려주는 방식으로 설정을 했습니다.

 

즉, 하나의 파일에 다 때려박아야 한다는 소리죠 ㅎㅎ ㅠㅠ ..

 

 

관련한 문제로 구글링을 많이 해보았지만, 저와 같이 시도를 한 케이스가 없는것처럼

자료가 없네요.. 🤔

분명 누군가도 시도해봤을만 한데.. 왜 없을까요 ㅠ

---

적용 방법

1. 파일 다운로드

우선 파일을 다운로드 받아주세요.

별자리_웨이브.zip

0.00MB

 

 

 

2. 파일 업로드

압축된 파일들을.. 다 올려주시면 됩니다. (css제외)

 

 

3. HTML & CSS 편집

 <script src="./images/canvas_controller.js" type="module"></script>
 
 ...생략
 
 <header id="header">
 <!-- 원하는곳에 canvas태그 추가 -->
	<canvas id="wave_canvas"></canvas>
 </header>

 

/* 별자리, 웨이브 추가 */
#constellation {
  display: none;
  position: relative;
  transform-style: preserve-3d;
}
#wave_canvas {
  display: none;
  position: relative;
  transform-style: preserve-3d;
}

#tt-body-page #constellation {
    background-image: linear-gradient(145deg, #0b1425, #4e4354, #d4a7be);
    width: 100%;
    height: 400px;
    cursor: none;
    display: block;
}

#tt-body-page #wave_canvas {
  margin-top: -200px;
  display: block;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0);
}

 

 

4. 결과 확인

아름다운 결과를 확인하실 수 있습니다!

 

See the Pen Untitled by Kimjinwon (@hdev1004) on CodePen.