Week 2: Computer Aided Design

Our assignment:

Model (raster, vector, 2D, 3D, render, animate, simulate, ...) a possible final project, compress your images and videos, and post a description with your design files on your class page

2D Design

Inkscape

I decided to begin with Inkscape for 2D vector design. I already had a very beginner level introduction to Inkscape from some pre-Fab Academy practice. My instructor shared with me their manual and this article by Urban Pistek on using Inkscape and LaserGRBL for laser cutting. These resources helped me understand that raster images (ex. JPG, PNG, etc.) are made of pixels whereas vector images are made up of mathematically-defined lines and curves, allowing for sharpness of image quality regardless of how much its size is changed. This practice help solidify thinking about design in terms of paths.

On Inkscape, I practiced this week by making a couple of simple designs from memory--a tree and a sunflower. Since my visual design skills are not so great, I also tried out a couple of YouTube tutorials--one for an open-faced book and one for a bus. Using these tutorials I also learned to use different shapes, the align tool, and other basic functionalities.

My tree in Inkscape

My bus in Inkscape

While I was working on another Inkscape design to practice importing into OnShape, my instructor taught me how to remove fill and change the stroke style to hairline. This way, I could actually visualize how the file will look when imported which greatly improved my technique for remaining drawings.

hairline view of 2D design

Find a zip folder with all of my Inkscape designs: here

3D Design

Fusion

For 3D Design I began with Fusion, which I had also tried out a bit before the program. I began by practicing modelling the blocks in my final project idea. I created cubes, practiced using the fillet command at 1.5mm with a setback corner type, practiced changing the material to variously colored plastic, and practiced extruding a couple different ways. My first method for extruding was to import the SVG file from my Inkscape design to Fusion on the top profile of a cube.

my block after extruding the image of the tree

sketch of bus

I had to experiment a bit with what profiles I wanted to extrude within the sketch so that the outline resembled the shapes as much as possible. I also had to experiment with using Boolean operations on Inkscape and being mindful of the paths created so that when imported into Fusion it would look alright. My first sunflower attempt for example was pretty ugly until I used the union operation to simplify the paths needed to represent the image:

My second method for extruding was to make a sketch within Fusion and extrude that into the block. Here's an example of one (this block is representing a community center):

I learned some cool uses of the timeline feature on fusion. For example, I could move around the actions. So when I wanted to copy my first box but didn't want to have the extruded tree, I could move the fillet action to a place in the timeline before I did the extruding so that I could copy a template box. I also learned that you can view an animation of your work by hitting the play button near the timeline. Here's a video:

Find the original file for this design here.

FreeCAD

Began by modelling the board for my final project idea. Noticings:

• "pad" and "pocket" commands are used similar to extrusion on Fusion
• importing SVG files takes a little more work. I used this tutorial to show how to import and edit SVG by using the Draft to Sketch tool
• learned clunkily how to move sketches by adjusting the x, y, and z position values under the data tab
• got stuck with trying to create a pocket with my sketch into the board
• practiced creating a mug on FreeCAD using this tutorial. I practiced using constraints like setting distances and diameters. I struggled to get them all and for time's sake had to move on but I ended up with the mug below
• working through the tutorial gave me a renewed confidence to go back to my board design. I figured out how I can toggle the workbench (i.e. sketcher, part, part design, etc.) and I saw how to use the extrusion tool for sketches. So I extruded my text into the board (it's a little off but that's okay for now). Next I sketched a grid onto the board. I created lines while in sketcher mode and figured out how to use the move / array transform tool to copy lines with the parameters I needed so the grid was uniform. After extruding the grid 5mm into the board, I practiced changing the materials/appearance

imported an SVG file of some letters made using Inkscape and converted that to a sketch

practice making a mug (don't judge me 🫣)

practice making my board on FreeCAD. If I use lettering in the future I'll want to make sure to be mindful of spacing so it'll fit easier into my design

Here is a zip folder with the direct files for the mug and the board.

OnShape

I began by following a simple YouTube tutorial linked here -- this time for creating a LEGO Brick.

• Press "F" to get a full screen view of the design
• Learned how to sketch, extrude, make a linear pattern, shell

practice making a lego

Then I worked on modeling my board again. This time I created it so that a laser-cut grid could slide into place. I used the fillet command to round out the edges of the board, extrude, and I practiced using constraints in my sketches, and changing the appearance. I liked how OnShape has an easy to use feature to add text.

Here's another version of my board

Finally, I modelled six more user blocks using OnShape. These were the ones representing extractive city infrastructure. To do this I:

• extruded a sketch of a 40mm x 40mm square to create the cube
• used the chamfer command at 3mm to create a more severe look to the cubes
• used the linear pattern command to pattern 5 more cubes
• imported files from Inkscape (had to use the DXF format for OnShape) and extruded sketches into blocks
• created a sketch within the OnShape tool to extrude onto blocks
• practiced using mirror command with extrudes - I did probably more complicated that it needed to be but selected "mate connector" as my mirror plane and moved it up on the z axis 20mm by trial and error
• picked up on when you're doing commands you will need to select whether it applies to the whole part, a feature (ex. extrude), or a face of a particular plane

One challenge I faced: changing the height of the cube that I linearly patterned. For some of my blocks I wanted them be shorter or taller in height. To do this I couldn't simply change the depth of the extrude since all the blocks are based on one sketch. Rather than start over, I experimented within OnShape and found that I could use the transform command to scale it. I put the z scale at .25 to shorten the height and that worked! For the blocks I wanted to elongate I put the scale at 2.

using the transform feature to change the height

Another challenge on OnShape was getting the imported sketches aligned / moving them where I wanted to. I used the transform command to resize the sketch -- I just need to remember to use the square for shifting around its position.

Lesson learned: make sure I optimize the image on Inkscape before exporting. For one of my images which included curves, the first attempt didn't work to extrude because the points were not connected sufficently to create a closed shape on the sketch. Once I went back to Inkscape to group all of the paths the new image worked to extrude.

Really bad quality video to save space but here's a short clip of the completed blocks. As you can see, I've mirrored the extrusions to the opposite sides.

Overall, I found OnShape to be much more user-friendly than FreeCAD or Fusion. I may also just be starting to catch on with the repetition of similar processes.

You can find a zip folder with my OnShape files for the lego, the board, and the blocks: here.

Image and Video Compression

Image Compression During class, Kieran gave a helpful tip in the chat that you can get a python script using Pillow to compress images. So I found this simple script on GitHub where I could download the image compressor script and the website described how to install pillow (pip install Pillow), place images in the "input" directory, select quality level by editing the script (opt.save(out_path, optimize=True, quality=)), and run script (python3 python-bulk-image-optimizer.py).

However, this script wasn't working for me and I wondered if it had to do with being a Windows User. I found another script on and IT Support Guide website but had issues with that as well. For time's sake I went to Deepseek to troubleshoot and typed: "I need a python script to compress images for web use. I'd like to compress all images into a specified folder, reduce quality to make files under 200KB, have the option to resize large images. I tried a couple of scripts already but ran into errors. I have installed Pillow."

I saved this script provided by Deepseek and ran it and it worked. Now that that's done my flow for image compression is simple:

• upload images to "input" directory
• navigate to correct directory using git bash terminal: cd ~/Desktop/FAB_Academy/Image_Compressor
• run script: python image-optimizer.py "input" -o "output"
• Find compressed images in the "output" directory
• Optional customize maximum file size: python image-optimizer.py "input" -o "output" -s 100 (or instead of 100 kb I can put in another number)
• Optional resize option to maximum width: just add ** -w 1200** or whatever width in pixels prefered

Running the image compression script

Video Compression

To compress my first video, I downloaded ffmpeg and organized the files so I could run the commands in a way that makes sense in my head. I embedded another folder where I'll store my videos to be compressed and where the compressed videos will be stored after running the command. I refered to the commands provided on the video compression guide page in the FAB Academy resources.

My workflow for video compression is:

• save video in "video-compression" folder
• open Git Bash terminal and navigate to the directory cd /c/ffmpeg/video-compression
• run command of your choice, for example to compress my video demonstrating the timeline on Fusion I did: ffmpeg -i fusiontimeline.mp4 -vcodec libx264 -crf 25 -preset medium -vf scale=-2:1080 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 fusiontimeline_compressed.mp4

I was pleasantly surprised to see the compressed video pop up in the folder--pretty cool! To embed the video on this page, I needed to use html code directly rather than markdown so I refered to the mdm website shared in class for a guide. Couldn't get that to work but want to refer to it again later. I found this Markdown Tools blog page and the first code shared there seemed to work (in VS Code preview) but not on the site. Finally, I changed the source from the file path to the actual URL for the video hosted on GitLab and that worked for now as a work-around.