The Bubble Perspective

  The Bubble Perspective By CodoBlog 

                    

    Here is the bubble perspective video by codoblog. By using the HTML-CSS-JavaScript

        we developed a code. In this code you you will teach how to design the animation in the                  canvas like bubbles flowing. Try out this code and explore your knowledge.

       CODE - 

              <html>

<head>

<meta charset="utf-8">

<style type="text/css">

body{

margin: 0;

padding: 0;

background-color: #000;

}

</style>

<script type="text/javascript">

let c,ctx,w,h

let frameTime=0,prevTime=null

let redrawElapsed=0

let animationScale=2

let redrawDuration = 5

let newCircleDuration = 0

let dots=[]

const depth = 40

const scale = 4

const radius = 6*scale

class Circle{

constructor(y,z){

this.y=y

this.z=z

this.r=radius*(this.z/depth)

this.x= -this.r

}

update(){

this.x +=scale*(this.z+2)/depth

}

draw(){

ctx.beginPath()

let clr= 255 + 5*(this.z - depth)

ctx.fillStyle = "rgb("+clr+","+clr+','+clr+")"

ctx.arc(parseInt(this.x),parseInt(this.y),parseInt(this.r),0,2*Math.PI)

ctx.strokeStyle=ctx.fillStyle

ctx.fill()

ctx.stroke()

}

}

function rand(x){

return Math.floor(Math.random()*x)

}

window.onload = function(){

requestAnimationFrame(init)

}

function init(timeStamp){

c= document.getElementById("c")

ctx=c.getContext("2d")

w = c.width = window.innerWidth

h = c.height = window.innerHeight

for(let i=0; i< depth/3; i++){

dots.push(new Circle(rand(h),rand(depth)))

}

prevTime = timeStamp

requestAnimationFrame(run)

}

function run(timeStamp){

frameTime =  timeStamp - prevTime

prevTime = timeStamp

redrawElapsed += frameTime

if(redrawElapsed >= redrawDuration){

redrawElapsed = 0

newCircleDuration += 1

ctx.fillStyle = 'rgb(15,15,15)'

ctx.fillRect(0,0,w,h)

dots.sort((a,b) => a.z-b.z)

dots.map(dot => dot.draw())

dots.map(dot => dot.update())

dots = dots.filter(dot => dot.x<w+dot.r)

if(newCircleDuration >= animationScale){

newCircleDuration = 0

dots.push(new Circle(rand(h),rand(depth)))

}

}

requestAnimationFrame(run)

}

</script>

</head>

<body>

<canvas id="c"></canvas>

</body>

</html>

OUTPUT - 

Here is the starting...

                                                                See the full canvas...

    Watch the video if you mistake somewhere and try to do the code. Follow CodoBlog for more 

    videos and subscribe the channel.

                    

💦💦💦💦💦💦

                    #Love CodoBlog