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
Post a Comment