Skip to content

3. Computer-Aided Design

During this week’s global lecture, Neil showed us a comprehensive list of CAD tools for 2D/3D design, Simulation, Animation, Video/Audio capture/Compression… 🤯 The challenge of this week consists in experimenting some of these tools and make some progress on our final projects. It seems too much to digest, but let’s see! 😅

Checklist:

  • Model experimental objects/parts of a possible project in 2D and 3D software.
  • Show how you did it with words/images/screenshots.
  • Include your original design files.

Raster

In the beginning of the pandemic, I spent some time learning how to draw on my Wacom One tablet so I have some experience on 2D design. GIMP and Krita are open source tools that I used at that time. Krita is oriented to digital artists for creating illustrations, comics, animations, concept art or storyboards (ideally using drawing tablets). On the other hand GIMP can be used for editing all kind of images, including digital illustrations and photographs. Actually, I used GIMP for cropping, scaling and compressing my images on last week.

This time I wanted to give an oportinity to another open source tool called MyPaint. It’s very similar to Krita, but simpler.

MyPaint brushes

MyPaint provides you an Infinite canvas, a wide variety of brushes and a really simple (distraction free) UI. In order to test it better I sketched my final project design and this is my result:

Final project sketch

I found an interesting limitation when I was sketching my final project. There aren’t any selection/transformation tools… probably because the original developer wanted to emulate drawing on paper/canvas. And when you paint traditionally you don’t have transformation tools.

Vectors

I have some experience working with vectors, especifically generating dynamic data visualizations using javascript libraries such as D3 and Echarts. SVGs are commonly used for rendering icons in web pages and mobile applications and if you know how svg tags works it is possible to adjust them just on your preferred code editor. But if you need a more visual experience, Inkscape is a great open source tool for manipulating SVGs.

I drew some basic shapes on a new file in Inkscape and saved it as a SVG. Then I replaced my site’s favicon with its contents.

favicon.svg

3D design

As I mentioned above, I have some experience on 2D design but 3D design is something totally new for me. At first, I opened FreeCAD and Fusion 360 at the same time and tried to review all the features and operations that Neil showed us.

FreeCAD vs Fusion 360

Rapidly I realized that Fusion 360 has a more intuitive UI and I sticked to that program. Since Fusion 360 is not supported on linux systems and I use my Linux partition most of the time, I tried the Cloud Version of Fusion. It felt like controlling a remote desktop and the input lag was present every time I tried. For that reason I switched to my Windows partition to continue this week’s assignment.

Abdón, our local instructor, suggested I watch some tutorials from Lars Christensen’s youtube channel. I spent most of the weekend following the Tutorial for Absolute Beginners which taught me the basic concepts of 3D designing and how to apply them using Fusion 360.

Tutorial for Absolute Beginners

I modelled my water bottle to put into practice all the concepts and techniques that I learned. After a few hours of extruding circles and revolving sketches I managed to model the main body and a simpified version the lid:

Modelling my water bottle

Then I switched to the Render Mode, adjusted the materials of the bodies, the environment and generated some renders:

First Render

Finally, I modelled a simplified version of my final project which consists in a wooden box, a metallic front face, a plastic back face, the dial and the hand. For reasons of bad time management I didn’t include the buttons and inner parts in this model yet:

Final project

Fusion 360 Viewer:

Additionally, Fusion 360 allows you to embed your models in other websites through the Fusion Team Hub.

Tutorial:

Water Bottle:

Final Project:

Design files:

Animation

Many 3d animators use Blender everyday, I downloaded it on the past and I couldn’t understand how to use it, especially because of its UI and controls, now it is time to give it a second opportunity. I oppened Blender and clicked different options and buttons and nothing seemed intuitive to me again, so I came accross chocofur’s channel on youtube an watched some of his tutorials.

I exported my final project 3d model to an OBJ file and then imported it into Blender, applied some textures to the surfaces and rendered the following animation:

Video Compression

The above video was compressed from 574kb to 80kb using ffmpeg

ffmpeg -i blender1.mp4 blender2.mp4 # default values ---> 532.6kb
ffmpeg -i blender1.mp4 -c:v libx265 -crf 28 blender3.mp4 # libx264 codec (not supported by web player) ---> 532.6kb
ffmpeg -i blender1.mp4 -c:v libx264 -crf 28 -filter:v scale=640x360 blender4.mp4 # libx264 codec + scaling ---> 80.6kb

Image Compression

The above images were compressed using ImageMagick

mogrify -path ./output -format jpg -quality 50 * # convert all images to jpg
cd output
mogrify -geometry x600 * # scale to 600px height

Last update: March 8, 2022