[Canvas] 캔버스 resize

2024.05.22 - [Canvas] - [Canvas] dat.GUI 사용하기

[Canvas] dat.GUI 사용하기

 

현재 캔버스는 화면의 크기를 변경해도 바뀌지 않는다.

 

처음 js가 로드되었을 때

const canvasWidth = innerWidth

const canvasHeight = innerHeight

 위 코드로 인해 가로 세로 길이가 고정되었기 때문이다.

화면이 resize 될 때마다 캔버스의 크기가 바뀌도록 하자. 윈도우가 resize될 때마다 캔버스의 가로 세로 길이가 새로운 innerWidth와 innerHeight를 가지도록 하면 된다.

 

 

init() 함수를 만들고 캔버스 크기와 관련된 코드를 함수 안으로 가져온다.

function init() {

  const canvasWidth = innerWidth

  const canvasHeight = innerHeight

  canvas.style.width = canvasWidth + 'px'

  canvas.style.height = canvasHeight + 'px'

  canvas.width = canvasWidth * dpr

  canvas.height = canvasHeight * dpr

  ctx.scale(dpr, dpr)

}

canvasWidth와 canvasHeight 변수는 함수 밖에서 let으로 선언해둔다. 

그리고 화면이 resize될 때마다 생성되는 파티클의 랜덤 값들도 바껴야 하므로 해당 코드들도 init함수 안으로 옮긴다.

let canvasWidth

let canvasHeight

let particles

function init() {

  canvasWidth = innerWidth

  canvasHeight = innerHeight

  canvas.style.width = canvasWidth + 'px'

  canvas.style.height = canvasHeight + 'px'

  canvas.width = canvasWidth * dpr

  canvas.height = canvasHeight * dpr

  ctx.scale(dpr, dpr)

  particles = []

  for (let i = 0; i < Total; i++) {

    const x = randomNumBetween(0, canvasWidth)

    const y = randomNumBetween(0, canvasHeight)

    const r = randomNumBetween(50, 100)

    const vy = randomNumBetween(1, 5)

    const particle = new Particle(x, y, r, vy)

    particles.push(particle)

  }

}

윈도우가 resize될 때마다 이 init 함수를 실행시키면 된다.

window.addEventListener('load', () => {

  init()

  animate()

})

window.addEventListener('resize', () => {

  init()

})

윈도우가 로드되면 init과 animate 함수를 실행시키고 resize되면 init함수를 실행시킨다.

 

화면이 커지면 파티클 수가 늘어나게 해보자.

Total 변수를 init 함수 안으로 옮기고 Total값을 가로 사이즈/50 값으로 바꾼다.

const Total = canvasWidth / 50;

 

 

* 전체 코드 *

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const dpr = window.devicePixelRatio

let canvasWidth
let canvasHeight
let particles

function init() {
  canvasWidth = innerWidth
  canvasHeight = innerHeight

  canvas.style.width = canvasWidth + 'px'
  canvas.style.height = canvasHeight + 'px'

  canvas.width = canvasWidth * dpr
  canvas.height = canvasHeight * dpr
  ctx.scale(dpr, dpr)

  particles = []

  const Total = canvasWidth / 50;

  for (let i = 0; i < Total; i++) {
    const x = randomNumBetween(0, canvasWidth)
    const y = randomNumBetween(0, canvasHeight)
    const r = randomNumBetween(50, 100)
    const vy = randomNumBetween(1, 5)
    const particle = new Particle(x, y, r, vy)
    particles.push(particle)
  }
}

const feGaussianBlur = document.querySelector('feGaussianBlur')
const feColorMatrix = document.querySelector('feColorMatrix')

const controls = new function () {
  this.blurValue = 40
  this.alphaChannel = 100
  this.alphaOffset = -23
  this.acc = -1.03
}

let gui = new dat.GUI()

const f1 = gui.addFolder('Gooey Effect')
f1.open()
const f2 = gui.addFolder('Particle Property')

f1.add(controls, 'blurValue', 0, 100).onChange(value => {
  feGaussianBlur.setAttribute('stdDeviation', value)
})
f1.add(controls, 'alphaChannel', 1, 200).onChange(value => {
  feColorMatrix.setAttribute('values', `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${value} ${controls.alphaOffset}`)
})
f1.add(controls, 'alphaOffset', -40, 40).onChange(value => {
  feColorMatrix.setAttribute('values', `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${controls.alphaChannel} ${value}`)
})
f2.add(controls, 'acc', 1, 1.5, 0.01).onChange(value => {
  particles.forEach(particle => particle.acc = value)
})

class Particle {
  constructor(x, y, r, vy) {
    this.x = x
    this.y = y
    this.r = r
    this.vy = vy
    this.acc = 1.05
  }
  update() {
    this.vy *= this.acc
    this.y += this.vy
  }
  draw() {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.r, 0, Math.PI / 180 * 360)
    ctx.fillStyle = 'skyblue'
    ctx.fill()
    ctx.closePath()
  }
}

const randomNumBetween = (min, max) => {
  return Math.random() * (max - min + 1) + min
}

console.log(particles);

let interval = 1000 / 60
let now, delta
let then = Date.now()

function animate() {
  window.requestAnimationFrame(animate)
  now = Date.now()
  delta = now - then

  if (delta < interval) return

  ctx.clearRect(0, 0, canvasWidth, canvasHeight)

  particles.forEach(particle => {
    particle.update()
    particle.draw()

    if (particle.y - particle.r > canvasHeight) {
      particle.y = -particle.r
      particle.x = randomNumBetween(0, canvasWidth)
      particle.r = randomNumBetween(50, 100)
      particle.vy = randomNumBetween(1, 5)
    }
  })

  then = now - (delta & interval)
}

window.addEventListener('load', () => {
  init()
  animate()
})

window.addEventListener('resize', () => {
  init()
})