Next Perpendicular Moonlanding

    vectorithm

    1.0.7 • Public • Published

    Vectorithm

    Vectorithm is a Node.js module to automate a logical structure of a vector graphic, algorithmic repeating and draw the vector graphic in a PDF file, so often as indicated.

    Install

    npm install vectorithm

    What?! Give me an example!

    Look at this vector graphic "source":

    Source

    We want to create 100 pieces of this graphic but the number (Nr. X) needs to be different. In addition, we want that the stroke color of the line on the bottom is different, in a way that every third time the stroke color is red, blue & green. And this logic in a loop.

    That means:

    1. "#f00"
    2. "#00f"
    3. "#0f0"
    4. "#f00"
    5. "#00f"
    6. "#0f0"
    7. "#f00"
    8. [...]

    Syntax

    That's exactly what the module does. Therefore, you pass variables into the SVG context. A variable is declared by the syntax "{{xxx}}". A variable is an array, with the items to repeat.

    There is one special variable. That is the variable "count". In difference to a normal one, in every repeat of "count" 1 is added. Of course "count" is also an array, 1 is added to every item if it's the current one of the loop.

    Variables

    Variable Items

    For example, if "color" is:

    ["#f00", "#00f", "#0f0"]

    And if "count" is:

    [0, 0]
    1. [1, 0]
    2. [1, 1]
    3. [2, 1]
    4. [2, 2]
    5. [3, 2]
    6. [3, 3]
    7. [...]

    Variables Syntax

    The variables are stored in the simple object "variables". For our example:

    {
      "color": [
        "#f00", // Red
        "#00f", // Blue
        "#0f0" // Green
      ],
      "count": [0]
    }

    Module

    Require

    var vectorithm = require("vectorithm")
     
    console.log(vectorithm)

    Parameters & Options

    Pass the options (settings) into the "options" object of the vectorithm instance (vectorithm.options)

    vectorithm.options = {
      output: __dirname + "/result.pdf", // PDF file to export
      max: 100, // Count of repeats
      border: true, // If there is a border between the items
      width: "9cm", // Width of an item
      //height: "3cm", // Height of an item (Use only, if you don't set a width)
      source: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><!--SVG Content--></svg>', // Source File
      variables: {
        "variable1": ["value1", "value2"],
        "variable2": ["valueA", "valueB"],
        "count": [0]
      } // Object containing the variables (arrays)
    }

    Width & Height

    As you saw, you can pass the width and height of your items in the options. The values are in centimeters. If you just pass the width or height, the other value will used from the "viewBox" attribute. For example, if you set the width to "9cm" and your "viewBox" is "0 0 100 50", the height will be 4.5cm.

    Create!

    The method "create" will create the PDF using the options.

    To see a complete, working example with file reading of the SVG Source, look at the "example.js" file!

    vectorithm.create(function(result) {
      console.log(result);
    })
     

    SVG Syntax

    To declare a variable in the SVG context, use {{variableName}}.

    For our example:

    If you set the all the options like this, your SVG context looks like this and you run the create() method, your result would be:

    Result

    The animation is because, your browser wants to show you every site!

    Working example

    If you are confused about everything, look at the "example.js" file on the GitHub Repository ;-)

    Install

    npm i vectorithm

    DownloadsWeekly Downloads

    0

    Version

    1.0.7

    License

    Apache-2.0

    Last publish

    Collaborators

    • mauriceconrad