Write spectra project

_projects/spectra.md

@@ -1,83 +1,76 @@
 ---
 layout: page
 title: Spectra
-description: a project with a background image
-img: assets/img/spectra.jpg
+description: Application using the morphological hierarchies and LiDAR data
+img: /assets/img/spectra.png
 importance: 1
 category: thesis
 ---
 
-![Caption](/assets/img/spectra.png 'Spectra caption')
 
-$$
-E = mc^2 \frac{42}{10^5}
-$$
+This application allows interactive filtering of LiDAR data. We can
+retrieve structures in the LiDAR data based on the elevation values of
+the connected components and their shape and size attributes. To guide
+the attribute thresholding we can plot the attribute space representing
+all the shapes and sizes of the structures contained in the LiDAR data.
+Such a plot can be called a shape-size pattern spectrum.
 
-![Caption](/assets/img/spectra.png 'Spectra caption'){class="img-fluid rounded z-depth-1"}
+![Pattern spectrum of structures present in a LiDAR elevation model. The
+x-axis represents the area of the structures (in m²) and the y-axis
+represents their compactness (a shape-based
+ratio).](/assets/img/spectra.png){.figure-img .img-fluid .rounded
+.z-depth-1}
 
-![Caption](/assets/img/spectra.png 'Spectra caption'){:class="img-fluid rounded z-depth-1"}
+We can use this spectrum to select the attribute thresholds. The current
+application allows us to do this in real time!
 
-::: {:class="caption"}
-My caption
-:::
+![Video: Select the area and compactness attributes
+thresholds.](/assets/vid/spetra_rennes_area_compactness.mp4){.figure-img
+.img-fluid .rounded .z-depth-1}
+
+In this spectrum, the x-axis represents the area attribute. Selecting
+the right part of the spectrum allows us to filter the largest connected
+components, while selecting the left part allows us to filter the
+smallest connected components. In between we can characterize different
+classes of structures sizes, including cars, trees, buildings. The
+y-axis represents the compactness attribute. The compactness attribute
+is defined as the ratio between the area of the connected component and
+the square of its perimeter. It ranges from 0 for  non-compact shapes to
+1 for compact shapes. The top of the spectrum represents compact shapes
+(e.g. circular shapes) while the bottom of the spectrum represents
+linear shapes.
+
+Selecting thresholds in the attribute space can still be difficult. We
+propose to drive the threshold selection by the example. The application
+allows to select in the LiDAR data structures and to highlight their
+shapes and sizes in the spectrum.
+
+![Video: Select a building as exemple to drive the attribute thersholding.](/assets/vid/spetra_rennes_area_compactness_select.mp4){.figure-img
+.img-fluid .rounded .z-depth-1 }
 
 
-<div class="row">
-    <div class="col-sm mt-3 mt-md-0">
-        {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-    <div class="col-sm mt-3 mt-md-0">
-        {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-    <div class="col-sm mt-3 mt-md-0">
-        {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-</div>
-<div class="caption">
-    Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
-</div>
-<div class="row">
-    <div class="col-sm mt-3 mt-md-0">
-        {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-</div>
-<div class="caption">
-    This image can also have a caption. It's like magic.
-</div>
+In the previous example we showed the use of two attributes, area and
+compactness. However, there are many more that we can use or even
+define, depending on the purpose of the application.
 
-You can also put regular text between your rows of images.
-Say you wanted to write a little bit about your project before you posted the rest of the images.
-You describe how you toiled, sweated, *bled* for your project, and then... you reveal its glory in the next row of images.
+Furthermore, the attribute space does not necessarily have to be limited
+by two dimensions. If for now we are limited to a maximum of 3
+dimensions for understanding and visualisation (as seen in the 3D
+spectrum bellow), we can look forward to using new visualisation and
+innovative user interfaces to jump into the multi-dimensional attribute
+space exploration!
 
 
-<div class="row justify-content-sm-center">
-    <div class="col-sm-8 mt-3 mt-md-0">
-        {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-    <div class="col-sm-4 mt-3 mt-md-0">
-        {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-</div>
-<div class="caption">
-    You can also have artistically styled 2/3 + 1/3 images, like these.
-</div>
+![3D spectrum (area, compactness, height).](/assets/vid/3D_axis2_trans_2x.mp4){.figure-img .img-fluid
+.rounded .z-depth-1 loop=true autoplay=true}
 
+The underlying data structure for processing LiDAR data are hierarchical
+morphologies, in particular component trees, which allow an efficient
+representation of nested connected components for the computation of
+shape and size attributes as well as efficient filtering.
 
-The code is simple.
-Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
-To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
-Here's the code for the last row of images above:
-
-{% raw %}
-```html
-<div class="row justify-content-sm-center">
-    <div class="col-sm-8 mt-3 mt-md-0">
-        {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-    <div class="col-sm-4 mt-3 mt-md-0">
-        {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
-    </div>
-</div>
-```
-{% endraw %}
+The application was developed in Python using the [SAP
+package](/projects/sap/) to build the trees, compute the spectra and
+filter the data.
 
+This application was developed as part of my Ph.D. thesis.