Happy birthday

[pt9931830-ship-it]

Happy birthday janavi.....💝

If God bless 🙌 us then we meet soon 😊

Then,
We hug each other,
We kiss each other,
We hold each other just like lungs 🫁 store air inside it.
Or,
Ha tumko jee bhar kr Dhakhun ga .....😇🥰

[sureshbk613-hash]

(function(window){

function random(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
}

function bezier(cp, t) {  
    var p1 = cp[0].mul((1 - t) * (1 - t));
    var p2 = cp[1].mul(2 * t * (1 - t));
    var p3 = cp[2].mul(t * t); 
    return p1.add(p2).add(p3);
}  

function inheart(x, y, r) {
    
    var z = ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r);
    return z < 0;
}

Point = function(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}
Point.prototype = {
    clone: function() {
        return new Point(this.x, this.y);
    },
    add: function(o) {
        p = this.clone();
        p.x += o.x;
        p.y += o.y;
        return p;
    },
    sub: function(o) {
        p = this.clone();
        p.x -= o.x;
        p.y -= o.y;
        return p;
    },
    div: function(n) {
        p = this.clone();
        p.x /= n;
        p.y /= n;
        return p;
    },
    mul: function(n) {
        p = this.clone();
        p.x *= n;
        p.y *= n;
        return p;
    }
}

Heart = function() {
    // x = 16 sin^3 t
    // y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
    // http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
    var points = [], x, y, t;
    for (var i = 10; i < 30; i += 0.2) {
        t = i / Math.PI;
        x = 16 * Math.pow(Math.sin(t), 3);
        y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
        points.push(new Point(x, y));
    }
    this.points = points;
    this.length = points.length;
}
Heart.prototype = {
    get: function(i, scale) {
        return this.points[i].mul(scale || 1);
    }
}

Seed = function(tree, point, scale, color) {
    this.tree = tree;

    var scale = scale || 1
    var color = '#FFC0CB';

    this.heart = {
        point  : point,
        scale  : scale,
        color  : color,
        figure : new Heart(),
    }

    this.cirle = {
        point  : point,
        scale  : scale,
        color  : color,
        radius : 5,
    }
}
Seed.prototype = {
    draw: function() {
        this.drawHeart();
        this.drawText();
    },
    addPosition: function(x, y) {
        this.cirle.point = this.cirle.point.add(new Point(x, y));
    },
    canMove: function() {
        return this.cirle.point.y < (this.tree.height + 20); 
    },
    move: function(x, y) {
        this.clear();
        this.drawCirle();
        this.addPosition(x, y);
    },
    canScale: function() {
        return this.heart.scale > 0.2;
    },
    setHeartScale: function(scale) {
        this.heart.scale *= scale;
    },
    scale: function(scale) {
        this.clear();
        this.drawCirle();
        this.drawHeart();
        this.setHeartScale(scale);
    },
    drawHeart: function() {
        var ctx = this.tree.ctx, heart = this.heart;
        var point = heart.point, color = heart.color, 
            scale = heart.scale;
        ctx.save();
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for (var i = 0; i < heart.figure.length; i++) {
            var p = heart.figure.get(i, scale);
            ctx.lineTo(p.x, -p.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    drawCirle: function() {
        var ctx = this.tree.ctx, cirle = this.cirle;
        var point = cirle.point, color = cirle.color, 
            scale = cirle.scale, radius = cirle.radius;
        ctx.save();
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.scale(scale, scale);
        ctx.beginPath();
        ctx.moveTo(0, 0);
	    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    drawText: function() {
        var ctx = this.tree.ctx, heart = this.heart;
        var point = heart.point, color = heart.color, 
            scale = heart.scale;
        ctx.save();
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.scale(scale, scale);
        ctx.moveTo(0, 0);
	    ctx.lineTo(15, 15);
	    ctx.lineTo(130, 15);
        ctx.stroke();

        ctx.moveTo(0, 0);
        ctx.scale(0.75, 0.75);
        ctx.font = "12px,Verdana"; // 字号肿么没有用? (ˉ(∞)ˉ)
        ctx.fillText("Click Me:) ", 30, -5);
        ctx.fillText("Birthday Queen !", 28, 10);
        ctx.restore();
    },
    clear: function() {
        var ctx = this.tree.ctx, cirle = this.cirle;
        var point = cirle.point, scale = cirle.scale, radius = 26;
        var w = h = (radius * scale);
        ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h);
    },
    hover: function(x, y) {
        var ctx = this.tree.ctx;
        var pixel = ctx.getImageData(x, y, 1, 1);
        return pixel.data[3] == 255
    }
}

Footer = function(tree, width, height, speed) {
    this.tree = tree;
    this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2);
    this.width = width;
    this.height = height;
    this.speed = speed || 2;
    this.length = 0;
}
Footer.prototype = {
    draw: function() {
        var ctx = this.tree.ctx, point = this.point;
        var len = this.length / 2;

        ctx.save();
        ctx.strokeStyle = '#FFF';
        ctx.lineWidth = this.height;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.translate(point.x, point.y);
        ctx.beginPath();
        ctx.moveTo(0, 0);
	    ctx.lineTo(len, 0);
	    ctx.lineTo(-len, 0);
        ctx.stroke();
        ctx.restore();

        if (this.length < this.width) {
            this.length += this.speed;
        }
    }
}

Tree = function(canvas, width, height, opt) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = width;
    this.height = height;
    this.opt = opt || {};

    this.record = {};
    
    this.initSeed();
    this.initFooter();
    this.initBranch();
    this.initBloom();
}
Tree.prototype = {
    initSeed: function() {
        var seed = this.opt.seed || {};
        var x = seed.x || this.width / 2;
        var y = seed.y || this.height / 2;
        var point = new Point(x, y);
        var color = seed.color || '#FF0000';
        var scale = seed.scale || 1;

        this.seed = new Seed(this, point, scale, color);
    },

    initFooter: function() {
        var footer = this.opt.footer || {};
        var width = footer.width || this.width;
        var height = footer.height || 5;
        var speed = footer.speed || 2;
        this.footer = new Footer(this, width, height, speed);
    },

    initBranch: function() {
        var branchs = this.opt.branch || []
        this.branchs = [];
        this.addBranchs(branchs);
    },

    initBloom: function() {
        var bloom = this.opt.bloom || {};
        var cache = [],
            num = bloom.num || 500, 
            width = bloom.width || this.width,
            height = bloom.height || this.height,
            figure = this.seed.heart.figure;
        var r = 240, x, y;
        for (var i = 0; i < num; i++) {
            cache.push(this.createBloom(width, height, r, figure));
        }
        this.blooms = [];
        this.bloomsCache = cache;
    },

    toDataURL: function(type) {
        return this.canvas.toDataURL(type);
    },

    draw: function(k) {
        var s = this, ctx = s.ctx;
        var rec = s.record[k];
        if (!rec) {
            return ;
        }
        var point = rec.point,
            image = rec.image;

        ctx.save();
        ctx.putImageData(image, point.x, point.y);
    	ctx.restore();
    },

    addBranch: function(branch) {
    	this.branchs.push(branch);
    },

    addBranchs: function(branchs){
        var s = this, b, p1, p2, p3, r, l, c;
    	for (var i = 0; i < branchs.length; i++) {
            b = branchs[i];
            p1 = new Point(b[0], b[1]);
            p2 = new Point(b[2], b[3]);
            p3 = new Point(b[4], b[5]);
            r = b[6];
            l = b[7];
            c = b[8]
            s.addBranch(new Branch(s, p1, p2, p3, r, l, c)); 
        }
    },

    removeBranch: function(branch) {
        var branchs = this.branchs;
    	for (var i = 0; i < branchs.length; i++) {
    		if (branchs[i] === branch) {
    			branchs.splice(i, 1);
            }
        }
    },

    canGrow: function() {
        return !!this.branchs.length;
    },
    grow: function() {
        var branchs = this.branchs;
    	for (var i = 0; i < branchs.length; i++) {
            var branch = branchs[i];
            if (branch) {
                branch.grow();
            }
        }
    },

    addBloom: function (bloom) {
        this.blooms.push(bloom);
    },

    removeBloom: function (bloom) {
        var blooms = this.blooms;
        for (var i = 0; i < blooms.length; i++) {
            if (blooms[i] === bloom) {
                blooms.splice(i, 1);
            }
        }
    },

    createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) {
        var x, y;
        while (true) {
            x = random(20, width - 20);
            y = random(20, height - 20);
            if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) {
                return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed);
            }
        }
    },
    
    canFlower: function() {
        return !!this.blooms.length;
    }, 
    flower: function(num) {
        var s = this, blooms = s.bloomsCache.splice(0, num);
        for (var i = 0; i < blooms.length; i++) {
            s.addBloom(blooms[i]);
        }
        blooms = s.blooms;
        for (var j = 0; j < blooms.length; j++) {
            blooms[j].flower();
        }
    },

    snapshot: function(k, x, y, width, height) {
        var ctx = this.ctx;
        var image = ctx.getImageData(x, y, width, height); 
        this.record[k] = {
            image: image,
            point: new Point(x, y),
            width: width,
            height: height
        }
    },
    setSpeed: function(k, speed) {
        this.record[k || "move"].speed = speed;
    },
    move: function(k, x, y) {
        var s = this, ctx = s.ctx;
        var rec = s.record[k || "move"];
        var point = rec.point,
            image = rec.image,
            speed = rec.speed || 10,
            width = rec.width,
            height = rec.height; 

        i = point.x + speed < x ? point.x + speed : x;
        j = point.y + speed < y ? point.y + speed : y; 

        ctx.save();
        ctx.clearRect(point.x, point.y, width, height);
        ctx.putImageData(image, i, j);
    	ctx.restore();

        rec.point = new Point(i, j);
        rec.speed = speed * 0.95;

        if (rec.speed < 2) {
            rec.speed = 2;
        }
        return i < x || j < y;
    },

    jump: function() {
        var s = this, blooms = s.blooms;
        if (blooms.length) {
            for (var i = 0; i < blooms.length; i++) {
                blooms[i].jump();
            }
        } 
        if ((blooms.length && blooms.length < 3) || !blooms.length) {
            var bloom = this.opt.bloom || {},
                width = bloom.width || this.width,
                height = bloom.height || this.height,
                figure = this.seed.heart.figure;
            var r = 240, x, y;
            for (var i = 0; i < random(1,2); i++) {
                blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300)));
            }
        }
    }
}

Branch = function(tree, point1, point2, point3, radius, length, branchs) {
    this.tree = tree;
    this.point1 = point1;
    this.point2 = point2;
    this.point3 = point3;
    this.radius = radius;
    this.length = length || 100;    
    this.len = 0;
    this.t = 1 / (this.length - 1);   
    this.branchs = branchs || [];
}

Branch.prototype = {
    grow: function() {
        var s = this, p; 
        if (s.len <= s.length) {
            p = bezier([s.point1, s.point2, s.point3], s.len * s.t);
            s.draw(p);
            s.len += 1;
            s.radius *= 0.97;
        } else {
            s.tree.removeBranch(s);
            s.tree.addBranchs(s.branchs);
        }
    },
    draw: function(p) {
        var s = this;
        var ctx = s.tree.ctx;
        ctx.save();
    	ctx.beginPath();
    	ctx.fillStyle = '#FFC0CB';
        // ctx.shadowColor = 'rgb(35, 31, 32)';
        ctx.shadowBlur = 2;
    	ctx.moveTo(p.x, p.y);
    	ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI);
    	ctx.closePath();
    	ctx.fill();
    	// ctx.restore();
    }
}

Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) {
    this.tree = tree;
    this.point = point;
    this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')';
    this.alpha = alpha || random(0.3, 1);
    this.angle = angle || random(0, 360);
    this.scale = scale || 0.1;
    this.place = place;
    this.speed = speed;

    this.figure = figure;
}
Bloom.prototype = {
    setFigure: function(figure) {
        this.figure = figure;
    },
    flower: function() {
        var s = this;
        s.draw();
        s.scale += 0.1;
        if (s.scale > 1) {
            s.tree.removeBloom(s);
        }
    },
    draw: function() {
        var s = this, ctx = s.tree.ctx, figure = s.figure;

        ctx.save();
        ctx.fillStyle = s.color;
        ctx.globalAlpha = s.alpha;
        ctx.translate(s.point.x, s.point.y);
        ctx.scale(s.scale, s.scale);
        ctx.rotate(s.angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for (var i = 0; i < figure.length; i++) {
            var p = figure.get(i);
            ctx.lineTo(p.x, -p.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    jump: function() {
        var s = this, height = s.tree.height;

        if (s.point.x < -20 || s.point.y > height + 20) {
            s.tree.removeBloom(s);
        } else {
            s.draw();
            s.point = s.place.sub(s.point).div(s.speed).add(s.point);
            s.angle += 0.05;
            s.speed -= 1;
        }
    }
}

window.random = random;
window.bezier = bezier;
window.Point = Point;
window.Tree = Tree;

})(window);
(function(window){

function random(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
}

function bezier(cp, t) {  
    var p1 = cp[0].mul((1 - t) * (1 - t));
    var p2 = cp[1].mul(2 * t * (1 - t));
    var p3 = cp[2].mul(t * t); 
    return p1.add(p2).add(p3);
}  

function inheart(x, y, r) {
    
    var z = ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r);
    return z < 0;
}

Point = function(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}
Point.prototype = {
    clone: function() {
        return new Point(this.x, this.y);
    },
    add: function(o) {
        p = this.clone();
        p.x += o.x;
        p.y += o.y;
        return p;
    },
    sub: function(o) {
        p = this.clone();
        p.x -= o.x;
        p.y -= o.y;
        return p;
    },
    div: function(n) {
        p = this.clone();
        p.x /= n;
        p.y /= n;
        return p;
    },
    mul: function(n) {
        p = this.clone();
        p.x *= n;
        p.y *= n;
        return p;
    }
}

Heart = function() {
    // x = 16 sin^3 t
    // y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
    // http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
    var points = [], x, y, t;
    for (var i = 10; i < 30; i += 0.2) {
        t = i / Math.PI;
        x = 16 * Math.pow(Math.sin(t), 3);
        y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
        points.push(new Point(x, y));
    }
    this.points = points;
    this.length = points.length;
}
Heart.prototype = {
    get: function(i, scale) {
        return this.points[i].mul(scale || 1);
    }
}

Seed = function(tree, point, scale, color) {
    this.tree = tree;

    var scale = scale || 1
    var color = '#FFC0CB';

    this.heart = {
        point  : point,
        scale  : scale,
        color  : color,
        figure : new Heart(),
    }

    this.cirle = {
        point  : point,
        scale  : scale,
        color  : color,
        radius : 5,
    }
}
Seed.prototype = {
    draw: function() {
        this.drawHeart();
        this.drawText();
    },
    addPosition: function(x, y) {
        this.cirle.point = this.cirle.point.add(new Point(x, y));
    },
    canMove: function() {
        return this.cirle.point.y < (this.tree.height + 20); 
    },
    move: function(x, y) {
        this.clear();
        this.drawCirle();
        this.addPosition(x, y);
    },
    canScale: function() {
        return this.heart.scale > 0.2;
    },
    setHeartScale: function(scale) {
        this.heart.scale *= scale;
    },
    scale: function(scale) {
        this.clear();
        this.drawCirle();
        this.drawHeart();
        this.setHeartScale(scale);
    },
    drawHeart: function() {
        var ctx = this.tree.ctx, heart = this.heart;
        var point = heart.point, color = heart.color, 
            scale = heart.scale;
        ctx.save();
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for (var i = 0; i < heart.figure.length; i++) {
            var p = heart.figure.get(i, scale);
            ctx.lineTo(p.x, -p.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    drawCirle: function() {
        var ctx = this.tree.ctx, cirle = this.cirle;
        var point = cirle.point, color = cirle.color, 
            scale = cirle.scale, radius = cirle.radius;
        ctx.save();
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.scale(scale, scale);
        ctx.beginPath();
        ctx.moveTo(0, 0);
	    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    drawText: function() {
        var ctx = this.tree.ctx, heart = this.heart;
        var point = heart.point, color = heart.color, 
            scale = heart.scale;
        ctx.save();
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.translate(point.x, point.y);
        ctx.scale(scale, scale);
        ctx.moveTo(0, 0);
	    ctx.lineTo(15, 15);
	    ctx.lineTo(130, 15);
        ctx.stroke();

        ctx.moveTo(0, 0);
        ctx.scale(0.75, 0.75);
        ctx.font = "12px,Verdana"; // 字号肿么没有用? (ˉ(∞)ˉ)
        ctx.fillText("Click Me:) ", 30, -5);
        ctx.fillText("Birthday Queen !", 28, 10);
        ctx.restore();
    },
    clear: function() {
        var ctx = this.tree.ctx, cirle = this.cirle;
        var point = cirle.point, scale = cirle.scale, radius = 26;
        var w = h = (radius * scale);
        ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h);
    },
    hover: function(x, y) {
        var ctx = this.tree.ctx;
        var pixel = ctx.getImageData(x, y, 1, 1);
        return pixel.data[3] == 255
    }
}

Footer = function(tree, width, height, speed) {
    this.tree = tree;
    this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2);
    this.width = width;
    this.height = height;
    this.speed = speed || 2;
    this.length = 0;
}
Footer.prototype = {
    draw: function() {
        var ctx = this.tree.ctx, point = this.point;
        var len = this.length / 2;

        ctx.save();
        ctx.strokeStyle = '#FFF';
        ctx.lineWidth = this.height;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.translate(point.x, point.y);
        ctx.beginPath();
        ctx.moveTo(0, 0);
	    ctx.lineTo(len, 0);
	    ctx.lineTo(-len, 0);
        ctx.stroke();
        ctx.restore();

        if (this.length < this.width) {
            this.length += this.speed;
        }
    }
}

Tree = function(canvas, width, height, opt) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = width;
    this.height = height;
    this.opt = opt || {};

    this.record = {};
    
    this.initSeed();
    this.initFooter();
    this.initBranch();
    this.initBloom();
}
Tree.prototype = {
    initSeed: function() {
        var seed = this.opt.seed || {};
        var x = seed.x || this.width / 2;
        var y = seed.y || this.height / 2;
        var point = new Point(x, y);
        var color = seed.color || '#FF0000';
        var scale = seed.scale || 1;

        this.seed = new Seed(this, point, scale, color);
    },

    initFooter: function() {
        var footer = this.opt.footer || {};
        var width = footer.width || this.width;
        var height = footer.height || 5;
        var speed = footer.speed || 2;
        this.footer = new Footer(this, width, height, speed);
    },

    initBranch: function() {
        var branchs = this.opt.branch || []
        this.branchs = [];
        this.addBranchs(branchs);
    },

    initBloom: function() {
        var bloom = this.opt.bloom || {};
        var cache = [],
            num = bloom.num || 500, 
            width = bloom.width || this.width,
            height = bloom.height || this.height,
            figure = this.seed.heart.figure;
        var r = 240, x, y;
        for (var i = 0; i < num; i++) {
            cache.push(this.createBloom(width, height, r, figure));
        }
        this.blooms = [];
        this.bloomsCache = cache;
    },

    toDataURL: function(type) {
        return this.canvas.toDataURL(type);
    },

    draw: function(k) {
        var s = this, ctx = s.ctx;
        var rec = s.record[k];
        if (!rec) {
            return ;
        }
        var point = rec.point,
            image = rec.image;

        ctx.save();
        ctx.putImageData(image, point.x, point.y);
    	ctx.restore();
    },

    addBranch: function(branch) {
    	this.branchs.push(branch);
    },

    addBranchs: function(branchs){
        var s = this, b, p1, p2, p3, r, l, c;
    	for (var i = 0; i < branchs.length; i++) {
            b = branchs[i];
            p1 = new Point(b[0], b[1]);
            p2 = new Point(b[2], b[3]);
            p3 = new Point(b[4], b[5]);
            r = b[6];
            l = b[7];
            c = b[8]
            s.addBranch(new Branch(s, p1, p2, p3, r, l, c)); 
        }
    },

    removeBranch: function(branch) {
        var branchs = this.branchs;
    	for (var i = 0; i < branchs.length; i++) {
    		if (branchs[i] === branch) {
    			branchs.splice(i, 1);
            }
        }
    },

    canGrow: function() {
        return !!this.branchs.length;
    },
    grow: function() {
        var branchs = this.branchs;
	    for (var i = 0; i < branchs.length; i++) {
            var branch = branchs[i];
            if (branch) {
                branch.grow();
            }
        }
    },

    addBloom: function (bloom) {
        this.blooms.push(bloom);
    },

    removeBloom: function (bloom) {
        var blooms = this.blooms;
        for (var i = 0; i < blooms.length; i++) {
            if (blooms[i] === bloom) {
                blooms.splice(i, 1);
            }
        }
    },

    createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) {
        var x, y;
        while (true) {
            x = random(20, width - 20);
            y = random(20, height - 20);
            if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) {
                return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed);
            }
        }
    },
    
    canFlower: function() {
        return !!this.blooms.length;
    }, 
    flower: function(num) {
        var s = this, blooms = s.bloomsCache.splice(0, num);
        for (var i = 0; i < blooms.length; i++) {
            s.addBloom(blooms[i]);
        }
        blooms = s.blooms;
        for (var j = 0; j < blooms.length; j++) {
            blooms[j].flower();
        }
    },

    snapshot: function(k, x, y, width, height) {
        var ctx = this.ctx;
        var image = ctx.getImageData(x, y, width, height); 
        this.record[k] = {
            image: image,
            point: new Point(x, y),
            width: width,
            height: height
        }
    },
    setSpeed: function(k, speed) {
        this.record[k || "move"].speed = speed;
    },
    move: function(k, x, y) {
        var s = this, ctx = s.ctx;
        var rec = s.record[k || "move"];
        var point = rec.point,
            image = rec.image,
            speed = rec.speed || 10,
            width = rec.width,
            height = rec.height; 

        i = point.x + speed < x ? point.x + speed : x;
        j = point.y + speed < y ? point.y + speed : y; 

        ctx.save();
        ctx.clearRect(point.x, point.y, width, height);
        ctx.putImageData(image, i, j);
    	ctx.restore();

        rec.point = new Point(i, j);
        rec.speed = speed * 0.95;

        if (rec.speed < 2) {
            rec.speed = 2;
        }
        return i < x || j < y;
    },

    jump: function() {
        var s = this, blooms = s.blooms;
        if (blooms.length) {
            for (var i = 0; i < blooms.length; i++) {
                blooms[i].jump();
            }
        } 
        if ((blooms.length && blooms.length < 3) || !blooms.length) {
            var bloom = this.opt.bloom || {},
                width = bloom.width || this.width,
                height = bloom.height || this.height,
                figure = this.seed.heart.figure;
            var r = 240, x, y;
            for (var i = 0; i < random(1,2); i++) {
                blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300)));
            }
        }
    }
}

Branch = function(tree, point1, point2, point3, radius, length, branchs) {
    this.tree = tree;
    this.point1 = point1;
    this.point2 = point2;
    this.point3 = point3;
    this.radius = radius;
    this.length = length || 100;    
    this.len = 0;
    this.t = 1 / (this.length - 1);   
    this.branchs = branchs || [];
}

Branch.prototype = {
    grow: function() {
        var s = this, p; 
        if (s.len <= s.length) {
            p = bezier([s.point1, s.point2, s.point3], s.len * s.t);
            s.draw(p);
            s.len += 1;
            s.radius *= 0.97;
        } else {
            s.tree.removeBranch(s);
            s.tree.addBranchs(s.branchs);
        }
    },
    draw: function(p) {
        var s = this;
        var ctx = s.tree.ctx;
        ctx.save();
    	ctx.beginPath();
    	ctx.fillStyle = '#FFC0CB';
        // ctx.shadowColor = 'rgb(35, 31, 32)';
        ctx.shadowBlur = 2;
    	ctx.moveTo(p.x, p.y);
    	ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI);
    	ctx.closePath();
    	ctx.fill();
    	// ctx.restore();
    }
}

Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) {
    this.tree = tree;
    this.point = point;
    this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')';
    this.alpha = alpha || random(0.3, 1);
    this.angle = angle || random(0, 360);
    this.scale = scale || 0.1;
    this.place = place;
    this.speed = speed;

    this.figure = figure;
}
Bloom.prototype = {
    setFigure: function(figure) {
        this.figure = figure;
    },
    flower: function() {
        var s = this;
        s.draw();
        s.scale += 0.1;
        if (s.scale > 1) {
            s.tree.removeBloom(s);
        }
    },
    draw: function() {
        var s = this, ctx = s.tree.ctx, figure = s.figure;

        ctx.save();
        ctx.fillStyle = s.color;
        ctx.globalAlpha = s.alpha;
        ctx.translate(s.point.x, s.point.y);
        ctx.scale(s.scale, s.scale);
        ctx.rotate(s.angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        for (var i = 0; i < figure.length; i++) {
            var p = figure.get(i);
            ctx.lineTo(p.x, -p.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    },
    jump: function() {
        var s = this, height = s.tree.height;

        if (s.point.x < -20 || s.point.y > height + 20) {
            s.tree.removeBloom(s);
        } else {
            s.draw();
            s.point = s.place.sub(s.point).div(s.speed).add(s.point);
            s.angle += 0.05;
            s.speed -= 1;
        }
    }
}

window.random = random;
window.bezier = bezier;
window.Point = Point;
window.Tree = Tree;

})(window);

[sureshbk613-hash]

<title>HBD love</title> <script type="text/javascript" src="file/jquery.min.js"></script> <script type="text/javascript" src="file/jscex.min.js"></script> <script type="text/javascript" src="file/jscex-parser.js"></script> <script type="text/javascript" src="file/jscex-jit.js"></script> <script type="text/javascript" src="file/jscex-builderbase.min.js"></script> <script type="text/javascript" src="file/jscex-async.min.js"></script> <script type="text/javascript" src="file/jscex-async-powerpack.min.js"></script> <script type="text/javascript" src="file/function.js" charset="utf-8"></script> <script type="text/javascript" src="file/love.js" charset="utf-8"></script> <script> function playAudio() { var audio = document.getElementById("myAudio"); audio.play(); } </script>

Chrome (Firefox)

Hey you 💞
Happy Birthday 🎈
May God bless you 🍀
And give u many happiness 💕
Just saying... you're pretty awesome ❤️
Sending good vibes and maybe a wink 😏
Hope u have a great day today ❤️😘

577 days 0 hours 0 minutes 0 seconds

<script>
(function() {
    var canvas = $('#canvas');
	
    if (!canvas[0].getContext) {
        $("#error").show();
        return false;
    }

    var width = canvas.width();
    var height = canvas.height();        
    canvas.attr("width", width);
    canvas.attr("height", height);

    var opts = {
        seed: {
            x: width / 2 - 20,
            color: "rgb(190, 26, 37)",
            scale: 2
        },
        branch: [
            [535, 680, 570, 250, 500, 200, 30, 100, [
                [540, 500, 455, 417, 340, 400, 13, 100, [
                    [450, 435, 434, 430, 394, 395, 2, 40]
                ]],
                [550, 445, 600, 356, 680, 345, 12, 100, [
                    [578, 400, 648, 409, 661, 426, 3, 80]
                ]],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [546, 397, 413, 247, 328, 244, 9, 80, [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60]
                ]],
                [546, 357, 608, 252, 678, 221, 6, 100, [
                    [590, 293, 646, 277, 648, 271, 2, 80]
                ]]
            ]] 
        ],
        bloom: {
            num: 700,
            width: 1080,
            height: 650,
        },
        footer: {
            width: 1200,
            height: 5,
            speed: 10,
        }
    }

    var tree = new Tree(canvas[0], width, height, opts);
    var seed = tree.seed;
    var foot = tree.footer;
    var hold = 1;

    canvas.click(function(e) {
        playAudio();
        var offset = canvas.offset(), x, y;
        x = e.pageX - offset.left;
        y = e.pageY - offset.top;
        if (seed.hover(x, y)) {
            hold = 0; 
            canvas.unbind("click");
            canvas.unbind("mousemove");
            canvas.removeClass('hand');
        }
    }).mousemove(function(e) {
        var offset = canvas.offset(), x, y;
        x = e.pageX - offset.left;
        y = e.pageY - offset.top;
        canvas.toggleClass('hand', seed.hover(x, y));
    });

    var seedAnimate = eval(Jscex.compile("async", function () {
        seed.draw();
        while (hold) {
            $await(Jscex.Async.sleep(10));
        }
        while (seed.canScale()) {
            seed.scale(0.95);
            $await(Jscex.Async.sleep(10));
        }
        while (seed.canMove()) {
            seed.move(0, 2);
            foot.draw();
            $await(Jscex.Async.sleep(10));
        }
    }));

    var growAnimate = eval(Jscex.compile("async", function () {
        do {
            tree.grow();
            $await(Jscex.Async.sleep(10));
        } while (tree.canGrow());
    }));

    var flowAnimate = eval(Jscex.compile("async", function () {
        do {
            tree.flower(2);
            $await(Jscex.Async.sleep(10));
        } while (tree.canFlower());
    }));

    var moveAnimate = eval(Jscex.compile("async", function () {
        tree.snapshot("p1", 240, 0, 610, 680);
        while (tree.move("p1", 500, 0)) {
            foot.draw();
            $await(Jscex.Async.sleep(10));
        }
        foot.draw();
        tree.snapshot("p2", 500, 0, 610, 680);

        canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
        canvas.css("background", "#ffe");
        $await(Jscex.Async.sleep(300));
        canvas.css("background", "none");
    }));

    var textAnimate = eval(Jscex.compile("async", function () {
        $("#code").show().typewriter();
    }));
    
    var runAsync = eval(Jscex.compile("async", function () {
        $await(seedAnimate());
        $await(growAnimate());
        $await(flowAnimate());
        $await(moveAnimate());
        textAnimate().start();
    }));

    runAsync().start();
})();
</script>

<title>HBD love</title> <script type="text/javascript" src="file/jquery.min.js"></script> <script type="text/javascript" src="file/jscex.min.js"></script> <script type="text/javascript" src="file/jscex-parser.js"></script> <script type="text/javascript" src="file/jscex-jit.js"></script> <script type="text/javascript" src="file/jscex-builderbase.min.js"></script> <script type="text/javascript" src="file/jscex-async.min.js"></script> <script type="text/javascript" src="file/jscex-async-powerpack.min.js"></script> <script type="text/javascript" src="file/function.js" charset="utf-8"></script> <script type="text/javascript" src="file/love.js" charset="utf-8"></script> <script> function playAudio() { var audio = document.getElementById("myAudio"); audio.play(); } </script>

Chrome (Firefox)

Hey you 💞
Happy Birthday 🎈
May God bless you 🍀
And give u many happiness 💕
Just saying... you're pretty awesome ❤️
Sending good vibes and maybe a wink 😏
Hope u have a great day today ❤️😘

577 days 0 hours 0 minutes 0 seconds

<script>
(function() {
    var canvas = $('#canvas');
	
    if (!canvas[0].getContext) {
        $("#error").show();
        return false;
    }

    var width = canvas.width();
    var height = canvas.height();        
    canvas.attr("width", width);
    canvas.attr("height", height);

    var opts = {
        seed: {
            x: width / 2 - 20,
            color: "rgb(190, 26, 37)",
            scale: 2
        },
        branch: [
            [535, 680, 570, 250, 500, 200, 30, 100, [
                [540, 500, 455, 417, 340, 400, 13, 100, [
                    [450, 435, 434, 430, 394, 395, 2, 40]
                ]],
                [550, 445, 600, 356, 680, 345, 12, 100, [
                    [578, 400, 648, 409, 661, 426, 3, 80]
                ]],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [546, 397, 413, 247, 328, 244, 9, 80, [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60]
                ]],
                [546, 357, 608, 252, 678, 221, 6, 100, [
                    [590, 293, 646, 277, 648, 271, 2, 80]
                ]]
            ]] 
        ],
        bloom: {
            num: 700,
            width: 1080,
            height: 650,
        },
        footer: {
            width: 1200,
            height: 5,
            speed: 10,
        }
    }

    var tree = new Tree(canvas[0], width, height, opts);
    var seed = tree.seed;
    var foot = tree.footer;
    var hold = 1;

    canvas.click(function(e) {
        playAudio();
        var offset = canvas.offset(), x, y;
        x = e.pageX - offset.left;
        y = e.pageY - offset.top;
        if (seed.hover(x, y)) {
            hold = 0; 
            canvas.unbind("click");
            canvas.unbind("mousemove");
            canvas.removeClass('hand');
        }
    }).mousemove(function(e) {
        var offset = canvas.offset(), x, y;
        x = e.pageX - offset.left;
        y = e.pageY - offset.top;
        canvas.toggleClass('hand', seed.hover(x, y));
    });

    var seedAnimate = eval(Jscex.compile("async", function () {
        seed.draw();
        while (hold) {
            $await(Jscex.Async.sleep(10));
        }
        while (seed.canScale()) {
            seed.scale(0.95);
            $await(Jscex.Async.sleep(10));
        }
        while (seed.canMove()) {
            seed.move(0, 2);
            foot.draw();
            $await(Jscex.Async.sleep(10));
        }
    }));

    var growAnimate = eval(Jscex.compile("async", function () {
        do {
            tree.grow();
            $await(Jscex.Async.sleep(10));
        } while (tree.canGrow());
    }));

    var flowAnimate = eval(Jscex.compile("async", function () {
        do {
            tree.flower(2);
            $await(Jscex.Async.sleep(10));
        } while (tree.canFlower());
    }));

    var moveAnimate = eval(Jscex.compile("async", function () {
        tree.snapshot("p1", 240, 0, 610, 680);
        while (tree.move("p1", 500, 0)) {
            foot.draw();
            $await(Jscex.Async.sleep(10));
        }
        foot.draw();
        tree.snapshot("p2", 500, 0, 610, 680);

        canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
        canvas.css("background", "#ffe");
        $await(Jscex.Async.sleep(300));
        canvas.css("background", "none");
    }));

    var textAnimate = eval(Jscex.compile("async", function () {
        $("#code").show().typewriter();
    }));
    
    var runAsync = eval(Jscex.compile("async", function () {
        $await(seedAnimate());
        $await(growAnimate());
        $await(flowAnimate());
        $await(moveAnimate());
        textAnimate().start();
    }));

    runAsync().start();
})();
</script>