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

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...