Speed up development with full-stack environments for every branch.

Learn More

Hearts [jQuery, JavaScript and html5]

Forked from How to use the jQuery $().ready function.

1614 Runs 1654 Views 194 Copies

some HTML5 magic

Saved

Saved

<html><head></head><body><canvas width="800" height="800"></canvas>
<script>
var c = document.getElementsByTagName('canvas')[0];
var b = document.body;
var a = c.getContext('2d');
m = 10;
n = 100;
k = 1E3;
q = 800;

function f() {
    var g = i / 4 % q,
        t = Math.floor(i / 4 / q),
        e = this;
    e.x = j(1) * k;
    e.y = j(1) * k;
    e.j = g;
    e.k = t;
    e.a = j() * m;
    e.b = j() * m;
    e.f = 2 + j(1) * m;
    e.d = 0.05;
    e.g = "#f77";
    e.c = m + j(1) * m;
    e.e = function () {
        h = w = e.f;
        x = e.x;
        y = e.y;
        a.fillStyle = e.g;
        a.beginPath();
        a.moveTo(x + 0.5 * w, y + 0.3 * h);
        a.bezierCurveTo(x + 0.1 * w, y, x, y + 0.6 * h, x + 0.5 * w, y + 0.9 * h);
        a.bezierCurveTo(x + 1 * w, y + 0.6 * h, x + 0.9 * w, y, x + 0.5 * w, y + 0.3 * h);
        a.closePath();
        a.fill()
    };
    e.h = function () {
        x = e.x;
        y = e.y;
        b = e.c;
        l = e.j;
        m = e.k;
        x < l - e.c && (e.x = l - b, e.a *= -1);
        x > l + e.c && (e.x = l + b, e.a *= -1);
        y < m - b && (e.y = m - b, e.b *= -1);
        y > m + b && (e.y = m + b, e.b *= -1)
    };
    e.i = function () {
        e.a > n && (e.a = n);
        e.b > n && (e.b = n);
        e.x += e.a * e.d;
        e.y += e.b * e.d;
        e.h()
    }
}

function o() {
    a.fillStyle = "#333";
    a.fillRect(0, 0, q, q)
}

function j(g) {
    r = Math.random();
    return g ? 2 * r - 1 : r
}
c.width = q;
c.height = q;
o();
a.fillStyle = "black";
a.font = "300px sans-serif";
a.fillText("LOVE", 0, 300, q);
id = a.getImageData(0, 0, q, q);
d = id.data;
s = 0;
pa = [];
for (i = 0; i < d.length; i += 4) 0 == d[i] && (s++, 0 == s % 30 && (p = new f, p.e(), pa.push(p)));
s = setInterval(function () {
    o();
    for (i in pa) p = pa[i], p.i(), p.e()
}, k / 60);
</script></body></html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).