Old Codepen 2013
$(function () {
var canvas = $("<canvas>").appendTo("body"),
win = $(window),
cnvs = canvas[0],
c = cnvs.getContext("2d"),
el = $("<div>"),
letters = [],
NUM = 10,
TWO_PI = Math.PI * 2;
c.font = "16px sans-serif";
win
.resize(function () {
cnvs.width = win.width();
cnvs.height = win.height();
c.fillStyle = "white";
c.fillRect(0, 0, cnvs.width, cnvs.height);
})
.trigger("resize");
function symbol() {
var r = parseInt(Math.random() * 9999),
s = "&#" + r + ";";
el.html(s);
return el.html();
}
function Letter() {}
Letter.prototype.init = function () {
this.x = Math.random() * win.width();
this.y = Math.random() * win.height();
this.sym = symbol();
this.rot = Math.random() * 2 * Math.PI;
this.rotVel = Math.random() * 0.02 - 0.01;
this.size = 1 + Math.random() * 10;
this.sizeVel = Math.random() * 0.2;
this.col = ["black", "white", "#999"][parseInt(Math.random() * 3)];
this.rad = Math.random();
this.vx = this.rad * Math.cos(Math.random() * TWO_PI);
this.vy = this.rad * Math.sin(Math.random() * TWO_PI);
this.life = 0;
this.maxLife = parseInt(Math.random() * 200);
if (Math.random() < 0.1) {
this.doGrad = true;
this.channel = parseInt(Math.random() * 200);
}
this.shadow = false;
if (Math.random() < 0.1) {
this.shadow = true;
}
};
Letter.prototype.run = function () {
if (this.doGrad) {
this.channel += 1;
this.col =
"rgb(" + this.channel + "," + this.channel + "," + this.channel + ")";
}
if (this.shadow == true) {
c.shadowBlur = 100;
c.shadowColor = "rgba(76,105,135,0.2)";
}
this.size += this.sizeVel;
this.rot += this.rotVel;
this.x += this.vx;
this.y += this.vy;
c.save();
c.translate(this.x, this.y);
c.scale(this.size, this.size);
c.rotate(this.rot);
c.fillStyle = this.col;
c.fillText(this.sym, -this.size / 2, -this.size / 2);
c.restore();
this.life++;
if (this.life >= this.maxLife) {
this.init();
//console.log("respurn");
}
};
for (var i = 0; i < NUM; i++) {
var letter = (letters[i] = new Letter());
letter.init();
}
setInterval(function () {
for (var i = 0; i < NUM; i++) {
letters[i].run();
}
}, 30);
});
It’s fun to look through old code….
See the Pen Symbolz by Zevan Rosser (@ZevanRosser) on CodePen.