HTML5 <canvas>를 사용하여 간단한 파티클 시뮬레이션을 만드는 방법을 단계별로 설명해 드리겠습니다.
HTML 파일 생성:
먼저 HTML 파일을 생성하고 파티클 시뮬레이션을 렌더링할 <canvas> 요소를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>파티클 시뮬레이션</title>
</head>
<body>
<canvas id="particle-canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
CSS 스타일 시트 생성:
파티클 시뮬레이션의 스타일을 정의하기 위한 CSS 파일(styles.css)을 생성합니다.
/* styles.css */
body {
margin: 0;
overflow: hidden;
}
canvas {
background-color: #000;
display: block;
}
JavaScript 파일 생성:
파티클 시뮬레이션을 구현하기 위한 JavaScript 파일(script.js)을 생성하고 다음과 같이 코드를 작성합니다.
// script.js
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
class Particle {
constructor() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.size = Math.random() * 5 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.1;
}
draw() {
ctx.fillStyle = 'white';
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
function init() {
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
init();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].size <= 0.3) {
particles.splice(i, 1);
i--;
}
}
requestAnimationFrame(animate);
}
animate();
결과 확인:
웹 브라우저에서 HTML 파일을 열어 파티클 시뮬레이션을 확인합니다.
'HTML 예제' 카테고리의 다른 글
| Hello, World! 출력 (0) | 2023.12.07 |
|---|---|
| 시계 애플리케이션: JavaScript로 디지털 시계 애플리케이션 만들기 (2) | 2023.12.06 |
| 사진 슬라이드 쇼: JavaScript로 사진 슬라이드 쇼 만들기 (1) | 2023.12.06 |
| 실시간 통계: JavaScript로 실시간 통계 표시 (0) | 2023.12.06 |
| 도넛 차트: JavaScript와 HTML5 <canvas>로 도넛 차트 생성 (0) | 2023.12.06 |
