자바스크립트로 바이오리듬 애니메이션 만들기

18 Oct 2023

javascript

바이오리듬은 생물의 생리적인 주기를 나타내는 그래프입니다. 이 주기는 심장 박동, 수면 패턴 등과 같은 생리적 활동에 영향을 줄 수 있습니다. 이번 포스트에서는 자바스크립트를 사용하여 바이오리듬을 시각화하는 간단한 애니메이션을 만드는 방법을 알아보겠습니다.

HTML 및 CSS 설정

<!DOCTYPE html>
<html>
<head>
    <title>바이오리듬 애니메이션</title>
    <style>
        #biorhythm {
            width: 500px;
            height: 400px;
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            position: relative;
            overflow: hidden;
        }
        #biorhythm .cycle {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #3498db;
            width: 1px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="biorhythm"></div>
</body>
</html>

위 코드는 바이오리듬 애니메이션을 표시할 HTML 구조와 기본적인 CSS 스타일을 설정한 부분입니다. biorhythm이라는 ID를 가지는 div 요소가 바이오리듬 그래프를 표시할 공간입니다.

자바스크립트로 애니메이션 구현

window.addEventListener('DOMContentLoaded', function() {
    var biorhythm = document.getElementById('biorhythm');
    var cycle = document.createElement('div');
    cycle.className = 'cycle';
    biorhythm.appendChild(cycle);

    var cycleSpeed = 0.02; // 바이오리듬 애니메이션의 속도
    var amplitude = 150; // 그래프의 세로 크기
    var phaseShift = 0; // 그래프의 위상 변화

    function animate() {
        var time = performance.now() / 1000;

        // 그래프의 위치 계산
        var y = Math.sin(2 * Math.PI * cycleSpeed * time + phaseShift) * amplitude;

        // 그래프 이동
        cycle.style.left = (time * 100) + 'px';
        cycle.style.top = (biorhythm.offsetHeight / 2 + y) + 'px';

        requestAnimationFrame(animate);
    }

    animate();
});

위의 자바스크립트 코드는 애니메이션을 구현하는 부분입니다. DOMContentLoaded 이벤트가 발생하면 바이오리듬 애니메이션을 시작합니다.

cycleSpeed 변수는 애니메이션의 속도를 조절합니다. 작을수록 느리게 움직이고, 클수록 빠르게 움직입니다. amplitude 변수는 그래프의 세로 크기를 조절하며, phaseShift 변수는 그래프의 위상 변화를 조절합니다.

animate 함수는 requestAnimationFrame을 사용하여 애니메이션을 렌더링합니다. 함수 내부에서는 현재 시간을 기반으로 그래프의 위치를 계산하고, cycle 요소의 left와 top 속성을 조정하여 그래프를 움직입니다. 애니메이션이 끊임없이 반복되도록 재귀적으로 호출됩니다.

실행 결과 및 정리

위의 코드를 실행하면 바이오리듬 애니메이션이 표시됩니다. cycleSpeed, amplitude, phaseShift 값에 따라 그래프의 움직임과 형태가 변화합니다. 이를 수정하여 원하는 바이오리듬 애니메이션을 만들어볼 수 있습니다.

이번 포스트에서는 자바스크립트를 사용하여 간단한 바이오리듬 애니메이션을 만드는 방법을 알아보았습니다. 바이오리듬 애니메이션을 활용하여 다양한 웹 프로젝트나 생체정보 관련 앱을 개발할 수 있을 것입니다.

참고 자료: