3. Computer Aided design¶
Week assignment - Model my possible Final Project in different 2D and 3D CAD software.
Project steps for animation and 3D modeling¶
This week I worked on refining my final project idea and started exploring some tools. There are a few things I needed to take into consideration:
- My device is going to contain electronics and probably a display. So, I must define some approximate sizes for these components to fit in.
- This is a wearable device for kids, so it must fit on the top of a small shoe.
- I might have to define some mechanism for this to bite the shoelaces.
- I need to divide my time modeling a 3D character for animation and a 3D printable case.
- The character is going to be part of a game, so I need to start defining basic assets to create the game environment.
For the 3D printed case, I tried modeling it in Rhino, which is a program I already know how to use. So, I used this as “control” to understand the benefits and difficulties that I experiment with using Fusion 360 and Grasshopper.
To create the assets and characters for the game I wanted to use Blender. As it’s a super complex program to learn, I will focus on getting the most of it instead of trying different software.
Some references I used for the device and the character:
Tomata
Tamagotchi
BIMO from Adventure Times. Recently, Dr. Martens released a BIMO’s shoe model.
Codey, Salesforce’s mascot.
Rhino as control version¶
I created these quick 3D models just to see how much this could take me in Rhino. I knew that Rhino was not the best option at least for the character, so I used these models just to understand the complexity of the other software and to be able to compare them.
This is a quick 3D sketch of the wearable device:
This is a quick 3D sketch of the character:
HOW TO ADD THE .STL FILES IN MARKDOWN
Followed this documentation to preview .STL file in Markdown
It’s super easy! I just created a new repo in GitHub. Then I uploaded my .stl files and added this code line to the Markdown.
<script src="https://embed.github.com/view/3d/denreyrey/Renders/main/cubefriend%20character.stl"></script>
The last /cubefriend%20character.stl you can get it by opening the file that you uploaded
to GitHub and copying the last part of the URL
My experience using Blender¶
As I was interested in how to create an animated character, I started with Blender. Also, I know that this will be the most challenging part for me.
This was my first draft idea for the animation. But I knew that Blender’s learning curve is complex.
I used these tutorials to understand how to create the things I wanted to do.
I knew that one of the software I wanted to try was Blender as one major part of my project is to create an animated character. However, I’ve never used Blender before nor designed a 3D animation so I started browsing for basic tutorials.
I needed my character to have rounded edges, but I couldn’t find how to do it. So, I watched this tutorial and got my cube.
I was not sure about using 3D or 2D facial expressions. I decided to start with 2D as I felt it was going to match better with the type of character I wanted to create.
When watching this second video I realized that that subdivision I made on the first video was not going to be useful. So I started again but this time I used the bevel modifier and then clicked on shade smoothly. This was so much easier.
I wanted to design my expressions, but after creating them in Illustrator I found out that I couldn’t make them work. So, I decided to stick with the ones provided in the tutorial. Anyway, they were not working either.
I spent at least 2 hours trying to solve this. When I was about to give up I decided to read the comments on this tutorial. I found this:
ToxicFX_ Nuhaad 10 months ago (edited) “Till 26:07 everything worked fine but then I imported the faces, they don’t show up, just the matrix display is there :( P.S I tried everything. I did a render, turned on cyclic and auto-refresh, and when I change the color node to alpha it only shows a white face :( EDIT: I FOUND A FIX!!! Whoever has the same problem as me, just connect “alpha” to “texture” instead of “color” to “texture” then click Shift+A and put in a Color Ramp node in between. Now the faces will appear and you can change them to any color you wish :) Thank me later” So, I went back to the Shader editor and connected Alpha to Texture and it worked.
8hs later, my relationship with Blender:
I wanted my character to be able to walk. So, I looked for a new tutorial on how to create a character.
The first difference I found with Rhino was that I was that instead of using boolean operations to develop a more complex solid, I used a geometrical figure as a base, and then I have modified it, like a sculpture. 10hs later, I was able to build this simple character. Now, I needed to add the animation.
I used a basic human armature and deleted all the bones that I was not going to use.
After getting all the shading done, I was ready to start my animation. I was going to follow the tutorial to create a running and a jump animation. So, I started by limiting my timeline to 30 seconds.
After 1 hour of editing my animation, trying to understand how to position the camera, then how to render it, and after that how to save it. I ended up recording a video. I made many mistakes when creating the character and it ended up having this color overlay. I think it’s because I did not join create the volumes correctly. Anyway, after a long day, almost 15 hs, I think I’ll be able to create some basic assets to develop a simple game in Unity 3D.
Some thoughts about Blender¶
- This tool is not very intuitive, it works completely different from all the other tools I know.
- The learning curve might be long so I’ll probably have to plan how am I going to do this to make it work.
- After getting a basic idea of how it works, it seems to be a super powerful tool and I’m motivated to learn more.
Fusion 360¶
As soon as I started working on Fusion 360, I felt instant relief. Beyond the painful experience, I liked Blender but interacting with an interface that you understand it’s a blessing. After around 2hs I was able to get a pretty decent 3D model compared to what I did in Blender in 15hs.
I then added some boxes to simulate the electronic components and some magnets. I was interested in trying how a magnetic lock could look like. After I finished with this first design, I wanted to do some simulations. I started with some basic renders to understand how to use the tool.
Then, I used this tutorial to understand how to create a joint simulation.
This was the result.
This is my .stl file from my 3D model in Fusion 360
Some thoughts about Fusion 360¶
- I missed the command line. I kept typing stuff and expecting something to happen.
- I liked construction lines.
- I found it much easier than Blender but I felt it was a little bit slower than Rhino. My perception of Blender was more related to the fact that I was not understanding the logic behind each flow and I was not able to solve the problems that popped up because my logic is completely different from the logic of the program. In Fusion 360, the way to develop a figure is similar to Rhino and to the way, I learned to think 3D objects but the interface is slowing me down as I have to click too many things to get something done.
- I like creating sketches, I found this useful. For me working on Rhino has always been super messy. I like it because I can sketch super fast, I don’t need to know all the measures, and if something does not exactly match it’s fine. As long as you don’t try to 3D print it. So, I feel that Fusion 360 is more organized than Rhino and more flexible than Solid Works.
- I liked the house to get back to the initial perspective.
- I working with components and sketches was very straight forward and it was super easy to edit my models.
Find all the 3D files here:
Raster and vector software¶
In general, I use Illustrator, Figma, and Photoshop for my work. But I also have experience using Sketch, Framer X, and some quick interface prototyping software like Invision and Principle. In the past, I experimented using Gimp and Inkscape to be able to share things with people who did not have licenses for Illustrator or Photoshop.
So, for most of the things I did so far for this documentation I used Illustrator and Photoshop. I don’t think that these are the most amazing software on earth but they do solve a lot of issues and I’m so used to the interface that I found most of the other interfaces annoying.
About Illustrator¶
Illustrator and Figma work off vectors, these are points used to create lines. Vectors are scalable images that can be sized as small or as large are you need them to be, but look the same when it comes to clarity and resolution.
I’m not an illustrator myself so there are a lot of things I don’t know how to use, but I love brushes and I love the fact that you can easily create patterns and textures. For this example I decided to draw a simple olive just using the mouse pad. So, brushes that are pressure sensitive don’t make much sense here.
I always use layers to organize my work. So, I created a layer for the outlines and then I created one for the fill of the olive and one more for the leaves. In this case, I used a 3pt uniform round brush and I just changed the stroke. A thiner brush (1px) for the outlines and a thick one (5px) for filling the inside. This means that the appearence will be the same but the diameter of the stroke will be different. If we take a closer look we can see that these are still vectors. And I can interact with the nodes to change the direction of these vectors impacting the shape. Something that we can not do in photoshop.
If we go to View and select grid we’ll see the grid that we can use as the structure of the canvas. In preferences we can set the size of this grid. In this case each square represents 1 pixel and each subdivision contains 10px.
About Photoshop¶
The main difference is that Photoshop is based on pixels while Illustrator works using vectors. This means that Photoshop is raster-based and uses pixels to create images.
I use Photoshop for editing photos and creating some raster-based art. While I use illustrator to design icons and graphics. Figma is an awesome for UI design. So, there are a lot of tools thought specifically to create mockups and wireframes for different devices.
So, in this case I took the same olive I draw in Illustrator and again created my layers to organize the workspace. Then I used the magic wand to quickly select and errase all the white parts left.
I decided to use only the fill of my olive layers and decided to add a more realistic background. Clicking ctrl+t and then right button over an image we can access a more advanced panel where is posible to select options like free transform and distort. These gives us the flexiblitiy yo move the diferent nodes on the border of the image. Then is easy to errase the borders and make the texture match any shape. I also selected the option multiply which helps the texture blend with the background.
So, \after applying the texture to the olives I added a filter called gausian blur. This blures a little bit the image, you can control how much, and makes it a little bit more realistic.
If we zoom in we can see that the image that was created with vectors is now composed by pixels.
About Figma¶
I use this software for my daily work because it combines a lot of features from different softwares. Previously, I used a series of softwares to do the same thing that I do today with only Figma. These where: - Sketch as the specific vector tool for UI design - Invision and Principle to develop UI prototypes - zeplin as a workspace that generated the CSS of the design for the developers and allowed them to take things like measurements, download the .svg and leave comments.
These additional tools work as plugins for Sketch. Which is very good, I really like Sketch.But the big problem I had was that it was not a really collaborative tool. For it to be, it was necessary to also use Abstract. That helps infinitely in the organization of work and is like a repository of designs and allows versioning.
Another con here is the issue of licenses. Each member of the team must have a license, and they are not very cheap. Added to that eg. If we want to share an image with someone who is not from our team, we must export the file or the image and everything becomes more complicated.
So, Figma comes to fix all these things. Especially the collaboration and the ease of sharing things with people who are not specifically from your design team.
Well, enough advertising. Let’s dive a little bit into de differences between Figma an Illustrator. By the way, Adobe has it’s own UI design software but has the same problems as Sketch. The main advantage of this software, called XD, is that you can build pretty decent voice prototypes.
In this case I started defining some stuff for the game I wanted to build for the final project. As I will be building this in Unity 3D I don’t want to expend a lot of time in Figma. Anyway, I will need some basic structure and it’s easier and faster if you expend some time thinking of how to organize your components.
Most of the time I use Material guides, I found this documentation usefull and easy to read.
When you open Figma you don’t get a starting page as you do in Illustrator or Photoshop. This is because you can have multiple pages with different sizes. So, it looks more as a playground and you can start by adding your screens.
When selecting the type of screen or frame you get multiple divices as options. You then can select the type of layout that you want for your screen.
For this MVP, I’m not going to make the game responsive. But this is an example of how you can design for desktop and mobile and check that eveything is going to adjuts well on your layout. You can choose your grid, this will change depending on the screen size and how you’ll organize your components. As this is a system, most common grids are 4px or 8px and then you use multiples of these numbers to define the sizes and spacing.
An awesome thing about Figma is that you can add many different libraries and use assets. You can also create your own components and define your style library quite easily. Figma is thought to match the way a developer will build the designed screens. So, it’s useful to think in boxes. Check the box_model
Here I created a basic design of how I’d like my starting screen to look like for my MVP. The button is just an example of how a component will look like.
If we turn to the inspect tab on the right panel we’ll see the CSS for the designed that was made. If for example, we need to export an image, we can just select that image, then click on export and select the type of file that we need. In this case I choose .SVG
My experience with Inkscape is similar to my experience learning Portuguese. I’m a Spanish native speaker so there are a lot of words that sound the same way but they have a completely different meaning. Those are called ‘Fake friends’.
Inkscape has an interface that looks similar to Illustrator but is not the same, things are arranged differently, it has icons that look alike but are different and the panel on the right is super-confusing.
As a very general conclusion, could you use Gimp and Inkscape instead of Illustrator and Photoshop? Yes, they are relatively similar but I prefer to use my energy to learn animation and other programs that have functionalities that I cannot achieve with Illustrator and Photoshop.
I also tried Blender’s Greace Pencil. As I didn’t have any experience doing this I followed this tutorial.
So, the first thing to do, after setting preferences to use the Wacom, is to add an object that is called Greasepencil. After adding it, it will appear on the panel on the left. It’s important to check that we are in object mode.
Next step is to create a tab for the 2D animation. In context object data we can create the layers to work and in context material the materials we’ll be using to draw.
I doodle around a little bit and changed to 3D cursor to experiment drawing in 3D. 3D is definitly a challenge but it seems to have a lot of potential. I liked the 2D drawing. It will require some time to really understand how to use it, but it’s a great tool.
Find all the 2D files here:
