week 2. CAD design

I. Fusion360 3D Masterclass (WIP)#

One of my instructors, Carl, gave me a demo via Zoom of using Autodesk Fusion to create 3D shapes in CAD. Here’s what I learned:

Step 1: Opening Fusion & Creating New Project#

When you first open Fusion360, click “New” to start a fresh project. Pretty straightforward.

Step 2: Select Part Design#

Click on “Part Design”, this is the mode you want for designing actual physical parts. Fusion has different workspaces for different things.

Step 3: Fusion Features Overview#

Fusion has a ton of different features and capabilites. The toolbar at the top gives you access to sketching tools, solid modelling, surface modelling, etc. No need to learn all that, you’ll learn what you need as you go.

Step 4: Create a Sketch#

First step to creating any 3D shape is to start with a 2D sketch. Click “Create Sketch” and select a plane to draw on (XY, XZ, or YZ plane).

Step 5: Quick Tip: Mouse Navigation Settings#

Carl showed me this tip - if you’re used to TinkerCad or find the default mouse controls confusing, you can change the navigation settings to “TinkerCad” style. Makes orbiting and panning way easier if thats what your used to.

Step 6: Drawing a 2-Point Rectangle#

For creating a solid surface, start with a basic shape. Select the “2-Point Rectangle” tool from the sketch toolbar.

Click two points on the plane to define opposite corners of your rectangle. You can type in exact dimensions if you need precision.

When your done with the sketch, click “Finish Sketch” in the top right. Now you can extrude it into a 3D shape.

Step 7: Extrude to Give it Height#

Now for the fun part, turning the 2D sketch into 3D. Select the “Extrude” tool and click on your rectangle.

You can drag to set the height or type in an exact value in the dialog box. Pretty intuitive.

And there you go, a 3D box! This is the basic workflow: sketch 2D, extrude to 3D.

Step 8: Revolve for Curved Shapes#

Extrude is great for blocky shapes but what if you want something curved? Thats where Revolve comes in. Draw a profile shape first.

Then pick an axis to revolve around, like a pottery wheel spinning clay.

Drag the handle to control how far it revolves. Can go full 360 or just partway.

You can see the shape forming as you drag.

And done, a nice curved 3D shape from a simple 2D profile. This is how you’d make bowls, vases, bottles, etc.

Step 9: Fillet to Round Edges#

Sharp edges don’t look great and can be uncomfortable on physical objects. Fillet rounds them off.

Select which edges you want to round.

Set the radius, bigger radius = more rounded. This is one of those features that makes things look way more polished.

Step 10: Extrude for Holes (Negative Space)#

Heres something cool, extrude isn’t just for adding material. If you sketch a circle on an existing face, extrude can cut into it.

Extrude towards the solid part and it creates a hole. Fusion figures out from context whether your adding or subtracting material.

Step 11: Timeline Feature#

At the bottom theres a timeline showing all your operations. Super handy because you can go back and edit earlier steps - change dimensions, tweak fillets, etc. and everything after updates automatically. This is what they call “parametric” modeling.

II. Compressing images with cwebp#

I had a large screenshot of my system design diagram (about 5MB) that I wanted to add to my Hugo site. PNG files are way too big for web, so I decided to convert it to WebP format using Google’s cwebp tool.

1. Installing cwebp#

First I installed cwebp using Homebrew:

brew install webp

This installs the WebP toolkit which includes cwebp (for encoding) and dwebp (for decoding).

2. Creating the images folder#

Hugo serves static files from the static/ directory, so I created an images folder there:

mkdir -p static/images

3. Compressing the image#

Then I ran cwebp to compress my screenshot:

cwebp -q 60 -resize 400 0 ~/Desktop/Screenshots/fabacademy-system-design.png -o static/images/system-design.webp

Breaking down the flags:

• -q 60: Quality level 60% (decent quality, good compression for diagrams)
• -resize 400 0: Resize to 400px width, the 0 means auto-calculate height to maintain aspect ratio
• -o: Output file path

The original was 5MB at 2160x1778 pixels. After compression it came out to just 12KB at 400x330 pixels, thats a massive reduction

4. Adding to Hugo#

Finally I added the image to my content/_index.md file using standard markdown:

![System Design Diagram](images/system-design.webp)

One thing I ran into, I initially used an absolute path (/images/system-design.webp) but that didn’t work because my Hugo site has a baseURL with a subpath. Changing it to a relative path (images/system-design.webp) fixed the 404 error.

III. 2D Experiments: Raster vs Vector for Vinyl Cutting#

I wanted to cut a sticker I liked, so I bought a design set from a designer on Etsy and opened it in Inkscape.

Raster vs Vector: Why It Matters#

I initially imported the PNG version of the design into Inkscape.

My instructor pointed out the problem - when you zoom in on the PNG, it’s pixelated. It’s a raster image, not a vector, so the vinyl cutter can’t follow clean paths to cut it.

Luckily the design set came with SVG and EPS files too. See how clean the SVG looks when you zoom in compared to the PNG - that’s the difference between vector and raster. Vectors are made of mathematical paths, so they stay sharp at any zoom level.

Preparing the SVG for Cutting#

Double-clicking the SVG in Inkscape reveals all the individual paths that make up the design.

I set the fill to zero - the vinyl cutter only follows strokes, it doesn’t care about fill color.

Then I set the stroke to hairline style so the cutter follows a single thin line.

The Double Stroke Problem#

However, this resulted in double stroke shapes. When cut, the vinyl cutter would make two parallel cuts instead of one - not what I intended. The original SVG had compound paths with both an inner and outer boundary.

I tried selecting and dragging the paths apart to understand the structure, but that didn’t really help solve the issue.

The Fix: Path > Break Apart#

After some googling, I found the solution: select the paths, go to Path menu, and click “Break Apart”. This splits compound paths into their individual components.

Now you can see the paths have been split into two separate ones - the inner and outer boundaries are now independent objects I can work with individually.

I could then delete the unwanted inner path, leaving just a single clean cut line.

Here’s how the design looked after cleaning up all the paths. It was quite tedious to go through every shape and break apart + delete the duplicate paths one by one - a slow process, but necessary to get clean single-line cuts from the vinyl cutter.

IV. Raster Design: OLED Display Mockup#

For a raster experiment, I created a pixel-accurate mockup of the OLED display my compute nodes will use in my final project (Tangible Distributed Systems Simulator). The target display is an SSD1306 OLED which runs at 128x64 pixels in monochrome.

The Script#

I used Python with the Pillow imaging library to draw the display programmatically. This made sense since real OLED code for microcontrollers works the same way - drawing pixels, rectangles, and text at exact coordinates.

from PIL import Image, ImageDraw, ImageFont

# SSD1306 OLED resolution
WIDTH, HEIGHT = 128, 64

# Create black background (OLED is black when off)
img = Image.new("1", (WIDTH, HEIGHT), 0)  # mode "1" = 1-bit monochrome
draw = ImageDraw.Draw(img)
font = ImageFont.load_default()

# Title bar
draw.text((1, 0), "COMPUTE-01", fill=1, font=font)
draw.line((0, 10, 127, 10), fill=1)

# Golden signals: label, value, unit, bar fill percentage
signals = [
    ("LAT", 45, "ms", 0.45),
    ("RPS", 120, "",  0.60),
    ("ERR", 2.1, "%", 0.21),
    ("SAT", 78, "%",  0.78),
]

for i, (label, value, unit, fill_pct) in enumerate(signals):
    y = 14 + i * 13
    draw.text((1, y), label, fill=1, font=font)
    draw.rectangle((28, y, 90, y + 8), outline=1)
    fill_width = int(62 * fill_pct)
    if fill_width > 0:
        draw.rectangle((28, y, 28 + fill_width, y + 8), fill=1)
    draw.text((94, y), f"{value}{unit}", fill=1, font=font)

img.save("oled-mockup.png")

The Result#

Here’s the mockup at the actual 128x64 OLED resolution, scaled up 8x so you can see it:

It shows the “Golden Signals” view - the four key metrics for monitoring a compute node: latency (45ms), requests per second (120), error rate (2.1%), and saturation (78%). Each metric has a proportional bar graph. This is exactly what the physical node’s screen would display during a simulation.

The original 128x64 image is only 372 bytes as a lossless WebP - tiny enough to actually flash onto a microcontroller if needed later.

Lecture Notes#

Resources#

• University of Michigan: SciFi Prototyping (Sofia Brueckner)
• FAB25 talk on FreeCAD: https://www.youtube.com/watch?v=NtCfHrhsUQo&t=6978s
• Image & Video compression tools: https://fabacademy.org/2026/classes/computer_design/

General Principles#

• Compress your files so they aren’t enormous
• Choose the type of CAD best for your project:
  • e.g. oil painting you can overwrrite, water you cannot
  • e.g. using existing blocks vs sculpting from clay
• CAD software is usually optimized for one way of working (engineer / working)
• Each CAD Project has its strength and weaknesses
  • use multiple types of CAD for a single project
• If you don’t need precision, use a raster

2D Design#

2D Design is CAD:

• raster file (pixels) or vector file (mathematical representations fo shapes)

Raster#

• Photoshop or GIMP (pixelated when zoom in)
• when cutting you don’t wanna use it
• if your engraving colours, you could use it

Vector#

• perfect clean line when you zoom in
• Inkscape (free), Illustrator
• 2D vector images from 3D software
• vector operations (boolean operations)
  • create composite shapes
• Can run a lot of stuff 2D (e.g. Inskscape)
• For FabAcademy: you can do more complicated

3D Representations#

Boundary Representation#

• A shape = boundary faces. Face = boundary edges. Edge = Vertices.
• Some models that use b-rep gives you more detail but when you fabricate it there are some holes
• Enginge Block: SolidWorks, Fusion (primitive blocks)
• Scultupre: not SOlidWorls / Fusion (more curvature)

Function Representation#

• Things are represented by mathematical equations instead of edges/boundaries
• Kokompe, Kokppelli, Antimony

Mesh#

• ZBrush: for hyperrealtistic things
• Blender: more realistic surfaces, in recent years good for Fabricating as well. Originally only digital. Free.

Creating 3D Shapes#

• FreeCAD is free, Neil likes

How to Sketch 3D#

• Starting with 2D
• Extruding machine
• Revolve: Draw a shape and Revolve it (like clay on a wheel)
• Sweep: Draw any kind of line, draw any kind of cross-section (e.g. pipe cross section), pipe shape
• Loft: multiple cross sections

Other Techniques#

• You can also do 2D sketch on face of a 3D object
  • e.g. take a cube, take a face, sketch on that side of cuve, and extrude it
• Sculpting Meshes

Fillets / Chamfers#

• Rounding the edges = Fillets
• Chamfers = slice with the straight line
• FreeCAD would work, Rhino would break

Offset#

• Take an object, and blowing air into it in expand it
• again would break in Rhino, would work in FreeCAD

Other Operations#

• Measurement: can measure how big things are
• Proejction / Cross Sections: 3D to 2D
• Rendering
• Animation: Blender/Maya tools designed for animators but others acn’t do it

Important CAD Features#

History / Hierarchies#

• some cads, you can make changes in time
• Fusion360 has history
• FreeCAD
  • all future actions will update if you update an older decision

Constraints#

• e.g. specify things to be equal to each other, or this line is tangent to this circle
• available more for stuff designed for engineers
• enforcing the constraints
• 507 Mechanical Movements
• FreeCAD
• Fusion also

Assemblies#

Parametric CAD#

• 2 types:
  • Spreadsheets of dimesnoons (FreeCAD / OpenSCAD)
  • Node-based visual programming
• Engineering Type of CAD
  • Parameters for laser cutting assignment
• Rhino Grasshopper => Parametric Stuff
• Blender has Geometry Nodes
• Fusion: => Eagle elecrtonics + CAD

Agent-based Modeling#

• Grasshopper + Rhino => can use agent based modelling

Interchange Formats#

• You might use multiple pieces of CAD software
• Some geometries formats import better than others
• Each software has its own special filetypes

2D Formats#

• DXF (autocad fiole)
• SVG => Inksscape

3D Formats#

• STL for 3d printing

Manufactoring#

• STP and IGES

Other#

• 3D modelling in Game Engines
• VR/AR tool you can explore

Simulation#

• Often Kinematics simulation
• Just to see how things fit
• analysis, simulating physics
• Origin of the term computer: starts with a computer is a person. What you can do on paper is extremely powerful.

Mechanical Analysis#

e.g. if you wanna stand on somthing, sit on something, push other things around, you can 80-90% of the way with just three equations:

• Strength Stiffness
• Bending
• Buckling

Video#

• Kdenlive: Vide Recording recommendation
• Blender has a good physics engine
  • hard to animate
  • run the physics engine to simulate

AI#

• AI is good for 2D, not so good for CAD / 3D (yet)

Software Licenses#

Homework#

• Think about final project
• Document it
• Model it in multiple ways. Engineering way of thinking. Sculpture way of thinking.
• Compress your images
• Get comfortable wiht parametric design, so that next week it’s easier to get into vinyl cutting