index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
outline: 0;
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: #161e38;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="module" src="./js/main.js"></script>
</body>
</html>
js > main.js
import { WaveGroup } from "./wavegroup.js";
class App {
constructor() {
// 1. 캔버스 생성하기
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
document.body.appendChild(this.canvas);
//웨이브 그룹생성하기
this.WaveGroup = new WaveGroup();
// 2. window 사이즈 조절 될 때
window.addEventListener('resize', this.resize.bind(this),false);
this.resize();
window.requestAnimationFrame(this.animate.bind(this));
}
// 사이즈 조절 될 때 크기
resize() {
this.stageWidth = document.body.clientWidth;
this.stageHeight = document.body.clientHeight;
// 2배(* 2) ? 고화질의 캔버스 위해
this.canvas.width = this.stageWidth * 2;
this.canvas.height = this.stageHeight * 2;
this.ctx.scale(2,2);
//웹이브 리사이즈하기
this.WaveGroup.resize(this.stageWidth, this.stageHeight);
}
animate(t) {
// animate 할 때마다 화면 지우기
this.ctx.clearRect(0,0,this.stageWidth, this.stageHeight);
// 그려주기
this.WaveGroup.draw(this.ctx);
window.requestAnimationFrame(this.animate.bind(this));
}
}
window.onload = () => {
new App(); // 로드 될 때 App 생성 // 캔버스 하나 만들어짐
}
js > wavegroup.js
import { Wave } from "./wave.js";
// 여러개의 점을 만들어주기 위해서 그룹을 생성
export class WaveGroup {
constructor() {
this.totalWavers = 3;
this.totalPoints = 6;
// 컬러배열을 만들어서 세가지 컬러를 넣음.
this.color = ['rgba(0,199,235,0.4)','rgba(0,146,199,0.4)','rgba(0,87,158,0.4)']
// 배열생성;
this.waves = [];
//3개의 웨이브를 생성
for (let i = 0; i < this.totalWavers; i++) {
const wave = new Wave(
i,
this.totalPoints,
this.color[i],
);
this.waves[i] = wave; // i 번째에 생성되는 웨이브 넣기
}
}
//웨이브 함수처럼 resize와 draw가 있음.
resize(stageWidth, stageHeight) {
for (let i =0; i< this.totalWavers; i++) {
const wave = this.waves[i];
wave.resize(stageWidth, stageHeight);
}
}
draw(ctx) {
for (let i = 0; i < this.totalWavers; i++) {
const wave = this.waves[i];
wave.draw(ctx); // 그리기
}
}
}
js > wave.js
import { Point } from "./point.js";
export class Wave {
constructor(index, totalPoints, color) {
this.index = index;
this.totalPoints = totalPoints;
this.color = color;
this.points = [];
}
resize(stageWidth, stageHeight) {
this.stageWidth = stageWidth;
this.stageHeight = stageHeight;
this.centerX = stageWidth / 2;
this.centerY = stageHeight / 2;
//포인트 생성간격
this.pointGap = this.stageWidth / (this.totalPoints - 1);
this.init();
}
//포인트를 생성 좌표는 화명 중앙으로
init(){
//포인트 배열을 생성
this.points = [];
for (let i = 0; i<this.totalPoints; i++){
const point = new Point(
this.index + i,
this.pointGap * i,
this.centerY,
);
//배열에 순서대로 포인트객체를 생성해서 넣음
this.points[i] = point; // i 번째에 포인트 넣기
}
}
draw(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
let prevX = this.points[0].x;
let prevY = this.points[0].y;
ctx.moveTo(prevX, prevY);
//첫번째와 마지막 점은 그위치에 두고 나머지만 업데이트
for (let i = 1; i< this.totalPoints; i++){
if (i < this.totalPoints - 1) {
this.points[i].update();
}
const cx = (prevX + this.points[i].x) / 2;
const cy = (prevY + this.points[i].y) / 2;
//곡선으로 변경
ctx.quadraticCurveTo(prevX, prevY, cx, cy);
prevX = this.points[i].x;
prevY = this.points[i].y;
}
ctx.lineTo(prevX, prevY);
ctx.lineTo(this.stageWidth, this.stageHeight);
ctx.lineTo(this.points[0].x, this.stageHeight);
ctx.fill();
ctx.closePath();
// ctx.arc(this.point.x, this.point.y, 30, 0, 2 * Math.PI);
// ctx.fill();
}
}
js > point.js
// 내보내기
export class Point {
// 점 만들기
constructor(index, x,y) {
this.x = x;
this.y = y;
this.fixedY = y;
this.speed = 0.01;
this.cur = index;
// 랜덤 0~100 + 150
this.max = Math.random() * 100 + 150;
}
// 점 움직이게하기
update() {
this.cur += this.speed;
// Math.sin() 코사인 함수, 위아래로 부드럽게 움직이게 하는 값을 받아줌
this.y = this.fixedY + (Math.sin(this.cur) * this.max);
}
}
