Introduction
Birthdays are special occasions that give us a reason to celebrate life and express our gratitude for another year of experiences and growth. They mark the journey of our existence, offering us an opportunity to reflect on the past, cherish the present, and set new aspirations for the future. Today, we are thrilled to celebrate the third part of a journey that’s close to the heart of many—Happy Birthday to Er Robin!
A Journey of Joy and Growth
Er Robin has been sharing his journey and achievements year after year. Each Happy Birthday becomes a milestone that not only signifies another year of life but also an occasion to showcase creativity and skills. This Happy Birthday, the third part, holds an even deeper meaning as Robin continues to make strides, both personally and professionally.
The Third Part: Special and Significant
As we step into the third Happy Birthday celebration, it feels like a series coming together—like episodes of a story that’s gradually unfolding. This phase brings with it not just the joy of celebrating another year but the satisfaction of achieving set goals and aspirations. It’s a moment to pause and acknowledge the progress made so far while looking ahead with optimism.
The Code Behind the Celebration
This Happy Birthday celebration isn’t just about cakes and candles; it’s also about Robin’s love for coding and creativity. Robin’s interactive Happy Birthday message, complete with a fireworks display and balloons, brings technology and art together. It’s a perfect blend of passion and joy, where every line of code and every visual element adds a unique touch to the celebration.
Here’s a sneak peek into the code behind the beautiful animation Robin has created to mark this special occasion:
HTML :-
<!-- Hii My Name is Er Robin This ia my Third Happy Birthda Task -->
<canvas id=c></canvas>
<p>From the codepals to <a href="#">ST</a><span>, by <a href="https://www.linkedin.com/in/krishna-mishra-680975199">Robin</a></span></p>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="er.robin" data-description="Support me on Buy me a coffee!" data-message="" data-color="#BD5FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>CSS :-
canvas {
position: absolute;
top: 0;
left: 0;
}
p {
margin: 0 0;
position: absolute;
font: 16px Verdana;
color: #eee;
height: 25px;
top: calc( 100vh - 30px );
text-shadow: 0 0 2px white;
}
p a {
text-decoration: none;
color: #aaa;
}
span {
font-size: 11px;
}
p > a:first-of-type {
font-size: 20px;
}
body {
overflow: hidden;
}JS :-
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),
hw = w / 2, // half-width
hh = h / 2,
opts = {
strings: [ 'HAPPY', 'BIRTHDAY!','My Life' ],
charSize: 30,
charSpacing: 35,
lineHeight: 40,
cx: w / 2,
cy: h / 2,
fireworkPrevPoints: 10,
fireworkBaseLineWidth: 5,
fireworkAddedLineWidth: 8,
fireworkSpawnTime: 200,
fireworkBaseReachTime: 30,
fireworkAddedReachTime: 30,
fireworkCircleBaseSize: 20,
fireworkCircleAddedSize: 10,
fireworkCircleBaseTime: 30,
fireworkCircleAddedTime: 30,
fireworkCircleFadeBaseTime: 10,
fireworkCircleFadeAddedTime: 5,
fireworkBaseShards: 5,
fireworkAddedShards: 5,
fireworkShardPrevPoints: 3,
fireworkShardBaseVel: 4,
fireworkShardAddedVel: 2,
fireworkShardBaseSize: 3,
fireworkShardAddedSize: 3,
gravity: .1,
upFlow: -.1,
letterContemplatingWaitTime: 360,
balloonSpawnTime: 20,
balloonBaseInflateTime: 10,
balloonAddedInflateTime: 10,
balloonBaseSize: 20,
balloonAddedSize: 20,
balloonBaseVel: .4,
balloonAddedVel: .4,
balloonBaseRadian: -( Math.PI / 2 - .5 ),
balloonAddedRadian: -1,
},
calc = {
totalWidth: opts.charSpacing * Math.max( opts.strings[0].length, opts.strings[1].length )
},
Tau = Math.PI * 2,
TauQuarter = Tau / 4,
letters = [];
ctx.font = opts.charSize + 'px Verdana';
function Letter( char, x, y ){
this.char = char;
this.x = x;
this.y = y;
this.dx = -ctx.measureText( char ).width / 2;
this.dy = +opts.charSize / 2;
this.fireworkDy = this.y - hh;
var hue = x / calc.totalWidth * 360;
this.color = 'hsl(hue,80%,50%)'.replace( 'hue', hue );
this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace( 'hue', hue );
this.lightColor = 'hsl(hue,80%,light%)'.replace( 'hue', hue );
this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace( 'hue', hue );
this.reset();
}
Letter.prototype.reset = function(){
this.phase = 'firework';
this.tick = 0;
this.spawned = false;
this.spawningTime = opts.fireworkSpawnTime * Math.random() |0;
this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() |0;
this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
this.prevPoints = [ [ 0, hh, 0 ] ];
}
Letter.prototype.step = function(){
if( this.phase === 'firework' ){
if( !this.spawned ){
++this.tick;
if( this.tick >= this.spawningTime ){
this.tick = 0;
this.spawned = true;
}
} else {
++this.tick;
var linearProportion = this.tick / this.reachTime,
armonicProportion = Math.sin( linearProportion * TauQuarter ),
x = linearProportion * this.x,
y = hh + armonicProportion * this.fireworkDy;
if( this.prevPoints.length > opts.fireworkPrevPoints )
this.prevPoints.shift();
this.prevPoints.push( [ x, y, linearProportion * this.lineWidth ] );
var lineWidthProportion = 1 / ( this.prevPoints.length - 1 );
for( var i = 1; i < this.prevPoints.length; ++i ){
var point = this.prevPoints[ i ],
point2 = this.prevPoints[ i - 1 ];
ctx.strokeStyle = this.alphaColor.replace( 'alp', i / this.prevPoints.length );
ctx.lineWidth = point[ 2 ] * lineWidthProportion * i;
ctx.beginPath();
ctx.moveTo( point[ 0 ], point[ 1 ] );
ctx.lineTo( point2[ 0 ], point2[ 1 ] );
ctx.stroke();
}
if( this.tick >= this.reachTime ){
this.phase = 'contemplate';
this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() |0;
this.circleCreating = true;
this.circleFading = false;
this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() |0;
this.tick = 0;
this.tick2 = 0;
this.shards = [];
var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() |0,
angle = Tau / shardCount,
cos = Math.cos( angle ),
sin = Math.sin( angle ),
x = 1,
y = 0;
for( var i = 0; i < shardCount; ++i ){
var x1 = x;
x = x * cos - y * sin;
y = y * cos + x1 * sin;
this.shards.push( new Shard( this.x, this.y, x, y, this.alphaColor ) );
}
}
}
} else if( this.phase === 'contemplate' ){
++this.tick;
if( this.circleCreating ){
++this.tick2;
var proportion = this.tick2 / this.circleCompleteTime,
armonic = -Math.cos( proportion * Math.PI ) / 2 + .5;
ctx.beginPath();
ctx.fillStyle = this.lightAlphaColor.replace( 'light', 50 + 50 * proportion ).replace( 'alp', proportion );
ctx.beginPath();
ctx.arc( this.x, this.y, armonic * this.circleFinalSize, 0, Tau );
ctx.fill();
if( this.tick2 > this.circleCompleteTime ){
this.tick2 = 0;
this.circleCreating = false;
this.circleFading = true;
}
} else if( this.circleFading ){
ctx.fillStyle = this.lightColor.replace( 'light', 70 );
ctx.fillText( this.char, this.x + this.dx, this.y + this.dy );
++this.tick2;
var proportion = this.tick2 / this.circleFadeTime,
armonic = -Math.cos( proportion * Math.PI ) / 2 + .5;
ctx.beginPath();
ctx.fillStyle = this.lightAlphaColor.replace( 'light', 100 ).replace( 'alp', 1 - armonic );
ctx.arc( this.x, this.y, this.circleFinalSize, 0, Tau );
ctx.fill();
if( this.tick2 >= this.circleFadeTime )
this.circleFading = false;
} else {
ctx.fillStyle = this.lightColor.replace( 'light', 70 );
ctx.fillText( this.char, this.x + this.dx, this.y + this.dy );
}
for( var i = 0; i < this.shards.length; ++i ){
this.shards[ i ].step();
if( !this.shards[ i ].alive ){
this.shards.splice( i, 1 );
--i;
}
}
if( this.tick > opts.letterContemplatingWaitTime ){
this.phase = 'balloon';
this.tick = 0;
this.spawning = true;
this.spawnTime = opts.balloonSpawnTime * Math.random() |0;
this.inflating = false;
this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() |0;
this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() |0;
var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
this.vx = Math.cos( rad ) * vel;
this.vy = Math.sin( rad ) * vel;
}
} else if( this.phase === 'balloon' ){
ctx.strokeStyle = this.lightColor.replace( 'light', 80 );
if( this.spawning ){
++this.tick;
ctx.fillStyle = this.lightColor.replace( 'light', 70 );
ctx.fillText( this.char, this.x + this.dx, this.y + this.dy );
if( this.tick >= this.spawnTime ){
this.tick = 0;
this.spawning = false;
this.inflating = true;
}
} else if( this.inflating ){
++this.tick;
var proportion = this.tick / this.inflateTime,
x = this.cx = this.x,
y = this.cy = this.y - this.size * proportion;
ctx.fillStyle = this.alphaColor.replace( 'alp', proportion );
ctx.beginPath();
generateBalloonPath( x, y, this.size * proportion );
ctx.fill();
ctx.beginPath();
ctx.moveTo( x, y );
ctx.lineTo( x, this.y );
ctx.stroke();
ctx.fillStyle = this.lightColor.replace( 'light', 70 );
ctx.fillText( this.char, this.x + this.dx, this.y + this.dy );
if( this.tick >= this.inflateTime ){
this.tick = 0;
this.inflating = false;
}
} else {
this.cx += this.vx;
this.cy += this.vy += opts.upFlow;
ctx.fillStyle = this.color;
ctx.beginPath();
generateBalloonPath( this.cx, this.cy, this.size );
ctx.fill();
ctx.beginPath();
ctx.moveTo( this.cx, this.cy );
ctx.lineTo( this.cx, this.cy + this.size );
ctx.stroke();
ctx.fillStyle = this.lightColor.replace( 'light', 70 );
ctx.fillText( this.char, this.cx + this.dx, this.cy + this.dy + this.size );
if( this.cy + this.size < -hh || this.cx < -hw || this.cy > hw )
this.phase = 'done';
}
}
}
function Shard( x, y, vx, vy, color ){
var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
this.vx = vx * vel;
this.vy = vy * vel;
this.x = x;
this.y = y;
this.prevPoints = [ [ x, y ] ];
this.color = color;
this.alive = true;
this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
}
Shard.prototype.step = function(){
this.x += this.vx;
this.y += this.vy += opts.gravity;
if( this.prevPoints.length > opts.fireworkShardPrevPoints )
this.prevPoints.shift();
this.prevPoints.push( [ this.x, this.y ] );
var lineWidthProportion = this.size / this.prevPoints.length;
for( var k = 0; k < this.prevPoints.length - 1; ++k ){
var point = this.prevPoints[ k ],
point2 = this.prevPoints[ k + 1 ];
ctx.strokeStyle = this.color.replace( 'alp', k / this.prevPoints.length );
ctx.lineWidth = k * lineWidthProportion;
ctx.beginPath();
ctx.moveTo( point[ 0 ], point[ 1 ] );
ctx.lineTo( point2[ 0 ], point2[ 1 ] );
ctx.stroke();
}
if( this.prevPoints[ 0 ][ 1 ] > hh )
this.alive = false;
}
function generateBalloonPath( x, y, size ){
ctx.moveTo( x, y );
ctx.bezierCurveTo( x - size / 2, y - size / 2,
x - size / 4, y - size,
x, y - size );
ctx.bezierCurveTo( x + size / 4, y - size,
x + size / 2, y - size / 2,
x, y );
}
function anim(){
window.requestAnimationFrame( anim );
ctx.fillStyle = '#111';
ctx.fillRect( 0, 0, w, h );
ctx.translate( hw, hh );
var done = true;
for( var l = 0; l < letters.length; ++l ){
letters[ l ].step();
if( letters[ l ].phase !== 'done' )
done = false;
}
ctx.translate( -hw, -hh );
if( done )
for( var l = 0; l < letters.length; ++l )
letters[ l ].reset();
}
for( var i = 0; i < opts.strings.length; ++i ){
for( var j = 0; j < opts.strings[ i ].length; ++j ){
letters.push( new Letter( opts.strings[ i ][ j ],
j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[ i ].length * opts.charSize / 2,
i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2 ) );
}
}
anim();
window.addEventListener( 'resize', function(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
hw = w / 2;
hh = h / 2;
ctx.font = opts.charSize + 'px Verdana';
})This code sets up a dynamic and visually engaging animation that captures the festive spirit of Robin’s Happy Birthday. The fireworks and balloons not only enhance the aesthetics but also reflect the excitement and joy of the occasion. Each detail in the code speaks to Robin’s dedication to making this celebration memorable for everyone.
Support the Creator: Buy Him a Coffee
If you’re inspired by the creativity and effort behind this celebration, show some love and support by buying Robin a coffee. It’s a small gesture that goes a long way in appreciating the work and passion Robin has poured into his coding journey. You can visit Robin’s Buy Me a Coffee page to make a contribution.
Conclusion
The third Happy Birthday celebration is more than just another milestone; it’s a testament to growth, creativity, and passion. Robin’s journey continues to inspire those around him, showcasing how every moment, every year, is a chance to celebrate life in its fullest form. So, here’s to another year of joy, success, and endless coding adventures!
Happy Birthday, Er Robin! 🎂✨
See the Pen Happy Birthday Third Part by Er Robin (@robin-ivi) on CodePen.
