Canvas sprite-sheet bubbles

2,186 Andev.web

window.onpointerdown = window.onpointermove = e =>{ 
  m.x = e.x
  m.y = e.y
  makeBubble()
} 
  
function makeBubble(auto){
  if (debounce.progress()==1 || auto) {
    debounce.play(0)
    
    const dist = gsap.utils.random(100, 200)
    const scale = gsap.utils.random(0.4, 0.8)
    const b = {
      dur:gsap.utils.random(3, 7),
      spriteDur:gsap.utils.random(0.12, 0.5),
      rotate:gsap.utils.random(-9, 9),
      scaleX:scale,
      scaleY:scale,
      step:0,
      x:0,
      y:0,
      n:bubbles.length
    }
    
    bubbles.push(b)
    
    gsap.timeline({defaults:{ease:'none'}})
    
    .fromTo(b, { 
      x:m.x-75*scale,
      y:m.y-75*scale,
    },{
      duration:b.dur,
      rotate:'+='+gsap.utils.random(-5, 5, 1),
      motionPath:()=>'M'+b.x+','+b.y+
                     'c'+gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+
                      gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+
                      gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)
    }, 0)
    
    .to(b, { 
      duration:b.dur/5,
      ease:'sine.inOut',
      yoyo:true,
      repeat:3,
      repeatRefresh:true,
      scaleX:()=>scale+gsap.utils.random(-0.1,0.1),
      scaleY:()=>scale+gsap.utils.random(-0.1,0.1),
    }, b.dur/5)
    
    .to(b, {
      duration:b.spriteDur,
      step:8, 
      snap:'step'
    }, b.dur-b.spriteDur*2)
    
  }
}

gsap.ticker.add(()=>{
  ctx.clearRect(0,0,cw,ch)
  bubbles.forEach(b=> {
    ctx.translate(b.x+b.scaleX*75, b.y+b.scaleY*75)
    ctx.rotate(b.rotate)
    ctx.drawImage(img, 0, b.step*150, 150, 150, -b.scaleX*75, -b.scaleY*75, b.scaleX*150, b.scaleY*150)
    ctx.rotate(-b.rotate)
    ctx.translate(-b.x-b.scaleX*75, -b.y-b.scaleY*75)
  })
})

window.onresize = ()=>{
  cw = c.width = innerWidth
  ch = c.height = innerHeight
}

Canvas sprite-sheet bubbles

Recommended