Bamboo Spark Demo

Shows how Bamboo Spark sketches can be used as raw data

by Ralf Müller

HTML

<canvas id="canvas" width="500px" height="500px">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<data id="data">
513.55847 1942.47168 m
513.55847 1942.47168 516.65887 1942.47168 518.20911 1942.47168 c
519.95715 1942.47168 521.73096 1942.29285 523.44275 1941.93872 c
531.01318 1940.37231 537.62848 1937.14478 542.12646 1930.58691 c
545.82648 1925.19238 548.01154 1918.21655 548.74677 1911.76294 c
550.35883 1897.61328 549.34119 1883.53223 545.59595 1869.76001 c
543.45929 1861.90308 540.60889 1853.85059 536.82648 1846.62964 c
527.36774 1828.57202 515.46515 1811.02319 499.70798 1797.79492 c
489.5596 1789.27539 478.9664 1781.71167 466.09293 1777.9292 c
456.53998 1775.12244 446.80127 1774.59473 436.93439 1775.38403 c
431.19278 1775.84326 425.19705 1777.50342 419.88223 1779.70093 c
390.36234 1791.90637 378.66052 1827.67993 385.11353 1857.28467 c
387.53409 1868.38965 392.84433 1878.2522 398.75793 1887.8363 c
406.55569 1900.474 416.8768 1911.79443 429.10959 1920.2522 c
435.5817 1924.72705 442.52307 1928.25574 449.59851 1931.64905 c
463.24081 1938.19177 478.24133 1941.46411 493.03683 1937.76587 c
493.11063 1937.74731 499.36197 1940.15601 502.63168 1940.80273 c
509.61557 1942.18408 515.76727 1942.76514 522.85968 1942.04382 c
513.55847 1937.59448 m
513.55847 1937.59448 510.49142 1937.49536 508.98636 1937.22595 c
504.19659 1936.3689 502.40015 1936.04639 498.05417 1934.88745 c
497.98273 1934.86841 499.43329 1933.7998 499.92307 1933.06519 c
501.02838 1931.40723 501.26382 1930.10364 500.59274 1928.22461 c
500.56638 1928.15088 499.40079 1927.05518 498.72092 1927.19116 c
497.85101 1927.36523 497.63489 1928.10059 497.48178 1928.81519 c
497.46597 1928.88904 496.33026 1929.95435 495.69751 1930.40393 c
494.71866 1931.09937 492.66791 1932.87524 491.19138 1932.87524 c
491.11752 1932.87524 490.24582 1932.55542 489.78879 1932.5061 c
488.92923 1932.41357 487.81671 1932.73853 487.52502 1933.6134 c
487.50043 1933.68726 486.28265 1934.04126 485.65494...

CSS

canvas {
  border: 1px solid green;
}

data {
  visibility: hidden;
}

JavaScript

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
function tx(x) { return (x-minx)/s;}
function ty(y) { return (500 - (y - miny) / s);}
var my_canvas = document.getElementById('canvas'),
  ctx = my_canvas.getContext("2d");
ctx.strokeStyle="black";
ctx.fillStyle = "yellow";
ctx.lineWidth=2;
var pdf = $("#data").html().split("\n");
$("#data").html(pdf);

var minx = 100000,
    maxx = 0,
    miny = 100000,
    maxy = 0;
pdf.forEach(function(entry) {
  var line = entry.split(" ");
  if (isNumeric(line[0])) {
    var x = parseFloat(line[0]);
    var y = parseFloat(line[1]);
    if (minx > x) {
      minx = x;
      console.log("test3");
    }
    if (maxx < x) {
      maxx = x
    }
    if (miny > y) {
      miny = y
    }
    if (maxy > y) {
      maxy = y
    }
  }
});
minx -= 5;
ctx.beginPath();
ctx.moveTo(0, 0);
var s = 0.5;
pdf.forEach(function(entry) {
  var line = entry.split(" ");
  if (isNumeric(line[0])) {
    var x = parseFloat(line[0]);
    var y = parseFloat(line[1]);
    if (line[2] == 'm') {
      ctx.moveTo(tx(line[0]), ty(line[1]));
    }
    if (line[6] == 'c') {
      ctx.bezierCurveTo(tx(line[0]), ty(line[1]), tx(line[2]), ty(line[3]), tx(line[4]), ty(line[5]));
    }
  }
  if (line[0] == 'h') {
    ctx.closePath();
    ctx.fill();
  }
});
ctx.stroke();

ctx.fillStyle = "red";
pdf.forEach(function(entry) {
  var line = entry.split(" ");
  if (isNumeric(line[0])) {
    if (line[2] == 'm') {
      ctx.fillRect(tx(line[0]), ty(line[1]), 2, 2);
    }
    if (line[6] == 'c') {
      ctx.fillRect(tx(line[0]), ty(line[1]), 2, 2);
      ctx.fillRect(tx(line[2]), ty(line[3]), 1, 1);
      ctx.fillRect(tx(line[4]), ty(line[5]), 2, 2);
    }
  }
});