svg-parsing.js

var parse = require("parse-svg-path");
var contours = require("svg-path-contours");
var normalizePathScale = require("normalize-path-scale");
var getBounds = require("bound-points");

const defs = require("./svg-defs.js");

const shapes = [];

module.exports.settings = {
  duration: 10,
  dimensions: [512, 512],
  fps: 25,
  animate: true
};

module.exports.setup = setup;
// Create a new canvas to the browser size
function setup() {
  createCanvas(windowWidth, windowHeight);

  for (let i = 0; i < defs.svgs.length; i++) {
    const svg = defs.svgs[i];
    const shape = getShape(svg);
    shapes.push(shape);
  }
}

function getShape(svg) {
  const result = contours(parse(svg));
  const boundsOfAllPoints = getBounds(result.flat());
  const normalizedResult = [];
  for (let i = 0; i < result.length; i++) {
    const normalized = normalizePathScale(result[i], boundsOfAllPoints);
    normalizedResult.push(normalized);
  }
  return normalizedResult;
}

// On window resize, update the canvas size
module.exports.windowResized = windowResized;
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// Render loop that draws shapes with p5
module.exports.draw = draw;
function draw(props) {
  // background
  background("black");

  // Turn off shape filling
  noFill();

  // Set the stroke color
  stroke("white");

  // Get the minimum edge of the canvas
  const dim = Math.min(width, height);

  // And use that edge to make the stroke thickness relative
  strokeWeight(dim * 0.015);

  stroke("red");
  fill(255);
  const shape = random(shapes);

  drawShape(shape, width / 2, height / 2, 100);
}

function drawShape(shape, x, y, scaleAmount) {
  push();
  translate(x, y);
  scale(scaleAmount);
  strokeWeight(width * 0.00025);
  for (let i = 0; i < shape.length; i++) {
    const line = shape[i];
    beginShape();
    for (let j = 0; j < line.length; j++) {
      const point = line[j];
      vertex(point[0], point[1]);
    }
    endShape();
  }
  pop();
}