Week 2 - Computer-Aided Design
Assignment
Individual assigment
model (raster, vector, 2D, 3D, render, animate, simulate, …) a possible final project, and post it on your class page
Process
Setting up my environment
In order to accomplish this assignment, I’ve had to prepare with some customization my laptop so that I could document better and more rapidly.
Until now, I only took screenshots with the help of the proprietary Mac OS function, be it with Shift + CMD + 3 for whole screens or Shift + CMD + 4 for just portions of it. Since from this assignment, it could become much more useful to records short clips of action, I wanted to download a simple, open-source tool called LiceCAP that is a bit intricate but in the end it does its job well.
Once the application is started, you’ll find in your monitor an adjustable tab open with an invisible content: this will be the frame of your recording.
When you press the Record button, you’re prompted a form in which you set up frame rate, output folder and other settings that are just what you need for rapid and simple screen-recording. After submitting these info, the recording starts and you can end it whenever you want by pressing the Stop button.
The end result will be a gif file, which is very handy for being both lightweight and widely supported.
An example of recording
Another useful technique that I adopted to avoid overloading the website and the online repo is to set up a workflow folder with Automator that would automatically reduce the size of all my images just by dragging them in it. This process in done just by a single action by Automator, that resize the longest side of the image (in my case it will always be the horizontal one) to a max of 680 pixels. This vale is the maximum size of the container class inside my website.
Resizing process
Please, keep in mind that this process can’t be done with gif files, so to not have too large gif files I’ll treat them with a different attention in the recording phase by limiting size, length and frame rate.
Another feature that I adopted for this assignment is a Trello board set up is a sort ok Kanban technique to keep track of my progresses and to note eventual error. In this week I’ve had the chance to use many different software and in the end not all of them were suitable for my computer and apt for my project, hence I wanted to keep a precise reminder of every issue or unfinished step.
Last but not least, it happens that I own a very simple Wacom graphic tablet that in the past I used for some graphic design project. Since this week assignment was mostly about sketching and modeling I thought it would be useful to use for some of the softwares, so I plugged it and used for all the application I could. For the occasion, I didn’t set up any hotkey since every software would have its way of functioning and I would use each one just for a session.
Final Project
For my final project I still have many decision to make regarding compisition, technologies involved, user interaction and so on, but I thnk I’ve nailed down the fact that I want to create a sort of Tangible User Interface to be operated by a group of kids which will learn about waste disposal management through cooperation. Up to now, most of my concept is limited just to a couple of sketches that can be seen below.
This might not seem that much, but are enough to try to sketch some models.
2D - Raster
Having not a license for Photoshop, I first opted to use GIMP - of which I’ve some experience - to draw some sketch of the various pieces of the model. Setting up an easy to use and versatile environment in GIMP is a very important practice to adopt in order to avoid its renowned terrible first approach, which can result in bad design decisions in the end. To me, the best setting is something like this:
I usually keep the main window at the center with a rather big zoom (depending on the detail I’ve to draw). I always want my background to be invisible, and eventually I add a layer of colour if I need it for the background.
On the left I have the usual Tool Panel and on the right I always keep open the Layer Navigation Tab, below it I have a zoomed-out thumbnail of the same image; very useful for having a whole view and fast scrolling to a specific part of the image.
Setting up a grid is also a fundamental, both for having some eye reference and to quickly adjust position with the magnetic snapping function. In GIMP, through the Image menu it’s possible to set up the main grid and as many guides required, respectively with the option Grid Setting and Guides.
Having to draw quite geometrical shapes I’ve opted to use a built-in filter that rapidly answer to this kind of needs.
Following the menu path Filters -> Render -> Gfig you get access to a collection of tools that allow to draw any number of geometrical figures with ease.
A very useful feature is accessed through the icon for regular polygons. In it’s possible to define the number of angles of our shape and the drawing tool to use, then you just have to draw it on the box on the left which will show you a preview of the rendered image. After closing the Gfig window, GIMP will create a new layer called GFig where all the work done through this filter will end (they can be modified or erased in the same window).
To keep things clean and separate, I put every single shape in a different level, so that I can work on them independently.
To do so I grab the Fuzzy Selection tool, select any point in the image, invert the selection (this will prevent me from not taking both the content and the outline of an object) and the use the function New level to create a dedicate level just for that shape. Then, adding color to the selection will visible the wanted shape in our project.
This whole set of procedure might seems a little tricky, but actually it’s easy to get use to it and it give a full sense of control over your work. Especially dividing all the objects throughout many level, at first it might seem daunting.
But after getting the eye used, it’s in this way that one can better make use of his skills and tools. All the other operations I did for drawing where the result common operations such as pencil outlining, filling with colours and joining selections.
If GIMP allow you to easily draw your sketch from mind, Krita is instead a tool more prone to artistic endeavours and stunning effects, if your skills allow it to. Krita is a recent but already well-established tool for drawing art and illustrations since it offers a good range of tools and customization that are accessible through an edgy UI.
The main window itself shows a wide selection of buttons and options, but the essential function are in the upper bar (brush size, opacity, effects, etc) while changing the brush is quickly and easily enabled through the right-click of the mouse, which make appear a very useful radiant menu.
The innovative Brush Engine is another feature that makes Krita an digital-artist-oriented software and provides a tonlist of features and implementantions that the user can adjust on each brush of the program making it very easy to create unique and useful brush for very specific occasions.
Notice that it is so full of features that the screen doesn’t fit in my monitor…
While drawing different type of objects, instead of focusing on dry lines and full shapes, I was more prone to fast stroking and blurry fillings, using different tools with different settings, in order to get a sketchy feel with little effort and immediate result.
Beyond these perks, Krita shares all the main features of other image editing softwares but since it really is so appropriate for artists, its environment is a bit resoruce-demanding for my laptop (a late ‘08 MacBook) and offers even too many resourcers for just sketching a project. However, it can result useful to any level of art skill for simple storyboards and drawings.
2D Vector
Not having an Adobe license, my first choice for drawing anything in vectorial graphic is usually Inkscape due it simplicity and wide area of adoption. As opposed to the other raster graphics software I exposed, in my Inkscape work layout the right bar of the monitor is something very active and frequently used, due to the many functions situated in the panels attached in this part.
In fact, since in svg files (the most common vector graphic extension used) every drawn thing is a separate and distinct object described byt a set of mathematical functions, operate rapidly on them is a necessary feature that Inkscape provide with the aforementioned panels. For example, after creating something like a line or a shape, it’r really easy to change characteristics such as fill color, outline color and outline thickness just by changing their values.
Eveng changing size and rotation of a shape is quite a straightforward operation that can be achieved both via handles in the drawing area or the specific panel on the right bar (if a panel isn’t open, it can be accessed through the menu Object).
A very useful way for creating original vectorial art is the Bezier Curve tool. Bezier curves are a widely adopted way of describing and realizing bends of any shape. With this tool you mark down the points of start and end of the bend, then you proceed to adjust the control points to get the curve arched as required.
Bezier curvers can be a very difficult topic for a beginner and it’s really easy to end up with just a bunch of botched lines, that’s why I recommend to periodically follow through tutorials and exercises that help get used with this counter-intuitive method of drawing. A funny and helpful tutorial is the Bezier Game which teaches Bezier curves through gamification, or if you feel really hardcore you can try to write down Bezier curves as an abstract of numbers, as described in this MDN tutorial (remember that svg files are nothing more than math formulas).
Usually, any object created with an Inkscape is labeled as a shape, hence to work properly on it as a collection of points and equations we need first to convert it to a track through the menu command Track -> From Shape To Track.
After this operation, we are enable more advanced technique to morph our shapes, such as points manipulation…
… and boolean operations.
Boolean operations are a very useful technique that allows to create brand new and complicated shapes by adding, substracting and many other operations with simple vectorial shapes. This will come very, very in handy in the Computer-Controlled Cutting module.
3D
Experiencing several technical issues with many of the available 3D CAD software in the market, like owning an obsolete pc and operating system compatibility, I’ve initially adopted the cloud-based web-app Onshape, which is both cross-platform and fully extendend.
To use Onshape, you simply have to access with your web-browser to www.Onshape.com and create an account. Quickly you’ll be prompetd to your account page.
Having no kind of experience on parametric CAD software, I’ve chosen to start with the official tutorial in order to learn rapidly the most important tools and use applications. This lessons will also teach you how to set up your profile (Onshape also works as CAD-related social network) and parameters for all of your work (mesuration system, controls, toolbars, etc) through the My Account section.
Essentially, Onshape treats with Documents, which are online generic files that contains informations and sub-files of various type. A document is not a CAD file, but can incorporate many.
When you access to your account page, you can make a new document with the Create button on the upper right corner, and you’ll be addressed to Onshape editor.
The editor’s window is divided in several part:
File management and version control: the commands to manage, copy and restore your document;
Features list: a list of all the parts of an environment;
Tool bar: the drawing and designing tools. They are context-based (their behaviour and function depend on your actual mode of use) and if your window is too narrow to show them all they’ll be grouped in menus);
Tab bar: all the working environment and files inside your documents;
Design Area: where you can navigate and draw your design. The view can be easily controlled by a view-cube that intuitively represents the orientation of the project and rotate it according your preferences.
An important thing to consider is that Onshape has no save button, since every action is automatically saved and a version control panel gives you access and resume all the changes you made inside a document.
The two important areas of Onshape are the Part Studio and Assembly work area. Part Studio is an environment where you can model one or more parts, while Assembly is where the motions between parts are defined. When you create a new document, a Part Studio and an Assembly are automatically created and they can be seen on the lower tab section of the window.
On Part Studio is where all drawing and modeling happens. There so many commands to consider that is impossible to recap them all briefly in here. What I can say, however, is that in order to draw anything the first thing you have to do is create a Sketch, which is nothing more than a 2D drawing over a plane of the 3D space. When inside the Sketch mode, you have at your disposal many common CAD drawing tool, and for my case I used a polygon instrument which easily allowed me to draw an hexagon shape.
Once the sketch is finished it is possible to create a 3D object out of it withe the Extrude function, which “thicken” a 2D shape up to the given height. Along with many other functions, such as Fillet, Revolve, Transform and the usual boolean operation, it’s possible to create any kind of 3D model with a great level of complexity.
Result
The following links take to the files created with all the software covered above:
Gist & Further development
Getting used and know by heart a drawing or modeling software isn’t an easy task, and although most of them share many similar features it’s important to understand that being very proficient in a software requires hour and hours of training. Having some knowledge of certain applications helped me to go through this assignment and work more on the sketching side, rather the learning side. Still, I feel like I have to really become a master of a single software and yet that I need to experiment more with softwares I’m not very confident in order to not miss features or workflow that might be of real help in my future assignments and my final project.
Tools and softwares used
Update - 21/05/2018
One day, while I was trying to upload some new documentation to the repository, I could see that my updates weren’t working and after some inspection I found the following message I had the following message.
Apparently my website wasn’t working anymore because I was using too much space. Most of that was because of the images and gifs sizes, which could be up to several megabytes. Followin my mate Dario suggestion I opted to use a software called ImageOptim which can significantly reduce the size of your files by orders of magnitude.
In fact, what I was doing wrong in my optimization was that I was caring only about the pixel size of the picture and not caring about their resolution. ImageOptim does just that, operating also on gifs, and it does so in an easy-peasy procedure: either you drag the pics to the application window…
… or, in case of Mac OS X, you can right-click an image (or a group) and select ImageOptimize.
In this way, in companion with my already tested automation, I was able to reduce the size of certain files up to 75% without actually losing significant quality and giving me no more troubles with GitLab.