Skip to main content

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                 












Comments

The Most Populer

SlideShow

Slideshow Change image every 3 seconds: 1 / 5 World Map 2 / 5 PUBG Show 3 / 5 React Logo 4 / 5 Sidebar Icon 5 / 5 Android Logo

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...