<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Moonstone</title>
    <description>The latest articles on DEV Community by Moonstone (@moonstone).</description>
    <link>https://dev.to/moonstone</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F596853%2F82b2f48a-5b77-4972-acf8-fd57d0ad8c96.png</url>
      <title>DEV Community: Moonstone</title>
      <link>https://dev.to/moonstone</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/moonstone"/>
    <language>en</language>
    <item>
      <title>Creating a 3D model based on time spent programming.</title>
      <dc:creator>Moonstone</dc:creator>
      <pubDate>Wed, 15 Feb 2023 14:56:13 +0000</pubDate>
      <link>https://dev.to/moonstone/making-a-3d-model-based-on-time-spent-programming-1j1d</link>
      <guid>https://dev.to/moonstone/making-a-3d-model-based-on-time-spent-programming-1j1d</guid>
      <description>&lt;p&gt;I have recently released version 1.1.0 of my newest project &lt;a href="https://github.com/MoonstoneStudios/WakaSkies" rel="noopener noreferrer"&gt;WakaSkies on GitHub&lt;/a&gt;. WakaSkies lets you generate a 3D model based on your time spent programming. You can save it as an STL to 3D print! This is a &lt;a href="https://wakatime.com/" rel="noopener noreferrer"&gt;WakaTime&lt;/a&gt; version of &lt;a href="https://skyline.github.com/" rel="noopener noreferrer"&gt;GitHub Skyline&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I wanted to share how I accomplished this project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building a 3D Model From Code
&lt;/h2&gt;

&lt;p&gt;To render and export the 3D model, I would need to make a list of triangles all in a specific shape and place.&lt;/p&gt;

&lt;h3&gt;
  
  
  My Approach
&lt;/h3&gt;

&lt;p&gt;The bars on top of the model will change height depending on how long the user programs on a specific date. I called these bars a &lt;code&gt;RectangularPrism&lt;/code&gt; in the code. Each prism has a list of its 6 points that make the shape. This is how the points are laid out behind the scenes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;E------H.
|`.    | `.
|  `F--+---G
|   |  |   |
A---+--D.  |
 `. |    `.|
   `B------C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When a new prism is created, point &lt;code&gt;A&lt;/code&gt; is the base position. Then point &lt;code&gt;B&lt;/code&gt; is positioned by just adding 1 to &lt;code&gt;A&lt;/code&gt;'s Y position (3D printers use +Z as up). &lt;code&gt;C&lt;/code&gt; is placed at &lt;code&gt;A&lt;/code&gt; plus 1 on the Y and X axes and so on.&lt;/p&gt;

&lt;p&gt;After all of the vertices of the rectangular prism are created, it gets triangulated. Triangulation is the process of creating triangles from the vertices of a shape. This is where I cheated. Because I knew that every shape will be a rectangular prism, I manually typed out the triangles!&lt;/p&gt;

&lt;p&gt;Each triangle is then added to a &lt;code&gt;WakaModel&lt;/code&gt;, the class that represents a 3D model.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhvjbel5acpnt4e326ikh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhvjbel5acpnt4e326ikh.png" alt="The generated model. It is floating in a pretty skybox." width="800" height="369"&gt;&lt;/a&gt;&lt;br&gt;
The model generated from the code! It is floating in ~space~.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Adding a Base
&lt;/h3&gt;

&lt;p&gt;As of now, the 3D model is looking pretty boring. Let's spice it up with a base! The base and all other 3D models in the final model were created in &lt;a href="https://www.blender.org/" rel="noopener noreferrer"&gt;Blender&lt;/a&gt;. I originally exported the models as an ASCII STL file. I later wrote a binary STL loader that was faster. I ended up using that one instead.&lt;/p&gt;

&lt;p&gt;The triangles are loaded from the base's file and are added to the already generated WakaModel from before. The WakaTime logo, numbers, and the "hours" text are all loaded into the model the same way.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk29de95e3o0wp01qdn26.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk29de95e3o0wp01qdn26.png" alt="The 3D model of the base. It is inside the Blender 3D viewport." width="800" height="349"&gt;&lt;/a&gt;&lt;br&gt;
The base that will be added to the generated model.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Rendering
&lt;/h2&gt;

&lt;p&gt;The app uses &lt;a href="https://www.monogame.net/" rel="noopener noreferrer"&gt;MonoGame&lt;/a&gt; to render and to create the desktop application. Because MonoGame uses a +Y up rendering system, I rotated the model 90 degrees to appear in the correct orientation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exporting
&lt;/h2&gt;

&lt;p&gt;Because STL is such a simple format, exporting the model is just spitting out all the vertex data into a file. I added support for binary STL and ASCII STL files.&lt;/p&gt;

&lt;p&gt;And there we have it! Creating a 3D model from code!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2sc3y8lfywoiabbh1ve.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2sc3y8lfywoiabbh1ve.png" alt="The final model. It has a base, statistics, and the generated rectangular prisms." width="800" height="303"&gt;&lt;/a&gt;&lt;br&gt;
The completed model!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I hope your enjoyed reading this post! WakaSkies is available on my GitHub and you can download the latest release here: &lt;a href="https://github.com/MoonstoneStudios/WakaSkies" rel="noopener noreferrer"&gt;WakaSkies GitHub page&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>watercooler</category>
    </item>
  </channel>
</rss>
