New blog post

* new blog post on making particles using photographs
* exif strip of all images
* some css fixes
* add video support

_includes/figure-video.html

@@ -0,0 +1,19 @@
+{% if include.float %}
+<figure class="figure-float" style="float:{{ include.float }};">
+{% else %}
+<figure class="figure-video">
+{% endif %}
+
+{% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %}
+
+{% capture src %}{{ path }}/{{ include.src }}{% endcapture %}
+{% capture type %}{{ include.src | split: "." | last }}{% endcapture %}
+{% include video.html src=src type=type %}
+
+{% if include.caption %}
+    <figcaption>
+        {{ include.caption | markdownify | remove: '<p>' | remove: '</p>' }}
+    </figcaption>
+{% endif %}
+
+</figure>

_includes/head.html

@@ -5,7 +5,7 @@
 
     <link rel="stylesheet" href="/fa/css/fontawesome.min.css">
     <link rel="stylesheet" href="/fa/css/brands.min.css">
-    <link rel="stylesheet" href="/fa/css/regular.min.css">
+    <link rel="stylesheet" href="/fa/css/solid.min.css">
 
     <link rel="stylesheet" href="/css/fnoots.css"/>
     <link rel="stylesheet" href="/css/style.css"/>

_includes/sidebar.html

@@ -25,7 +25,7 @@
         </li>
         <li>
             <a href="https://github.com/drewcassidy/drewcassidy.github.io">
-                <i class="fa fa-li fa-code" aria-hidden="true"></i> This Site
+                <i class="fas fa-li fa-code" aria-hidden="true"></i> This Site
             </a>
         </li>
     </ul>

_includes/video.html

@@ -0,0 +1,7 @@
+<video height="240" controls>
+    <source src="{{ include.src }}" type="video/{{ include.type }}">
+
+    Your browser does not support the HTML video tag. 
+    <a href="{{ include.src }}"> click here </a> 
+    to download this video.
+</video>

_posts/2019-5-4-Photorealistic-Particles.md

@@ -0,0 +1,37 @@
+---
+title: Making Realistic Particle Effects From Photographs
+tags: KSP-modding Unity
+---
+While working on drills for ReStock I realized I needed some particle effects for when the drills are in use. I wanted the effect of small rocks being kicked up from the ground and falling back down, but my attempts at a texture for the rocks all ended up looking more like potatos. 
+
+{% include figure-image.html
+  float="right"
+  src="potato-rock.png"
+  caption="A lumpy excuse for a rock" %}
+
+Here on earth, we have plenty of potato-shaped rocks due to erosion in water and wind, but in space theres no such forces to smooth out rocks, and they end up looking far more jagged, and dangerously so. Even small particles of lunar dust is razor sharp when viewed under a microscope.
+
+Instead of hand-painting a realistic chunk of slag in photoshop I thought I would try creating it using photographs. Rocks are easy to come by, after all, so I grabbed a chunk of what I believe to be granite from outside. Photographing a real sample also has the benefit of allowing for easy flipbook animation of the particles, which KSP’s limitied particle system format luckly supports.
+
+The setup is pretty simple. I used some mounting putty to hold the rock in 8 different angles, while I photographed it from above with my phone. I used an empty pringles can as a makeshift tripod to hold my phone in the same place for each shot with a fixed focus and exposure, and a stationary desk lamp slightly off-axis. I took 8 pictures total, rotating the rock about 45° each time. 
+
+{% include figure-image.html
+  src="setup-small.jpg"
+  caption="The setup, using an empty pringles can as a tripod" %}
+
+After the photos were taken, I imported them all into photoshop and masked out each one, arranged them into a 2x4 grid for the flipbook animation, and applied some color correction to make them the color I wanted. 
+
+{% include figure-image.html
+  src="flipbook.png" %}
+
+I think the result looks pretty good, since the rocks appear to tumble as they are thrown arround, which breaks the illusion of them being flat billboards, which they are. 
+
+{% include figure-video.html
+  src="effects.mp4"
+  caption="The effects in action" %}
+
+Possible future additions to this technique:
+- take 3 photos for each rotation with different lighting to make a normal map.
+- use more photos for a more smooth animation
+- rendering a spinning 3D model in blender instead of using photography
+

css/style.scss

@@ -216,6 +216,18 @@ small {
     }
 }
 
+.figure-video {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 20px;
+
+    video {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 .figure-float {
     width: 33%;
     margin: 10px;