Creating Cut and Folds or Pop-Up Patterns with Typescript

In this article, we'll explore how to use TypeScript and Solandra-SVG to generate physical cut-and-fold and pop-up patterns. You will create physical artifacts from code.

The Graphics Library

I created a library for SVG graphics in TypeScript a few years ago. It offers a TypeScript friendly API with good autocompletion and concise code that leverages fluent APIs: the method call returns the object for further method calls. This approach is a bit non-standard these days as it is more of an OOP pattern, but works nicely. One of the challenges with SVG is remembering all the random API names (is it cx or x?) but by having a few basic primitives: a top level svg thing, a path thing and an attributes thing the amount you need to remember is dramatically smaller. The top level svg thing takes care of additional complexities like pseudo-random number generation, iterating across the 'canvas' and outputting the actual SVG.

Using it can often feel declarative and is usually very easy to modify. For example here we create a stroked path, add a fill then draw a regular polygon. At each stage TypeScript autocompletion guides us. We don't need to know or remember where to import a regularPolygon function, we just use it on the path. The path we get from the top level thing.

 s.strokedPath((a) => a.fill(220, 90, 80, 0.5)).regularPolygon(
      s.meta.center,
      12,
      s.meta.bottom / 3,
      0,
      'center',
    )

I've included the raw SVG output on right so you can inspect (and perhaps compare how much shorter the Solandra-SVG code is when compared to the generated SVG).

What is this s? In Solandra code it is the main object and is constructed like this:

const s = new SolandraSvg(WIDTH, HEIGHT, seed)

To make the examples shorter we will usually leave this out.

Let's dial this up a bit. What if we iterated across the canvas (let's say with 5 columns and whatever number of rows nicely fit in), let's change the colour hue as we go. Let's adjust the size of the polygon based on a poisson random number generated (a nice way to get low-ish numbers, with some spikes). That sounds like quite a lot of things to do but in fact barely adds to our previous example.

s.forTiling({ n: 5, type: 'square', margin: 0.1 }, (pt, d, c, i) => {
  s.strokedPath((a) => a.fill(220 - i * 15, 90, 80, 0.5)).regularPolygon(
    c,
    3 + i,
    d[0] * Math.max(s.poisson(3) / 4, 0.6),
    0,
    'center',
  )
})

Really the only new concepts are forTiling for iterating across the canvas and poisson for the RNG. The (raw) SVG is of course a lot larger.

So we can quickly and clearly create standard SVG graphics. But where it gets more interesting is when we start to do more algorithmic things.

Creating Cut and Fold Patterns in TypeScript

The basic idea will be to create a template out of cuts and folds. We'll draw these paths with Solandra-SVG using the s.cutPath and s.creasePath methods (but really there is nothing that special about these).

Cut and Fold Techniques for Pop-Up Designs by Paul Jackson is a nice basic introduction to creating pop-up cards/designs.

It suggests a number of easy to implement patterns, such as this one which has been adorned with additional small 'windows' (the choice of rectangle or triangle is pseudorandom).

Let's do something a bit fancier (and more algorithmic). We'll create this pattern (or really a system that generates such patterns, where the randomness, number of windows and so on we choose).

A couple of different cut and fold-outs look like this and have a nice architectural quality.

How to create these

We start with a basic SVG.

const s = new SolandraSvg(900, 400, seed)

We'll add some major cuts, these are the frames that hold the 'windows'. This is a bit fiddly but nothing too special, just follows the pattern you see above.

Solandra-SVG has a built in s.meta which gives us various sizes and things like the center location.

  s.groupWithId('main-cuts', () => {
    for (let p of [0, third, 2 * third]) {
      s.cutPath()
        .moveTo([p + third / 2, padding])
        .lineTo([p + third - padding, padding])
        .lineTo([p + third - padding, s.meta.bottom - padding])
        .lineTo([p + third / 2, s.meta.bottom - padding])
    }

    s.cutPath()
      .moveTo([0, 0])
      .lineTo([1, 0])
      .lineTo([1, s.meta.bottom])
      .lineTo([0, s.meta.bottom])
      .close()
  })

We use s.groupWithId to keep in one group in the SVG. We also add cuts around the outside to have the precisely shaped rectangle we want.

We need to add the folds (for the pop-out). This is similar:

  s.groupWithId('creases', () => {
    for (let p of [0, third, 2 * third]) {
      s.creasePath()
        .moveTo([p + third / 2, 0])
        .lineTo([p + third / 2, padding])
        .moveTo([p + third / 2, s.meta.bottom - padding])
        .lineTo([p + third / 2, s.meta.bottom])
    }
  })

Let's do the windows. We have three panes to iterate over. Let's assume we have a helper to build them.

s.groupWithId('windows', () => {
    for (let p of [0, third, 2 * third]) {
      const windows = buildWindows(
        [padding + p, padding * 2],
        [padding + p + third - padding * 3, s.meta.bottom - padding * 2],
        N,
        windowFrameProportion,
        s,
      )

And for each let's draw:

windows.forEach((w) => {
  const path = s.cutPath()
  const pts = w.points

  path.moveTo(pts.pop()!)
  pts.forEach((p) => path.lineTo(p))
  path.close()
})

Done. Well not quite. The interesting part is actually generating the patterns. Let's support this with a custom class WindowItem which will hold the position, size and type of window. We can then use this to create a number of windows and to track whether we merged (replaced it).

class WindowItem {
  id: string

  constructor(
    public pos: Vector2D,
    public size: Vector2D,
    public kind: 'base' | 'replaced',
    public x: number,
    public y: number,
  ) {
    this.id = uuid()
  }

  get points(): Vector2D[] {
    const [x, y] = this.pos
    const [w, h] = this.size

    return [
      [x, y],
      [x + w, y],
      [x + w, y + h],
      [x, y + h],
    ]
  }
}

Now let's implement a buildWindows function. The first part is fiddly but standard. We iterate over from the start and end positions, creating n windows as we go, carefully adding in frames (and getting the fence-post counting right(!)).

function buildWindows(
  start: Vector2D,
  end: Vector2D,
  n: number,
  frameProportion: number,
  s: SolandraSvg,
): WindowItem[] {
  const windows: WindowItem[] = []

  const W = end[0] - start[0]
  const H = end[1] - start[1]

  const windowWidth = (W * (1 - frameProportion)) / n
  const windowHeight = (H * (1 - frameProportion)) / n

  const fWidth = (W * frameProportion) / (n - 1)
  const fHeight = (H * frameProportion) / (n - 1)

  const dX = windowWidth + fWidth
  const dY = windowHeight + fHeight

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      const pos: Vector2D = [start[0] + i * dX, start[1] + j * dY]
      const size: Vector2D = [windowWidth, windowHeight]

      windows.push(new WindowItem(pos, size, 'base', i, j))
    }
  }

To make it more interesting, before returning we will pick some windows to merge into bigger ones.

  for (let i = 0; i < N; i++) {
    let j = s.uniformRandomInt({ from: 0, to: N - 1, inclusive: false })

    const expand = windows.find((w) => w.x === i && w.y === j)
    const replaced = windows.find((w) => w.x === i && w.y === j + 1)

    replaced!.kind = 'replaced'
    expand!.size = [expand!.size[0], expand!.size[1] * 2 + fHeight]
  }

  return windows
}

Now we are actually done with the above. We could add some more shapes or fancier merging to make it more interesting.

A Cut and Fold Pattern

You may have made some of these as a child. You cut out a pattern that includes tabs that you apply glue to and fold it into a 3D shape. Let's create something like one of these traditional cut and fold (and glue) patterns: an abstract tree:

One possible pattern looks like this (all sorts of details are selectable in the system we will build).

How to create these

We will create a parameterised tree based on a regular polygon cross section. The branches will fold into the base.

Let's create a function for this. Start by calculating the basic positions and sizes:

function sketch(
  N: number,
  seed: number,
  baseProportion: number,
  baseH: number,
  touchGround: boolean,
) {
  const s = new SolandraSvg(1000, 1000, seed)
  const treeProportion = 1 - baseProportion
  const bottom = s.meta.bottom
  const treeY = bottom * (1 - baseH)
  const treeBottom = bottom * (1 - 0.02)
  const dX = treeProportion / N

The branch folds are quite simple (a bunch of vertical lines) but there is some fiddliness around counting.

  s.groupWithId('tree-fold', () => {
    s.creasePath().moveTo([0, treeY]).lineTo([treeProportion, treeY])
    s.creasePath().moveTo([0, treeBottom]).lineTo([treeProportion, treeBottom])

    for (let i = 1; i <= N; i++) {
      s.creasePath()
        .moveTo([i * dX, treeY])
        .lineTo([i * dX, treeBottom])
    }
  })

The cuts are more interesting, with a special glue surface tucked part.

  s.groupWithId('tree-cuts', () => {
    for (let i = 0; i <= N + 1; i++) {
      if (i === 0) {
        s.cutPath()
          .moveTo([i * dX, 0])
          .lineTo([i * dX, bottom])
      } else if (i === N + 1) {
        s.cutPath()
          .moveTo([(i - 1) * dX, treeBottom])
          .lineTo([i * dX, treeBottom - 0.025])
          .lineTo([i * dX, treeY + 0.025])
          .lineTo([(i - 1) * dX, treeY])
      } else {
        s.cutPath()
          .moveTo([i * dX, 0])
          .lineTo([i * dX, treeY])

        s.cutPath()
          .moveTo([i * dX, treeBottom])
          .lineTo([i * dX, bottom])
      }
    }

    s.cutPath().moveTo([0, bottom]).lineTo([treeProportion, bottom])

    s.cutPath().moveTo([0, 0]).lineTo([treeProportion, 0])
  })

The base is a square with a correctly-sized cut out for the tree to sit in:

s.groupWithId('base-cuts', () => {
    // only need on three sides, as already will have enough on LHS from tree cuts
    s.cutPath()
      .moveTo([1 - baseProportion, 0])
      .lineTo([1, 0])
      .lineTo([1, baseProportion])
      .lineTo([1 - baseProportion, baseProportion])

    const cx = 1 - baseProportion / 2
    const cy = baseProportion / 2

    const r = radius(N, dX)
    const dA = (2 * Math.PI) / N

    let x = cx + r * Math.cos(0)
    let y = cy + r * Math.sin(0)

    const rootPath = s.cutPath().moveTo([x, y])

    for (let i = 1; i <= N; i++) {
      const a = dA * i
      let x = cx + r * Math.cos(a)
      let y = cy + r * Math.sin(a)

      rootPath.lineTo([x, y])
    }

    if (touchGround) {
      /// Fancy code to build slots to tuck the branches in
    }
  })

We will need a helper to calculate the radius here:

function radius(n: number, s: number) {
  return s / (2 * Math.sin(Math.PI / n))
}

The touchGround bit can be implemented like this. We take the original base part of tree and move it outward, then expand the line to allow easy tucking.

for (let i = 1; i <= N; i++) {
  const a1 = dA * (i - 1)
  const a2 = dA * i
  let x1 = cx + r * Math.cos(a1)
  let y1 = cy + r * Math.sin(a1)

  let x2 = cx + r * Math.cos(a2)
  let y2 = cy + r * Math.sin(a2)

  const deltaScale = ((0.15 + s.random()) * baseProportion) / 3.2

  const vX = deltaScale * Math.cos((a1 + a2) / 2)
  const vY = deltaScale * Math.sin((a1 + a2) / 2)

  const v1: Point2D = [x1 + vX, y1 + vY]
  const v2: Point2D = [x2 + vX, y2 + vY]

  // make the cuts a bit bigger to allow easy slotting in
  const v1Adj = v.pointAlong(v1, v2, -0.1)
  const v2Adj = v.pointAlong(v1, v2, 1.1)

  s.cutPath().moveTo(v1Adj).lineTo(v2Adj)
}

A Robot to make the Cut and Fold or Pop-Up Patterns (or how did we actually convert those designs into physical objects)

We could just print out these patterns onto card, then cut and fold them by hand. But that is quite tedious and leads to lots of ugly ink on your pattern.

I've recently used a Cricut Maker (I picked it up years ago massively discounted, but similar models are available today). One nice feature is that it can have both a cutting tool and scoring stylus simultaneously set up. So the 'print' process is a single job.

You install their software (Design Space) and upload the SVG. They will ask you to pay them. Over and over again.

But you don't need to. Having loaded the SVG you will want to attach the layers. If you don't do this then the software will try to move the layers around and you will end up with a mess.

You can do this by selecting all the layers and clicking the 'attach' button. As long as you have grouped things into a few groups this is quite quick.

You will also need to select the right tool for each layer. The default is a cutting tool but we will also want to use the scoring tool for the 'fold' lines.

As mentioned before Solandra-SVG provides a s.groupWithId which is useful to keep things organised and easy to work with in Cricut. If you don't create groups, then attaching or changing the tool on a large number of things is a massive pain.

s.groupWithId('main-cuts', () => {
  // ... create paths here
})

Next Steps

You can read more about Solandra-SVG. It also works nicely for pen plotting (I originally used with an AxiDraw plotter) or more generally for all sorts of SVG graphic creation. The programmatic approach offers precision and power, versus an approach of manual drawing.