Source code of plot #033 back to plot

Download full working sketch as 033.tar.gz.
Unzip, then start a local web server and load the page in a browser.

Unless otherwise noted, code published here is © Gábor L Ugray, shared under the Creative Commons BY-NC-SA license (Attribution, Non-Commercial, Share-Alike). Files in lib/thirdparty, and additional libraries in the downloadable archive, are shared under their respective open-source licenses, attributed to their authors.

let libsPending = 0;
let sketchFun;

function setSketch(fun) {
  if (typeof document !== 'undefined') {
    document.addEventListener('DOMContentLoaded', () => {
      sketchFun = fun;
      if (libsPending == 0) sketchFun();
    });
  }
}

function scriptname() {
  const d = new Date();
  const dateStr = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" +
    ("0" + d.getDate()).slice(-2) + "!" +
    ("0" + d.getHours()).slice(-2) + "-" + ("0" + d.getMinutes()).slice(-2);
  return '78-concrete-perspective' + "-" + dateStr;
}

function loadLib(name) {

  var script = document.createElement('script');
  script.src = "lib/" + name + ".js";
  script.onload = function () {
    --libsPending;
    if (libsPending == 0 && sketchFun) sketchFun();
  };
  ++libsPending;
  document.head.appendChild(script);
}

function init(w, h, pw, ph) {
  document.title = scriptname();

  paper.install(window);
  paper.settings.insertItems = false;

  const elmDrawing = document.getElementById("drawing");
  elmDrawing.innerHTML = "<canvas id='paper-canvas'></canvas>";
  paper.setup("paper-canvas");
  paper.project.activeLayer.name = "0-base";

  if (!pw) {
    pw = w;
    ph = h;
  }
  const elmCanvas = document.getElementById("paper-canvas");
  elmCanvas.width = w;
  elmCanvas.height = h;
  const pxWidth = elmDrawing.clientWidth;
  elmCanvas.style.width = pxWidth + "px";
  elmCanvas.style.height = (pxWidth * h / w) + "px";

  const elmRender = document.getElementById("render");
  elmRender.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    elmRender.setAttribute("href", "");
    setTimeout(function () {
      renderSvg(w, h, pw, ph);
      elmRender.style.display = "none";
      document.getElementById("download").style.display = "block";
    }, 50);
  });
}

function renderSvg(w, h, pw, ph) {
  const elmSvg = project.exportSVG({
    asString: false,
    precision: 3,
    matchShapes: false,
  });
  elmSvg.setAttribute("width", (pw / 10) + "mm");
  elmSvg.setAttribute("height", (ph / 10) + "mm");
  let left = (w - pw) / 2;
  let top = (h - ph) / 2;
  elmSvg.setAttribute("viewBox", left + "," + top + "," + pw + "," + ph);

  elmSvg.setAttribute("xmlns:sodipodi", "http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd");
  elmSvg.setAttribute("xmlns:inkscape", "http://www.inkscape.org/namespaces/inkscape");

  let svgStr = elmSvg.outerHTML;
  svgStr = svgStr.replaceAll("<path></path>", "");
  svgStr = svgStr.replaceAll(/<g id="([^"]+)"/g, "$& inkscape:groupmode='layer' inkscape:label='$1'");

  // <g id="0-base"

  var file;
  var data = [];
  data.push(svgStr);
  var properties = { type: 'image/svg+xml' };
  try { file = new File(data, scriptname() + ".svg", properties); }
  catch { file = new Blob(data, properties); }
  var url = URL.createObjectURL(file);
  document.getElementById('download').href = url;
  document.getElementById('download').download = scriptname() + ".svg";
}

function info(str) {
  document.getElementById("info").getElementsByTagName("label")[0].textContent = str;
}

function clear() {
  paper.project.clear();
  dbgRedraw();
}

function dbgRedraw() {
  const canvas = document.getElementById("paper-canvas");
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  paper.view.draw();
}

export { init, renderSvg, info, loadLib, setSketch, clear, dbgRedraw };