[javascript] 자바스크립트를 활용하여 파도 효과에 대한 사용자 설정 옵션 추가하기

01 Dec 2023

javascript

웹 디자인에서 파도 효과는 사용자에게 동적이고 시각적으로 매력적인 경험을 제공합니다. 이러한 효과를 자바스크립트를 이용해서 구현해봅시다. 더 나아가 사용자가 원하는 형태와 속도로 파도 효과를 조정할 수 있는 사용자 설정 옵션을 추가하는 방법에 대해서도 알아보겠습니다.

파도 효과 구현하기

먼저, 파도 효과를 구현하기 위해 자바스크립트 라이브러리인 p5.js를 사용하겠습니다. p5.js는 HTML5 캔버스를 간단하게 다룰 수 있는 라이브러리로, 다양한 그래픽 효과와 상호작용을 구현할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        function setup() {
            createCanvas(400, 400);
        }

        function draw() {
            background(220);
            // 파도 효과 그리기
            // ...
        }
    </script>
</body>
</html>

위 코드에서 setup() 함수는 캔버스를 생성하고, draw() 함수는 매 프레임마다 호출되어 화면을 갱신합니다. 여기에 파도 효과를 그리는 코드를 추가해야 합니다.

파도 효과 그리기

draw() 함수 내에서 파도 효과를 그리기 위해 2차원 배열을 사용할 수 있습니다. 배열의 각 요소에는 파도의 높이 정보를 저장하고, 이를 기반으로 파도를 그릴 수 있습니다.

// 파도 높이를 저장하는 2차원 배열
var heights = [];

// 캔버스의 크기에 맞게 배열 초기화
function initializeHeights() {
    for (var x = 0; x < width; x++) {
        heights[x] = [];
        for (var y = 0; y < height; y++) {
            heights[x][y] = 0;
        }
    }
}

// 파도 효과 그리기
function drawWave() {
    for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
            // 각 픽셀에 따라 파도의 높이 조정
            heights[x][y] = sin(frameCount * 0.05 + x * 0.1 + y * 0.1) * 50;
            // 파도 그리기
            stroke(0);
            point(x, y + heights[x][y]);
        }
    }
}

function setup() {
    createCanvas(400, 400);
    initializeHeights();
}

function draw() {
    background(220);
    drawWave();
}

위 코드에서 initializeHeights() 함수는 2차원 배열 heights를 캔버스의 크기에 맞게 초기화합니다. 그리고 drawWave() 함수에서는 각 픽셀마다 파도의 높이를 계산하고, 그에 따라 파도를 그립니다.

사용자 설정 옵션 추가하기

사용자가 파도 효과의 형태와 속도를 조정할 수 있는 기능을 추가해보겠습니다. 이를 위해 HTML의 <input> 요소를 사용하여 사용자 입력을 받을 수 있습니다.

<select id="wave-shape" onchange="changeWaveShape()">
    <option value="sine">Sine</option>
    <option value="square">Square</option>
    <option value="triangle">Triangle</option>
    <option value="sawtooth">Sawtooth</option>
</select>

<input type="range" id="wave-speed" min="0" max="1" step="0.1" value="0.05" onchange="changeWaveSpeed()">

<script>
    var waveShape;
    var waveSpeed;

    function changeWaveShape() {
        waveShape = document.getElementById("wave-shape").value;
    }

    function changeWaveSpeed() {
        waveSpeed = document.getElementById("wave-speed").value;
    }

    function drawWave() {
        for (var x = 0; x < width; x++) {
            for (var y = 0; y < height; y++) {
                if (waveShape === "sine") {
                    heights[x][y] = sin(frameCount * waveSpeed + x * 0.1 + y * 0.1) * 50;
                } else if (waveShape === "square") {
                    heights[x][y] = (frameCount % round(width * waveSpeed) < round(width * waveSpeed / 2)) ? 50 : -50;
                } else if (waveShape === "triangle") {
                    heights[x][y] = abs(frameCount % round(width * waveSpeed) - round(width * waveSpeed / 2)) / (round(width * waveSpeed / 2)) * 50 * 2 - 50;
                } else if (waveShape === "sawtooth") {
                    heights[x][y] = map(frameCount % round(width * waveSpeed), 0, round(width * waveSpeed), -50, 50);
                }
                stroke(0);
                point(x, y + heights[x][y]);
            }
        }
    }
</script>

위 코드에서는 <select> 요소로 파도의 형태를 선택하고, <input type="range"> 요소로 파도의 속도를 조정할 수 있습니다. 이렇게 입력된 값을 자바스크립트 변수에 저장하고, drawWave() 함수에서 사용하여 파도를 그립니다.

마치며

이제 자바스크립트를 활용하여 파도 효과를 구현하고, 사용자 설정 옵션을 추가하는 방법에 대해 알아보았습니다. 이를 응용하여 더 다양한 효과를 구현해보거나, 파도 효과를 웹 페이지의 백그라운드에 적용해보는 등의 활용 방법을 생각해볼 수 있습니다.

더 많은 정보와 예제는 아래의 참고 자료를 확인해보세요.