ClothCAD

An experiment in trying to build a cad program from scratch that is optimized around making things out of flexible materials

Getting Started

$ # Install dependencies
$ npm install
$
$ # Start
$ npm run dev
$ # or start the server and open the app in a new browser tab
$ npm run dev -- --open

High level overview

The easiest way to get started is to use the built in sample drawing:

Note that for an actual project, one would click upload and upload multiple different svgs.

Once a drawing is uploaded, it needs to be converted to surfaces and folds. Right now, that involves targeting elements within the svg. Here's an example of that with the sample drawing:

Once created, one can perform actions on each surface / fold entity. Right now, there are two things one can do. First, you'll likely want to split / bisect a surface at a fold so that you can actually perform the fold.

Here's where that action is located:

And here's what it looks like after being split (for example):

Finally, you'll likely want to perform an actual fold. Here's an example of what that could look like after performing the fold:

Also - the current leg of the "commit graph" can be viewed in the history panel, which allows one to do cad like things like make changes to earlier steps and have future steps rebase on top automatically.

Future ideas

• Right now, everything is perfectly planar with exact creased paper-like folds. Materials need to have thickness - I've already started thinking about that a little bit, but the current implementation doesn't handle rounded corners properly.
• Some kind of clash detection
• A 180 degree fold to finish an edge doesn't really work because part of a surface ends up inside itself. "thickness" needs to be taken into account with obtuse angle folds properly.
• Somehow it would be good to be able to illustrate a sewing machine "stitch", and then with this it would probably be trivial to make lego digital designer esque tutorials to make a thing