Creating Cut-and-Fold 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 learn how to 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 object, a path object, and an attributes object, the amount you need to remember is dramatically smaller. The top-level svg object 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, which we get from the top-level object.

 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 the 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 fit nicely), and changed the colour hue as we go? Let's adjust the size of the polygon based on a generated Poisson random number (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, much 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).

Paul Jackson's Cut and Fold Techniques for Pop-Up Designs 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 a 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 we choose the randomness, number of windows, and so on).

A couple of different cut-and-fold cutouts 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; it just follows the pattern you see above.

Solandra-SVG has 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 elements in one group in the SVG. We also add cuts around the outside to create 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 function 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 generating the patterns. Let's support this with a custom WindowItem class, 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 (or 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 from the start and end positions, creating n windows as we go, carefully adding frames (and getting the fencepost 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 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, apply glue to them, 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 parameterized 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 apart.

  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 cutout for the tree to sit in:

s.groupWithId('base-cuts', () => {
    // only needed on three sides, as we will already have enough on the LHS from the 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 part can be implemented like this: We take the original base part of the tree and move it outward, then expand the line to allow for 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 a lot 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 file. They will ask you to pay them over and over again.

However, you don't need to. Having loaded the SVG, you will want to attach the layers. If you don't do this, 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 items 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 s.groupWithId which is useful to keep things organised and easy to work with in Cricut. If you don't create groups, attaching or changing the tool on a large number of items 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 manual drawing.