Skip to content

Instantly share code, notes, and snippets.

@rocketeerbkw

rocketeerbkw/crypt20.html

Created December 30, 2014 20:45
Show Gist options
  • Save rocketeerbkw/c864e70bb6e4b99a2505 to your computer and use it in GitHub Desktop.
Save rocketeerbkw/c864e70bb6e4b99a2505 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crypt20.html
<!DOCTYPE html>
<html>
<head>
<style>
.pixel {
width: 2px;
height: 2px;
float: left;
}
</style>
</head>
<body>
<script>
time = 13;
width = 320;
height = 320;
balls = [
{x: 296, y: 211, dx: -28, dy: -28 },
{x: 248, y: 221, dx: +16, dy: +22 },
{x: 310, y: 221, dx: +30, dy: +22 },
{x: 300, y: 263, dx: +30, dy: -24 },
{x: 176, y: 263, dx: -28, dy: -24 },
{x: 195, y: 91, dx: +5, dy: +12 },
{x: 230, y: 104, dx: +30, dy: +13 },
{x: 220, y: 273, dx: +30, dy: +26 },
{x: 213, y: 52, dx: -19, dy: +9 },
{x: 112, y: 26, dx: +24, dy: -3 },
{x: 170, y: 260, dx: -20, dy: +15 }, // 10
{x: 143, y: 289, dx: +31, dy: -22 },
{x: 43, y: 211, dx: -19, dy: -28 },
{x: 282, y: 114, dx: -26, dy: +3 },
{x: 25, y: 292, dx: +5, dy: -21 },
{x: 54, y: 172, dx: -2, dy: +19 },
{x: 254, y: 185, dx: -22, dy: +20 },
{x: 289, y: 263, dx: +13, dy: +26 },
{x: 283, y: 172, dx: +11, dy: +19 },
{x: 38, y: 240, dx: +16, dy: -25 },
{x: 50, y: 75, dx: -30, dy: +0 }, // 20
{x: 290, y: 289, dx: -10, dy: +28 },
{x: 315, y: 107, dx: -5, dy: +14 },
{x: 285, y: 211, dx: -5, dy: +22 },
{x: 309, y: 319, dx: -27, dy: +18 },
{x: 261, y: 32, dx: +17, dy: +9 },
{x: 258, y: 85, dx: +26, dy: +0 },
{x: 155, y: 46, dx: +5, dy: -3 },
{x: 204, y: 06, dx: +8, dy: +7 },
{x: 29, y: 308, dx: -7, dy: -19 },
{x: 208, y: 295, dx: +26, dy: -20 }, // 30
{x: 49, y: 59, dx: -7, dy: -2 },
{x: 93, y: 111, dx: -29, dy: +2 },
{x: 57, y: 240, dx: -11, dy: +25 },
{x: 303, y: 305, dx: -9, dy: +30 },
{x: 81, y: 256, dx: -23, dy: -23 },
{x: 55, y: 32, dx: +25, dy: +9 },
{x: 30, y: 267, dx: +30, dy: +14 },
{x: 12, y: 189, dx: -26, dy: +8 },
{x: 175, y: 82, dx: +15, dy: -1 },
{x: 196, y: 69, dx: +12, dy: -2 }, // 40
{x: 15, y: 43, dx: -5, dy: -4 },
{x: 208, y: 285, dx: -24, dy: -20 },
{x: 153, y: 56, dx: +1, dy: -3 },
{x: 181, y: 108, dx: +27, dy: +1 },
{x: 05, y: 191, dx: -15, dy: +22 },
{x: 183, y: 194, dx: +31, dy: -27 },
{x: 113, y: 178, dx: +31, dy: +21 },
{x: 228, y: 66, dx: +16, dy: -3 },
{x: 204, y: 222, dx: +18, dy: +9 },
{x: 79, y: 248, dx: +3, dy: +11 }, // 50
{x: 317, y: 209, dx: -31, dy: +8 },
{x: 120, y: 27, dx: +0, dy: -6 },
{x: 231, y: 220, dx: +7, dy: +25 },
{x: 160, y: 158, dx: +0, dy: -29 },
{x: 92, y: 14, dx: -6, dy: -7 },
{x: 63, y: 222, dx: -9, dy: +9 },
{x: 213, y: 298, dx: +1, dy: +31 },
{x: 274, y: 64, dx: -12, dy: +13 },
{x: 56, y: 233, dx: -18, dy: +26 },
{x: 123, y: 99, dx: +11, dy: +18 }, // 60
{x: 251, y: 258, dx: +17, dy: -19 },
{x: 287, y: 115, dx: +19, dy: -30 },
{x: 271, y: 219, dx: -23, dy: -22 },
{x: 113, y: 177, dx: +1, dy: +24 },
{x: 215, y: 271, dx: +25, dy: -18 },
{x: 237, y: 232, dx: +9, dy: -21 },
{x: 114, y: 174, dx: -2, dy: +3 },
{x: 87, y: 60, dx: +19, dy: +15 },
{x: 161, y: 05, dx: -23, dy: -10 },
{x: 86, y: 44, dx: -8, dy: -7 }, // 70
{x: 63, y: 242, dx: -29, dy: +29 },
{x: 194, y: 83, dx: -2, dy: -4 },
{x: 198, y: 213, dx: -4, dy: +6 },
{x: 124, y: 138, dx: -12, dy: +21 },
{x: 311, y: 60, dx: -3, dy: +15 },
{x: 305, y: 171, dx: +25, dy: +2 },
{x: 90, y: 106, dx: +10, dy: -3 },
{x: 164, y: 02, dx: +8, dy: -11 },
{x: 287, y: 106, dx: -21, dy: -3 },
{x: 121, y: 50, dx: +17, dy: +15 }, // 80
{x: 101, y: 02, dx: +17, dy: -11 },
{x: 110, y: 193, dx: -30, dy: +26 },
{x: 43, y: 193, dx: -9, dy: +26 },
{x: 164, y: 145, dx: -2, dy: +0 },
{x: 186, y: 313, dx: -18, dy: -14 },
{x: 07, y: 171, dx: -31, dy: +2 },
{x: 234, y: 262, dx: -12, dy: +9 },
{x: 16, y: 167, dx: +22, dy: +24 },
{x: 175, y: 147, dx: +15, dy: -26 },
{x: 233, y: 303, dx: -29, dy: -14 }, // 90
{x: 40, y: 285, dx: +0, dy: +10 },
{x: 216, y: 246, dx: -28, dy: +7 },
{x: 57, y: 12, dx: -1, dy: -11 },
{x: 262, y: 134, dx: +14, dy: -27 },
{x: 230, y: 64, dx: +10, dy: -7 },
{x: 149, y: 298, dx: +3, dy: +11 },
{x: 214, y: 90, dx: -22, dy: -5 },
{x: 214, y: 160, dx: +28, dy: -25 },
{x: 125, y: 251, dx: -25, dy: -18 },
{x: 116, y: 196, dx: -8, dy: +27 }, // 100
{x: 88, y: 272, dx: -24, dy: +9 },
{x: 276, y: 129, dx: +2, dy: -2 },
{x: 162, y: 12, dx: -16, dy: -11 },
{x: 181, y: 181, dx: -13, dy: +2 },
{x: 214, y: 121, dx: +18, dy: +22 },
{x: 310, y: 178, dx: -30, dy: +1 },
{x: 258, y: 61, dx: +26, dy: -8 },
{x: 280, y: 228, dx: -20, dy: -19 },
{x: 130, y: 293, dx: -30, dy: -14 },
{x: 218, y: 61, dx: +6, dy: -8 }, // 110
{x: 173, y: 306, dx: +1, dy: -13 },
{x: 200, y: 215, dx: +30, dy: -20 },
{x: 272, y: 134, dx: +4, dy: +23 },
{x: 143, y: 202, dx: -19, dy: -21 },
{x: 133, y: 85, dx: +31, dy: -30 },
{x: 14, y: 17, dx: +28, dy: +14 },
{x: 06, y: 175, dx: +2, dy: +0 },
{x: 304, y: 228, dx: +28, dy: +31 },
{x: 115, y: 214, dx: +15, dy: +3 },
{x: 238, y: 162, dx: +26, dy: -1 }, // 120
{x: 192, y: 84, dx: +24, dy: -7 },
{x: 29, y: 07, dx: +13, dy: +14 },
{x: 142, y: 127, dx: -26, dy: -26 },
{x: 187, y: 257, dx: -21, dy: -16 },
{x: 96, y: 101, dx: +22, dy: -28 },
{x: 180, y: 59, dx: -20, dy: +18 },
{x: 95, y: 84, dx: -25, dy: -7 },
{x: 312, y: 07, dx: -6, dy: +14 },
{x: 58, y: 166, dx: +26, dy: -23 },
{x: 87, y: 202, dx: +29, dy: +29 }, // 130
{x: 51, y: 68, dx: +7, dy: +21 },
{x: 245, y: 127, dx: +15, dy: -6 },
{x: 239, y: 159, dx: +23, dy: +28 },
{x: 275, y: 62, dx: +15, dy: -11 },
{x: 147, y: 159, dx: -31, dy: +28 },
{x: 303, y: 146, dx: +31, dy: +27 },
{x: 286, y: 55, dx: -18, dy: +20 },
{x: 107, y: 270, dx: -31, dy: +5 },
{x: 263, y: 153, dx: +31, dy: -4 },
{x: 135, y: 296, dx: -25, dy: +7 }, // 140
{x: 66, y: 107, dx: +22, dy: +24 },
{x: 305, y: 270, dx: +5, dy: +5 },
{x: 185, y: 253, dx: -5, dy: -14 },
{x: 221, y: 198, dx: -3, dy: +31 },
{x: 188, y: 205, dx: -14, dy: +0 },
{x: 105, y: 98, dx: +5, dy: -9 },
{x: 106, y: 136, dx: +2, dy: +27 },
{x: 199, y: 295, dx: +23, dy: -10 },
{x: 172, y: 293, dx: +4, dy: +6 },
{x: 201, y: 176, dx: -23, dy: -3 }, // 150
{x: 278, y: 19, dx: -14, dy: +18 },
{x: 213, y: 306, dx: +31, dy: +7 },
{x: 222, y: 175, dx: -16, dy: +30 },
{x: 103, y: 202, dx: -9, dy: -1 },
{x: 270, y: 165, dx: -10, dy: -20 },
{x: 77, y: 155, dx: +9, dy: -20 },
{x: 200, y: 134, dx: -30, dy: -7 },
{x: 226, y: 316, dx: +22, dy: +7 },
{x: 67, y: 116, dx: -1, dy: -23 },
{x: 04, y: 61, dx: +8, dy: +22 }, // 160
{x: 276, y: 103, dx: +12, dy: -24 },
{x: 234, y: 178, dx: +28, dy: +31 },
{x: 50, y: 207, dx: -10, dy: -16 },
{x: 164, y: 246, dx: +28, dy: -13 },
{x: 160, y: 56, dx: -20, dy: -13 },
{x: 59, y: 12, dx: +23, dy: -31 },
{x: 260, y: 126, dx: -10, dy: +27 },
{x: 65, y: 17, dx: +25, dy: -16 },
{x: 49, y: 129, dx: -17, dy: -22 },
{x: 40, y: 248, dx: +0, dy: +1 }, // 170
{x: 245, y: 53, dx: +25, dy: -14 },
{x: 238, y: 236, dx: +26, dy: -13 },
{x: 250, y: 12, dx: +10, dy: +19 },
{x: 185, y: 184, dx: +25, dy: -17 },
{x: 226, y: 103, dx: -18, dy: +26 },
{x: 12, y: 02, dx: -16, dy: -31 },
{x: 227, y: 53, dx: -1, dy: -14 },
{x: 197, y: 18, dx: -31, dy: -29 },
{x: 128, y: 161, dx: +16, dy: -18 },
{x: 259, y: 317, dx: +13, dy: -6 }, // 180
{x: 256, y: 200, dx: +12, dy: -15 },
{x: 16, y: 05, dx: -8, dy: -30 },
{x: 120, y: 119, dx: +20, dy: +28 },
{x: 63, y: 245, dx: -9, dy: +0 },
{x: 105, y: 115, dx: +25, dy: -10 },
{x: 162, y: 265, dx: -6, dy: -10 },
{x: 156, y: 226, dx: -18, dy: -13 },
{x: 10, y: 41, dx: +30, dy: +22 },
{x: 283, y: 187, dx: +1, dy: -16 }
];
for (var t = time-1; t >= 0; t--) {
for (var i = 0; i < balls.length; i++) {
ball = balls[i];
if (ball.dx < 0) {
ball.x -= ball.dx;
if (ball.x > width) {
ball.x = width - (ball.x - width);
ball.dx *= -1;
}
}
else if (ball.dx > 0) {
ball.x -= ball.dx;
if (ball.x < 0) {
ball.x *= -1;
ball.dx *= -1;
}
}
if (ball.dy < 0) {
ball.y -= ball.dy;
if (ball.y > width) {
ball.y = width - (ball.y - width);
ball.dy *= -1;
}
}
else if (ball.dy > 0) {
ball.y -= ball.dy;
if (ball.y < 0) {
ball.y *= -1;
ball.dy *= -1;
}
}
}
}
pic = [];
for (var i = 0; i < balls.length; i++) {
ball = balls[i];
if (!pic[ball.x]) {
pic[ball.x] = [];
}
pic[ball.x][ball.y] = i;
}
out = "";
for (var y = 0; y < width; y++) {
for (var x = 0; x < height; x++) {
if (pic[x] && pic[x][y]) {
out += '<div class="pixel" style="background-color: #fff;" onclick="alert(this.id);" id="x' + x + 'y' + y + 'b' + pic[x][y] + '"></div>';
}
else {
out += '<div class="pixel" style="background-color: #000;"></div>';
}
}
out += "<div style='clear: both;'>";
}
pre = document.createElement('div');
pre.innerHTML = out;
document.getElementsByTagName('body')[0].appendChild(pre);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment