2. Computer-Aided Design

Here comes to the second episode of How to Survive Fab Academy from Scratch by Dion , yep, I have none experience about the topic this week, so the document maybe a little bit long, hope it can be interesting for someone at certain extent😊😉.

Overview

This week we’ve gotten an introduction into computer-aided design. Modelling in both 2D and 3D.

Assignments

Our task for this week is:

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

Personal Learning experience:

I had never learned these software and applications before, so I tested the 2D and 3D software introduced in Mr. Neil’s class and did some experiments with them. In the process, I completed a bitmap of my possible project and its 3D model as well. For image compression, I use ImageMagick. During the process, I was once confused by the command lines untill I figure out the difference between CMD and Windows Powershell. So I also recorded this knowledge to this document.

Because there is a lot of knowledge, the workload will be very time-consuming when using HTML & CSS to record it on a web page (though I really want to learn more about this technique). So I change my idea to learned about Markdown syntax in time and found a Mkdocs framework. With this framework, I only need to use markdown syntax to write pages, which improves my recording efficiency and keeps numerous knowledge points in a clear structure for easy reference later.

Getting Started

• Week 02 Guide Notes; Video

• Raster Vs Vector Images

• 2D design:

• Raster

• GIMP
• BIMP
• ImageMagick
• • Extension Knowledge of CMD and Windows Powershell

• Vector:

• Mods

• Inkscape

• Sketchpad;

• Free CAD;(2D & 3D)

• 3D design:

• Free CAD;

• Onshape;

• Fusion 360

• Resource

• Markdown

Raster Vs Vector Images

Raster images are compiled using pixels, or tiny dots, containing unique color and tonal information that come together to create the image. Since raster images are pixel based, they are resolution dependent.

A vector image is an image created using mathematical formulas to represent the image, rather than using a grid of pixels. This type of image is often used for logos and illustrations because it can be scaled to any size without losing quality.

2D design

GIMP

GNU Image Manipulation Program, commonly known by its acronym GIMP, is a free and open-source raster graphics editor used for image manipulation and image editing, free-form drawing, transcoding between different image file formats, and more specialized tasks. It is extensible by means of plugins, and scriptable.

Experiment 1 – Green hearts in Pink

I wanted to explore GIMP on my own without any tutorials, so I made this drawing.

Experiment 2 - 2D model of possible final project

My possible project is a Two-wheeled differential robot with a Face autofocus camera, I use GIMP to draw a raster picture of its outlook — an underpan, which is a two wheeled differential drive robot.
In order to make my model more realistic, I found a picture of the chassis of a two-wheel differential car online, and I used it as my background picture. Next, I created a new layer to prepare my model and adjusted the transparency to make it easier for me to copy.

I copy the underpan part, PCB will be placed on this layer on the go; As for the Roof part, it’s for the battery.

Export the image after adjusting the transparency:

Experiment 3 – Photo to Logo

Step 1: Open the picture.

Step 2 : Crop the image to the size you want.

Step 3 : Find the color - saturation - set the scale to 0. This will give you a black and white photo.

Step 4 : Find Color - Curve - Adjust curve. Adjust the curve to make the black darker, but keep the key details of the image as much as possible.

Step 5 : Create a new layer, select “Fill” here “transparent”, others defaulted.

Step 6 : Change the ‘foreground color’ to ‘red’ to facilitate subsequent operations.

Step 7 : Select the ‘Brush’ tool, select 2 for ‘Brush’, and 100 for ‘hardness’. Enlarge the image to prepare for strokes. During the stroke process, you can adjust the ‘transparency’ on the right side to facilitate the stroke operation. If the drawing is inappropriate, you can use ‘Ctrl + Z’ to undo the operation. Adjust the brush size according to the texture size. If it is all black, just draw the edges, and then use the fill tool to fill it with color. When the typing mode is English, you can use square brackets on the keyboard to adjust the brush size at will.

Step 8 : To facilitate filling, create a new layer and set the fill color to ‘white’. Place the layer on the second layer.

Step 9 : Select the ‘Paint Bucket’ filling tool, select the stroke layer just now, and fill the black area. If the filling is uneven, you can fill it twice; after completion, cancel the display of the white layer and background image; leave only the stroke layer; Set the opacity to 100, select ‘Color’ - ‘Threshold’; adjust ‘Channel’ to make the image black.

Step 10 : New image - Set Size - Fill to ‘Transparent’; Image – Guide – Create new guide (%) , to create both horizontal and vertical guides; ‘View’ – ‘Absorb to Guides’ should be selected.

Step 11： Click the ‘Ellipse’ selection tool; left-drag in the middle of the image and press Ctrl + Shift to get an ideal circle, adjust it to the appropriate size, click ‘Background’ - fill it with ‘Background Color’, and fill the circle with black; Change the transparency to facilitate subsequent operations.

ImageMagick

Guidebook for ImageMagick

Experiment 1 - Convert Between Image Formats

To get started, you need to install ImageMagick. Use CMD to reach to the path where the image is located, and then proceed.
This is the command used to convert between image formats:

magick handsUp.jpg newHandsUp.png

Experiment 2 - Merge multiple pictures into one PDF file

Imagemagick is super powerful and efficient : I try to merge all files into a pdf, and it takes less than a second, much better than I wrote a python script!

magick *.jpg JPG_File.pdf

Experiment 3 – Merge multiple pictures into a GIF

Filename Globbing

In Linux shells, certain characters such as the asterisk (*) and question mark (?) automagically cause lists of filenames to be generated based on pattern matches. This feature is known as globbing. ImageMagick supports filename globbing for systems, such as Windows, that does not natively support it. For example, suppose you want to convert 1.jpg, 2.jpg, 3.jpg, 4.jpg, and 5.jpg in your current directory to a GIF animation. You can conveniently refer to all of the JPEG files with this command:

magick *.jpg Orange.gif
magick -delay 200 *.jpg -loop 0 newOrange.gif

The number after -delay represents the picture switching time, which is multiplied by 10 milliseconds. The switching time set in the above example is 200X10=2000 milliseconds, which is two seconds. The number after -loop is used to specify the number of loop playbacks. If A value of 0 represents infinite loop playback.

Experiment 4 – Inline Image Resize

It is sometimes convenient to resize an image as they are read. Suppose you have hundreds of large JPEG images you want to convert to a sequence of PNG thumbails:

magick '*.jpg' -resize 120x120 thumbnail%03d.jpg

Here all the images are read and subsequently resized. It is faster and less resource intensive to resize each image as it is read:

magick '\*.jpg[120x120]' thumbnail%03d.jpg

In my case, I try this command below to resize pictures in batches, NOTICE: this command keeps the aspect ratio of the original image by default.

magick *.jpg -resize 50x50 thumbnail%03d.jpg
magick *.jpg -resize 60 thumbnail%03d.jpg //只指定宽度等比缩放 Specify only width proportional scaling
magick *.jpg -resize x100 thumbnail0%03d.jpg //只指定高度等比缩放 Specify only height proportional scaling
magick *.jpg -resize 50%x50% ./newFile/p%01d.jpg // Compress all images into a newly created folder in the current directory and name them according to the format

Experiment 5 - Image Compression by Imagemagick

1. Use the command to compress the PNG to quality 50%, make sure the output.jpg is an existed file or directory.
   magick mogrify -quality 50% output.jpg
   

2. I figure out that PNG is larger file than jpg and it requires lot of space, to convert into a jpg file would be a better idea: magick convert input.png output.jpg

Refference :

ImageMagick
   list formats:
      convert -list format
      JPG: compressed
      PNG: uncompressed
   convert PNG to JPG:
      convert input.png output.jpg
   convert all PNGs to JPGs:
      mogrify -format jpg *.png
   convert SVG to PNG at 1000 DPI:
      convert -density 1000 -units PixelsPerInch input.svg output.png
   compress JPG to quality 50% width 1000:
      convert input.jpg -quality 50% -resize 1000 output.jpg
   compress all JPGs to quality 50% width 1000:
      mogrify -quality 50% -resize 1000 *.jpg

Extension Knowledge of CMD and Windows Powershell

CMD vs Powershell

The terminal of VS Code and terminal opened by right-click menu of the mouse are both Windows Powershell, commands differ from CMD commands

Useful Commands In Windows Powershell for Experiments above

copy original.png new.png
del original.png
cd file-name // it 's fine if you use D:\ or D:/
dir/ls  // to list file details , cmd doesn't support ls

CMD

What is CMD?
What Is Windows Command Prompt?
Command Prompt is officially called Windows Command Processor, but it’s also sometimes referred to as ​the command shell or cmd prompt, or even by its filename, cmd.exe.

Command Prompt is sometimes incorrectly referred to as “the DOS prompt” or as MS-DOS. Command Prompt is a Windows program that emulates many of the command line abilities available in MS-DOS, but it’s not MS-DOS.

How to use CMD click me ?

Windows Powershell

What is Windows PowerShell?
Windows PowerShell and PowerShell are two separate products.

Windows PowerShell is the version of PowerShell that ships in Windows. This version of PowerShell uses the full .NET Framework, which only runs on Windows. The latest version is Windows PowerShell 5.1. Microsoft is no longer updating Windows PowerShell with new features. Support for Windows PowerShell is tied to the version of Windows you are using.

PowerShell is built on the new versions of .NET instead of the .NET Framework and runs on Windows, Linux, and macOS. Support for PowerShell is based on the version of .NET that it was built on. For more information about the support lifecycle for PowerShell, see the PowerShell support lifecycle .

Inkscape

I try to make a pattern as this tutorial, take reference from this video.

Or, in addition, you can design beautiful logo with Inkscape, see this:

Experiment 1- Mutually Exclusive Operation with Inkscape

I first drew a rectangle and adjusted it to ellipse-alike, then I used ctrl+D to copy the second shape and refilled it with white. I selected the two graphics and selected the ‘mutually exclusive’ operation provided in ‘Path’ to separate the two graphics.
I finally make a Hollow ring with my Inkscape. It seems my version is different from the aboves.

Sketchpad

For details about sketchpad:

Experiment 1 – To render my SLT model file with Sketchpad

If you are a new user, you need to register an account. The verification code of this website is sent a bit late, and you may have to wait for a while to receive the verification code in your email.

Try upload here:

Upload succeed.

You can publish your work.

After publishing, you can click ‘Embed’, and you can choose how to present the model, With ‘copy to clipboard’, you can get the publish model link and use on your webpage.

3D design:

Onshape

Onshape is a FREE browser-based CAD platform that students and educators can access on any web-connected device.

Here’s a quick tutorial for Creating a sketch on Onshape.

Visit Onshape and login with your fabcloud account, if you encouter this error, you can click “Forgot your password ?” link, and follower the instructions to reset your password.

Experiment 1 - To make a box with Onshape

Notice: Before you get started, remember to set the workspace units.

Here, I sketch Top plane to create my first square, with the size as 40 mm x 40 mm.

You can extrude the object by adjusting the number or drag the up arrow.

I draw an inner square on the Face of Extrude 1. The size is 25mm x 25mm.

Select the inner square I just drew, and you can see the operations for the Face of Sketch2. Here , you can choose to Add or Remove.

Here, I choose the Remove function. I want to make a hollow object. And the following operations are the same.

This is the final effect.

Select Tab Manager to Export the file.

Fusion 360

Fusion 360 is a commercial software that is somewhat similar to Onshape in use. Unlike Onshape, which can be used in the browser, fusion 360 needs to be downloaded

Experiment 1 – Make a hollow cube with Fusion 360

I think I will try to make a 3D Hello Kitty model by Fusion 360. Here is a tutorial:
https://www.youtube.com/watch?v=jNH-wdOK40k

Experiment 2 - Draw an Isosceles right triangle with lines and dimensions

Learn the basic knowledge from here, I drew an isosceles right triangle with lines and dimensions:

Experiment 3 - Getting Familiar with straight line instructions and circle related instructions

Resource

You can download the resource mentioned above here.

Markdown

In this week , I learn to use [Markdown_Syntax] (https://www.markdownguide.org/basic-syntax/) to generate my webpage.

I also want to create some thing like navigator / content , I will learn more here.

Final Project 3D Model

I am going to make a Two-wheeled differential robot with a Face autofocus camera as my final project, and it is a two wheeled differential drive robot. I can build a 3D model outlook of the 2-wheel differential car underpan,but I don’t know how to draw the details and also principles of the differential section, I may try figure out on the go.

Here’s how I create a rough frame of the robot.

Parametric remains to be set:

We can name the values as parameter- for example - instead of staying 10cm - you can declare a variable called height and assign the value 10cm and then later you can use height name instead of the value. See here

Useful links:

Fusion - Entity and Parts

Fusion - Charge stander

Use Sketchpad to render to model

An example of a hollow cube:

Part Studio 1 by DionTsang on Sketchfab

Issue - Videos uploaded using a local path are displayed normally in the preview window like images, but cannot be displayed on the repo page. You can use the address of the Git Lab library to replace the local path.