[javascript] 자바스크립트를 활용한 파도 움직임 시뮬레이션 구현 방법

01 Dec 2023

javascript

이번에는 자바스크립트를 사용하여 파도 움직임을 시뮬레이션하는 방법에 대해 알아보겠습니다. 파도 움직임은 정적인 이미지가 아니라 동적인 움직임을 가지고 있어 시각적으로 흥미로운 효과를 낼 수 있습니다.

1. HTML 파일 설정하기

먼저, HTML 파일을 생성하고 내용을 작성해줍니다. 아래 예시 코드를 참고해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>파도 움직임 시뮬레이션</title>
    <style>
        #wave {
            width: 600px;
            height: 400px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="wave"></div>

    <script src="wave.js"></script>
</body>
</html>

위 코드에서는 파도 움직임을 보여줄 <div> 요소를 추가하고, 스타일을 설정해줍니다. 자바스크립트 파일은 “wave.js”로 설정되어 있습니다.

2. 자바스크립트 파일 작성하기

이제 파도 움직임을 시뮬레이션하는 자바스크립트 파일을 작성해봅시다. 아래 예시 코드를 참고해주세요.

const wave = document.getElementById('wave');
const width = wave.offsetWidth;
const height = wave.offsetHeight;

let phase = 0;
const amplitude = 50;
const frequency = 0.02;
const speed = 0.1;

function updateWave() {
  const frame = requestAnimationFrame(updateWave);

  phase += speed;

  for (let x = 0; x < width; x++) {
    const y = amplitude * Math.sin(frequency * x + phase);
    const color = `hsl(${x / width * 360}, 100%, 50%)`;

    wave.style.setProperty('--y', y);
    wave.style.setProperty('--color', color);
  }
}

updateWave();

위 코드에서는 자바스크립트로 파도 움직임을 생성합니다. 파도는 삼각함수(sin)를 활용하여 움직이고, 주기, 속도, 진폭을 변수로 설정할 수 있습니다.

3. CSS 파일 작성하기

파도의 스타일을 설정하기 위해 CSS 파일을 작성해야 합니다. 아래 예시 코드를 참고하여 wave.css 파일을 작성해주세요.

#wave {
  --y: 0;
  --color: #ff0000;

  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000, var(--color));
  overflow: hidden;
}

#wave::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color);
  bottom: calc(-50% + var(--y));
  transform-origin: bottom center;
  transform: scaleY(2);
}

위 코드에서는 #wave 요소의 배경색과 높이를 설정하며, ::before 을 사용하여 파도를 그립니다. 파도의 높이와 색상을 변수로 설정하여 동적으로 제어할 수 있습니다.

4. 결과 확인하기

이제 작성한 파일들을 웹 브라우저에서 실행해보세요. 파도가 움직이는 효과를 볼 수 있을 것입니다. 필요에 따라 파라미터를 수정하여 원하는 파도 효과를 얻을 수 있습니다.

결론

이번 포스트에서는 자바스크립트를 사용하여 파도 움직임을 시뮬레이션하는 방법에 대해 알아보았습니다. 파도 움직임은 CSS와 자바스크립트를 조합하여 역동적인 시각적 효과를 낼 수 있는 좋은 방법입니다. 자유롭게 파라미터를 조정하며 다양한 파도 효과를 구현해보세요!