| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <title>GPF-JS logo</title>
|
| 6 | <script language="JavaScript">
|
| 7 | var gpfSourcesPath = "../src/";
|
| 8 | </script>
|
| 9 | <script language="JavaScript" src="../src/boot.js"></script>
|
| 10 | <script language="JavaScript">
|
| 11 |
|
| 12 | function onLoad() {
|
| 13 | var svg = document.getElementById("svg"),
|
| 14 | path = gpf.web.createTagFunction("svg:path");
|
| 15 |
|
| 16 |
|
| 17 | var WIDTH = 14,
|
| 18 | HEIGHT = 9,
|
| 19 | grid = new Array(WIDTH * HEIGHT);
|
| 20 | [
|
| 21 | [2, 5, 8, 0, 12, 13],
|
| 22 | [1, 0, 7, 0, 9, 11],
|
| 23 | [2, 12],
|
| 24 | [0, 0, 2, 12],
|
| 25 | [0, 0, 2, 11, 13],
|
| 26 | [0, 1, 3, 10, 13],
|
| 27 | [3, 10, 12],
|
| 28 | [0, 0, 2, 10, 12, 13],
|
| 29 | [4, 0, 8]
|
| 30 | ].forEach(function (row, y) {
|
| 31 | var idx = 0;
|
| 32 | while (idx < row.length) {
|
| 33 | var fromX = row[idx++],
|
| 34 | x = row[idx++] || fromX;
|
| 35 | while (x >= fromX) {
|
| 36 | grid[y * WIDTH + x--] = true;
|
| 37 | }
|
| 38 | }
|
| 39 | });
|
| 40 |
|
| 41 | function tile (x, y) {
|
| 42 | return path({
|
| 43 | fill: "url(#tile)",
|
| 44 | stroke: "rgb(255,255,255)",
|
| 45 | "stroke-width": .1,
|
| 46 | d: ["M", x, y, "L", x + 1, y - 1, "L", x + 2, y - 1, "L", x + 3, y,
|
| 47 | "L", x + 2, y + 1, "L", x + 1, y + 1, "L", x, y].join(" ")
|
| 48 | })
|
| 49 | }
|
| 50 |
|
| 51 | var vectors = [];
|
| 52 |
|
| 53 | function addVector(mx, my, lx, ly) {
|
| 54 | vectors.push({mx: mx, my: my, lx: lx, ly: ly});
|
| 55 | }
|
| 56 |
|
| 57 | grid.forEach(function (_, pos) {
|
| 58 | var x = pos % WIDTH,
|
| 59 | y = (pos - x) / WIDTH,
|
| 60 | x0 = 1 + x * 2,
|
| 61 | y0 = 2 + y * 2 + x % 2,
|
| 62 | yUp,
|
| 63 | yDown;
|
| 64 | if (x % 2) {
|
| 65 | yUp = y;
|
| 66 | yDown = y + 1;
|
| 67 | } else {
|
| 68 | yUp = y - 1;
|
| 69 | yDown = y;
|
| 70 | }
|
| 71 | tile(x0, y0).appendTo(svg);
|
| 72 | if (0 === y || !grid[(y - 1) * WIDTH + x]) {
|
| 73 | addVector(x0 + 1, y0 - 1, x0 + 2, y0 - 1);
|
| 74 | }
|
| 75 | if (0 === x) {
|
| 76 | addVector(x0, y0, x0 + 1, y0 - 1);
|
| 77 | addVector(x0 + 1, y0 + 1, x0, y0);
|
| 78 | } else {
|
| 79 | if (-1 === yUp || !grid[yUp * WIDTH + x - 1]) {
|
| 80 | addVector(x0, y0, x0 + 1, y0 - 1);
|
| 81 | }
|
| 82 | if (HEIGHT > y && !grid[yDown * WIDTH + x - 1]) {
|
| 83 | addVector(x0 + 1, y0 + 1, x0, y0);
|
| 84 | }
|
| 85 | }
|
| 86 | if (WIDTH - 1 === x) {
|
| 87 | addVector(x0 + 2, y0 - 1, x0 + 3, y0);
|
| 88 | addVector(x0 + 3, y0, x0 + 2, y0 + 1);
|
| 89 | } else {
|
| 90 | if (-1 === yUp || !grid[yUp * WIDTH + x + 1]) {
|
| 91 | addVector(x0 + 2, y0 - 1, x0 + 3, y0);
|
| 92 | }
|
| 93 | if (HEIGHT > y && !grid[yDown * WIDTH + x + 1]) {
|
| 94 | addVector(x0 + 3, y0, x0 + 2, y0 + 1);
|
| 95 | }
|
| 96 | }
|
| 97 | if (HEIGHT - 1 === y || !grid[(y + 1) * WIDTH + x]) {
|
| 98 | addVector(x0 + 2, y0 + 1, x0 + 1, y0 + 1);
|
| 99 | }
|
| 100 | });
|
| 101 |
|
| 102 | while (vectors.length) {
|
| 103 | var border = vectors.pop();
|
| 104 | border.d = [border.mx + " " + border.my, border.lx + " " + border.ly];
|
| 105 | while (!vectors.every(function (vector, idx) {
|
| 106 | var match = false;
|
| 107 | if (vector.lx === border.mx && vector.ly === border.my) {
|
| 108 | border.d.unshift(vector.mx + " " + vector.my);
|
| 109 | border.mx = vector.mx;
|
| 110 | border.my = vector.my;
|
| 111 | vectors.splice(idx, 1);
|
| 112 | match = true;
|
| 113 | }
|
| 114 | if (vector.mx === border.lx && vector.my === border.ly) {
|
| 115 | border.d.push(vector.lx + " " + vector.ly);
|
| 116 | border.lx = vector.lx;
|
| 117 | border.ly = vector.ly;
|
| 118 | match = true;
|
| 119 | }
|
| 120 | if (match) {
|
| 121 | vectors.splice(idx, 1);
|
| 122 | return false;
|
| 123 | }
|
| 124 | return true;
|
| 125 | })) {}
|
| 126 |
|
| 127 | path({
|
| 128 | fill: "none",
|
| 129 | stroke: "rgb(0,0,0)",
|
| 130 | "stroke-width": .2,
|
| 131 | d: "M " + border.d.join(" L ")
|
| 132 | }).appendTo(svg);
|
| 133 | }
|
| 134 |
|
| 135 | function ref (_refX, _refY) {
|
| 136 | var _d = [];
|
| 137 | function _at(x, y) {
|
| 138 | if (0 === _refX % 2 && x % 2) {
|
| 139 | --y;
|
| 140 | }
|
| 141 | var absX = _refX + x,
|
| 142 | svgX = 2.5 + 2 * absX,
|
| 143 | svgY = 2 + 2 * (_refY + y) + absX % 2;
|
| 144 | return svgX + " " + svgY;
|
| 145 | }
|
| 146 | return {
|
| 147 | m: function (x, y) {
|
| 148 | _d.push("M", _at(x, y));
|
| 149 | return this;
|
| 150 | },
|
| 151 |
|
| 152 | l: function (x, y) {
|
| 153 | _d.push("L", _at(x, y));
|
| 154 | return this;
|
| 155 | },
|
| 156 |
|
| 157 | toString: function () {
|
| 158 | return _d.join(" ");
|
| 159 | }
|
| 160 | };
|
| 161 | }
|
| 162 |
|
| 163 | function letter(d) {
|
| 164 | return path({
|
| 165 | fill: "none",
|
| 166 | stroke: "rgba(64,0,128,.3)",
|
| 167 | "stroke-width": 1,
|
| 168 | d: d.toString()
|
| 169 | });
|
| 170 | }
|
| 171 |
|
| 172 | function g (x, y) {
|
| 173 | return ref(x, y).m(0, 0).l(1, 1).l(2, 0).l(2, -3).l(1, -3).l(0, -3).l(0, -2).l(1, -1);
|
| 174 | }
|
| 175 |
|
| 176 | function p (x, y) {
|
| 177 | return ref(x, y).m(0, 0).l(0, -3).l(1, -3).l(2, -3).l(2, -2).l(1, -1);
|
| 178 | }
|
| 179 |
|
| 180 | function f (x, y) {
|
| 181 | return ref(x, y).m(0, 0).l(1, 1).l(2, 0).l(2, -4).l(3, -4).l(4, -4).m(1, -1).l(3, -2);
|
| 182 | }
|
| 183 |
|
| 184 | letter(g(3, 6)).appendTo(svg);
|
| 185 | letter(p(6, 6)).appendTo(svg);
|
| 186 | letter(f(7, 6)).appendTo(svg);
|
| 187 |
|
| 188 | }
|
| 189 |
|
| 190 | </script>
|
| 191 | </head>
|
| 192 | <body onload="onLoad()">
|
| 193 | <svg id="svg" width="320" height="200" viewBox="0 0 32 20">
|
| 194 | <defs>
|
| 195 | <linearGradient id="tile" x1="0" y1="0" x2="100%" y2="100%">
|
| 196 | <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
|
| 197 | <stop offset="100%" style="stop-color:rgb(200,200,200); stop-opacity:1" />
|
| 198 | </linearGradient>
|
| 199 | </defs>
|
| 200 | </svg>
|
| 201 | </body>
|
| 202 | </html>
|