npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

origami-diagrams

v0.1.1

Published

origami diagram builder using FOLD files and SVG, CSS, and HTML for rendering

Downloads

7

Readme

Origami Diagrams

Build Status

convert a FOLD object into origami diagrams.

FOLD

see example.fold inside /tests as a reference.

presently, this program is reading a FOLD file in this way:

{
  "file_spec": 1.1,
  "file_author": "Robby Kraft",
  "file_title": "African Elephant",
  "file_description": "a complex 3D African elephant with color changing tusks",
  "file_classes": ["diagrams"],
  "file_frames": [{
    ...
  }, {
    ...
  }, {
    ...
  }]
}

The top level only contains "file_" entries (no FOLD geometry). file_frames contains the ordered list of steps to be diagrammed.

  "file_frames": [{
    "frame_classes": ["diagrams"],
    "re:diagrams": {
      ...
    },
    ...
  }, {
    "frame_classes": ["diagrams"]
    "re:diagrams": {
      ...
    },
    ...
  }, {

Somewhere we need to allow the ability to include additional information such as a finished crease pattern or folded form to be printed in places like the page header. Presently, these are included in file_frames, requiring the need to differentiate between diagram steps, and non-diagram steps.

  1. If a frame is meant to be a step in the diagram it should have some kind of designation, perhaps a frame_classes "diagrams" entry.
  2. alternatively inclusion can be implied by the presence of re:diagrams key, where the actual diagramming data lives. though, this gives the key a dual purpose (layout instructions, and inclusion-in-diagram), which could lead to confusion.

FOLD Extensions

all keys not standard to the FOLD format currently use the Rabbit Ear namespace, "re:"

each diagram step (entry in the file_frames) contains the FOLD geometry for the origami (vertices_coords, faces_vertices), as well as instructions to the renderer regarding diagramming. the re:diagrams frame is laid out like this:

"re:diagrams": [{
  "re:diagram_lines": [
    {
      "re:diagram_line_classes": ["valley"],
      "re:diagram_line_coords": [[0.5, 0], [1, 0.5]]
    }
  ],
  "re:diagram_arrows":[
    {
      "re:diagram_arrow_classes": [],
      "re:diagram_arrow_coords": [[1, 0], [0.5, 0.5]]
    }
  ],
  "re:diagram_instructions": {
    "en": "valley fold",
    "es": "doblez de valle",
    "zh": "谷摺"
  },
  "re:diagram_step": "1"
}]

re:diagrams is an array, sometimes diagram steps contain multiple steps inside ("reverse fold the beak, crimp the feet"). also, both arrow and line definitions are arrays making room for multiple arrows or lines per step.

re:diagram_lines

contains an array of lines to represent crease lines, like dashed lines or solid marks. line is defined by two endpoints re:diagram_line_coords, and diagram_arrow_classes are directions to the rendering engine to describe the line style.

re:diagram_arrows

an array containing definitions for arrows. re:diagram_arrow_coords are the two endpoints, ordered start to end. re:diagram_arrow_classes are directions to the rendering engine to describe the arrow style.

re:diagram_instructions

written instructions, typically these are printed under each step. this is an object with each string under a key matching the ISO language codes.

re:diagram_step

making it possible to have steps with custom names: 1, 2, 3a, 3b, 4...

License

MIT