canvas / 자바스크립트로 화려한 인터렉션 구현
출처: https://www.youtube.com/watch?v=Yvz_axxWG4Y&t=994s
main subject
<canvas></canvas>
이 캔버스 컨테이너는 그래픽 컨텐츠를 담는 박스
이 박스안에 무언가를 그려넣으려면 자바스크립트를 작성해야한다,
자세한 기초 내용은 이곳을 참고하고
https://unikys.tistory.com/274
why should i use this?
일단 html에 이미 내장되어있음 = 내가 다운받아서 쓸 필요도 없고
자바스크립트로 마음껏 컨트롤해서 다양하게 구현이 가능하다.
사실 이렇게 애니메이션 주는 자바스크립트 라이브러리가 한두개가 아니다
이전 포스팅인 pixi.js도 결국 애니메이션때문이고
요즘 프론트엔드 대세인 스크롤애니메이션효과 같은걸 쓸때 이런걸 많이 사용하기때문에
연습삼아 이것저것 해보는중이다 (굳이 따지자면.. 자바스크립트 연습?)
그리고 캔버스만으로 그려보고 이 캔버스를 사용하여서 3d그래픽 렌더링해주는 플러그인 ex) three.js
같은것도 사용해 볼 예정이다
유튜브따라 화려한 마우스 인터렉션 그래픽을 구현해보자
기본셋팅은 매우 간단
html, css, js 파일 만들고 파일들 연결하고
html- <canvas id="canvas1"></canvas>
css- #canvas1 {position: absolute;top: 0;left: 0;
background: #000;width: 100%;height: 100%;}
js- const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
기본셋팅 끝
전체적인 코드는 깃허브 참고하고 https://github.com/minyeokang/canvas
여기서는 중요한거만 노트
<마우스 클릭 이벤트 발생시 원형이 마우스 클릭한 위치에 생성>
1. mouse 변수 만들고 초기값은 null주고 이벤트리스너 안에 event인자로 받고 mouse.x = event.x
이렇게 위치 정해주고
2. 원형을 만드는 코드를 함수로 만들어서 함수구문 추가
원형 만드는 코드는
function drawCircle(){
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 50, 0, Math.PI * 2);
ctx.fill();
}
//이벤트가 mousemove라면 마우스 움직이는대로 원형이 그려짐
<마우스 이벤트 발생 말고 그냥 화면에 원형이 랜덤하게 생성>
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(animate);
}
animate();
requestAnimationFrame 이게 loop처럼 저 코드를 계속 반복시켜서 위에 적어둔 코드 다 없애버리는 역할
const particlesArray = []; 빈 배열 만들어주고
class로 템플릿 만들어주기
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
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;
}
draw() {
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
그리고 반복문으로 불러주기
function init(){
for (let i = 0; i < 100; i++) {
particlesArray.push(new Particle());
}
init()
function handleParticles() {
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
particlesArray[i].draw();
}
}
그리고 이 handleParticles를 animate 함수안에 넣어주면 기능 구현 완성
여기서 원형 사이즈를 줄이고
this.size = Math.random() * 15 + 1;
클래스 안에 draw에 this.size로 바꿔주고
클래스 안에 update에 if (this.size > 0.2) this.size -= 0.1; 사이즈 줄이고
handleParticles함수 안에 생성 후 사이즈 작아지게 해서 완전 작아지면 전부 없어지게끔 코드작성
if (particlesArray[i].size <= 0.3) {
particlesArray.splice(i, 1);
i--;
}
그리고 이 코드를 이벤트리스너 안으로 이동시켜서 클릭하면 점들이 와르르생기고 없어지게 구현
init함수안에 있던 코드들을 click,mousemove이벤트리스너안에 넣고
점들이 퍼지는 느낌을 주려면 animate함수안에 clearRect 주석처리하고
ctx.fillStyle = "rgba(0,0,0,0.1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); 생성해주고
점들에 색깔 넣으려면 hue라는 변수를 초기값 0으로 만들고
클래스 안에 constructor에 this.color = this.color = "hsl(" + hue + ", 100%, 50%)";
draw에 fillstyle을 고정값 white가 아니라 this.color 로 바꾸고
animate안에 hue++ 해주면 hsl값에 따라서 색깔이 바뀜
(hsl값은 0, 100%, 50%면 red, 120, 100%, 50%면 green 이렇게 저 앞 숫자가 바뀌면 색이 바뀜)
색을 빠르게 바꾸고 싶으면 hute+=2 이런식
이렇게하면 마우스 움직일때마다 컬러풀한 폭죽이 터지는거같은 모션 완성~