lots of 3d model updates

_cv_entries/2_msc.md

@@ -6,16 +6,52 @@ location: Trinity College, Cambridge
 subtitle: "Imaging Magnetic Phenomena with Scanning Diamond Magnetometry"
 
 image: /assets/images/vector_magnet_angle_view.png
-alt: "A vector magnet that I designed."
+alt: "A render of vector magnet that I designed in a CAD program."
+
+image_markup: <model-viewer style="height:250px;" src="/assets/blog/vector_magnet/vector_magnet.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/assets/blog/vector_magnet/vector_magnet.png" shadow-intensity="1" environment-image="/assets/blog/vector_magnet/aircraft_workshop_01_1k.hdr" camera-orbit="-169.8deg 78.57deg 0.8881m" field-of-view="32.55deg" interaction-prompt="none" auto-rotate> </model-viewer>
 
 layout: cv_entry
 read_more: true
+assets: /assets/blog/vector_magnet
 ---
 
 Supervisor: Professor Mete Atatüre<br>
 <br>
 The project centered around the use of a Nitrogen-Vancancy defect in a nanoscale diamond to detect magnetic fields with ultra high resolution. We experimented with mounting such a nano-diamond to the tip of an atomic force microscope in order to produce field images. I built a 3d vector magnetometer in order to determine the axis of a defect in a nano-diamond.
 
-Check out a little interactive model of the magnetometer below.
+Check out a little interactive model of the magnetometer below. The device has three pairs of copper Helmholtz coils that generate controlled, linear, magnetic fields in all three directions.
 
-<iframe src="https://myhub.autodesk360.com/ue2a56e59/shares/public/SH7f1edQT22b515c761efc56dd943429df14?mode=embed" width="640" height="480" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"  frameborder="0"></iframe>
+<figure>
+<model-viewer style="height:500px;" src="{{ page.assets }}/vector_magnet.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="{{ page.assets }}/vector_magnet.png" shadow-intensity="1" environment-image="{{ page.assets }}/aircraft_workshop_01_1k.hdr" camera-orbit="-169.8deg 78.57deg 0.8881m" field-of-view="32.55deg" interaction-prompt="none" auto-rotate> </model-viewer>
+<figcaption>
+</figcaption>
+</figure>
+
+Here's a cutaway view, try zooming out to get your bearing with respect to the above diagram. You can see that in the center of these three pairs of coils there is:
+
+<figure>
+<model-viewer style="height:400px;" src="{{ page.assets }}/vector_magnet_section.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="{{ page.assets }}/section_view.png" shadow-intensity="1" environment-image="{{ page.assets }}/aircraft_workshop_01_1k.hdr" camera-orbit="37.19deg 75.38deg 0.3104m" field-of-view="12deg">
+<button class="Hotspot" slot="hotspot-1" data-position="0.0002550490643940138m 0.12905932644259982m 0.0003319628199390896m" data-normal="-3.85185900533595e-30m -1.343588384327496e-7m 0.9999999999999911m" data-visibility-attribute="visible">
+        <div class="left HotspotAnnotation">AFM Tip</div>
+    </button><button class="Hotspot" slot="hotspot-3" data-position="0.015349223451080356m 0.11522588429565153m 0.0037307930577810513m" data-normal="0.9822871951592153m -1.7349759832900923e-7m 0.18738160589079159m" data-visibility-attribute="visible">
+        <div class="HotspotAnnotation">Microscope Objective</div>
+    </button><button class="Hotspot" slot="hotspot-4" data-position="0.004252449047777678m 0.12449395035064194m -0.0015034997269766357m" data-normal="3.85185900533595e-30m 0.9999999999999911m 1.343588384327496e-7m" data-visibility-attribute="visible">
+        <div class="HotspotAnnotation">PCB Excitation Coil</div>
+    </button></model-viewer>
+<figcaption>
+</figcaption>
+</figure>
+
+**AFM Tip**: The atomic force microscope tip in blue with a nano-diamond attached to the very tip. We want to figure out which was the axis the NV defect in this nano-diamond is pointing. To do that we need to expose it to different directions of magnetic field while also blasting it with light and radio waves.
+
+**PCB coil** For the radio wave blasting we have a single turn coil made on a PCB. I haven't cut the coil away so that you can see it's whole shape. We'll pump RF power into this tuned to the electronic transitions in the NV defect that we want to probe.
+
+**Microscope Objective** The microscope objective allows us to optically pump the transitions in the NV defect (much like a laser) in order to keep electrons in excited quantum states that they wouldn't normally sit in.
+
+By putting in varying currents through the three coils pairs we can create a very well controlled magnetic field in any direction and of varying strength. We can then run a sweep through all the possible field directions while blasting the NV center with light and RF in order to determine it axis with respect to the plastic housing of the tip. 
+
+This is how you would calibrate one of these magnetism sensing AFM tips after first sticking a diamond to the tip.
+
+Once we know the axis direction this AFM tip could then be transferred back to the AFM to measure magnetic fields at the nanoscale!
+
+TODO: Explain this in a bit more detail.

_drafts/test.md

@@ -8,13 +8,18 @@ alt:
 
 <!-- <div class="strava-embed-placeholder" data-embed-type="activity" data-embed-id="9552293688"></div><script src="https://strava-embeds.com/embed.js"></script> -->
 
-<!-- Import the component -->
-<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
 
 <!-- Use it like any other HTML element -->
 <!-- <model-viewer alt="test" src="/assets/blog/toothbrush_shelf/toothbrush_shelf.glb" ar environment-image="" poster="/assets/blog/toothbrush_shelf/spin.gif" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer> -->
 
 <!-- <model-viewer> HTML element -->
 <model-viewer src="/assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/assets/blog/toothbrush_shelf/model/poster.webp" shadow-intensity="1" auto-rotate camera-orbit="-212.4deg 77.5deg 411.2m" field-of-view="30deg"> </model-viewer>
-<!-- Loads <model-viewer> for browsers: -->
-<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"></script>
+
+
+<model-viewer src="/assets/blog/terrain/untitled.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls shadow-intensity="1" environment-image="/assets/blog/terrain/pillars_1k.hdr" exposure="1.34" camera-orbit="-198.3deg 49.94deg 143.8m" field-of-view="38.8deg">
+    <button class="Hotspot" slot="hotspot-1" data-position="6.6575782971657045m 1.2675063664559048m -11.69313039177284m" data-normal="0.03993612823978079m 0.9984038328257562m 0.0399361022141038m" data-visibility-attribute="visible">
+        <div class="HotspotAnnotation">My House</div>
+    </button><button class="Hotspot" slot="hotspot-2" data-position="-12.219647443249531m 0.2444805745162455m -0.03384905050821585m" data-normal="-0.3045547244913506m 0.9517337624555773m -0.03806921580684815m" data-visibility-attribute="visible">
+        <div class="HotspotAnnotation">RARA</div>
+    </button>
+</model-viewer>

_includes/default_head_tags.html

@@ -41,9 +41,10 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h
 {% endif %}
 
 <link rel="stylesheet" href="/assets/css/styles.css">
-<script type="module" src="/assets/js/model-viewer.js"></script>
 <script src="/assets/js/index.js"></script>
 
+<script type="module" src="/assets/js/model-viewer.js"></script>
+
 
 <script>
   MathJax = {

_posts/2023-02-10-shelves.md

@@ -5,12 +5,21 @@ layout: post
 image: /assets/blog/shelves/thumb.svg
 social_image: /assets/social/shelves.png
 alt: A 3D render of some shelves fitting into a triangular space under a ladder.
+assets: /assets/blog/shelves
 ---
+
+<figure>
+<model-viewer src="{{page.assets}}/model/shelves.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="{{page.assets}}/model/shelves.png" shadow-intensity="2" shadow-softness="1" camera-orbit="13.36deg 78.29deg 8.638m" field-of-view="37.48deg" interaction-prompt="none" alt="An interactive 3D model of the shelves, this is pretty unnecessary but I find it very cool that you can just view 3D models in browsers now like they're any other media."> </model-viewer>
+<figcaption>
+I'm a bit  addicted these little interactive 3D models. Give me time, I'll get over it.
+</figcaption>
+</figure>
+
 In our new flat we have this mezzanine bed with a yellow ladder leading up to it. Between the ladder and the wardrobe we had this kind of triangular space that we wanted to use for more storage. After doing a quick design on paper I started mocking something up. 
 
 
 <figure>
-<img src="/assets/blog/shelves/skeleton.jpg"/>
+<img style="height:500px;" src="{{page.assets}}/skeleton.jpg"/>
 <figcaption>
 The first try.
 </figcaption>
@@ -19,7 +28,7 @@ The first try.
 I got quite far with this version before realised I hade made a terrible error, somewhere on my scratch pad of calculations I had written something like "1700 - 36 = 1404"! After taking a few days to mourn the lost effort I decided to make a better plan to avoid making similar mistakes. I used the CAD model to generate a set of cutting plans that I could print out and take to the workshop.
 
 <figure>
-<img src="/assets/blog/shelves/Shelves v11.png"/>
+<img src="{{page.assets}}/Shelves v11.png"/>
 <figcaption>
 After messing up the measurments on the first iteration, I went back and myself a nice CAD model to take measurements from while cutting.
 </figcaption>
@@ -28,21 +37,21 @@ After messing up the measurments on the first iteration, I went back and myself
 In this new version I opted to make the sided panels out of solid sheets of 18mm pine plywood, it made the final object heavier but they were much easier to cut on the table saw. The extra weight was probably a good thing, in place it feels pleasantly heavy and sturdy. 
 
 <figure>
-<img src="/assets/blog/shelves/plans.svg"/>
+<img src="{{page.assets}}/plans.svg"/>
 <figcaption>
 From the CAD model, it's quite easy to make nice plans for each piece.
 </figcaption>
 </figure>
 
 <figure>
-<img src="/assets/blog/shelves/thumb.svg"/>
+<img src="{{page.assets}}/thumb.svg"/>
 <figcaption>
 I really like the line drawn aesthetic, reminds me a lot of Ikea construction plans.
 </figcaption>
 </figure>
 
 <figure>
-<img src="/assets/blog/shelves/real_2.jpg"/>
+<img src="{{page.assets}}/real_2.jpg"/>
 <figcaption>
 The final shelves in their new home!
 </figcaption>

_sass/main.scss

@@ -8,6 +8,7 @@
 @import "thesis"; // the thesis content
 @import "blogroll"; // the summaries of the blogposts
 @import "comments";  //the mastodon comments
+@import "model_viewer"; //Styles for the 3D model viewer
 
 // The syntax highlighting css
 // generated with rougify style bw > code_style_bw.scss

_sass/model_viewer.scss

@@ -0,0 +1,65 @@
+.Hotspot {
+    background: #fff;
+    border-radius: 32px;
+    border: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 15px;
+    padding: 8px;
+    position: relative;
+    transition: opacity 0.3s;
+    width: 15px;
+  }
+  
+  .Hotspot:not([data-visible]) {
+    background: transparent;
+    border: 4px solid #fff;
+    box-shadow: none;
+    height: 32px;
+    pointer-events: none;
+    width: 32px;
+  }
+  
+  .Hotspot:focus {
+    border: 4px solid rgb(0, 128, 200);
+    height: 32px;
+    outline: none;
+    width: 32px;
+  }
+  
+  .Hotspot > * {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+  
+  .HotspotAnnotation{
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    color: rgba(0, 0, 0, 0.8);
+    display: block;
+    font-family: Futura, Helvetica Neue, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    left: calc(100% + 2em);
+    max-width: 128px;
+    overflow-wrap: break-word;
+    padding: 0.5em 1em;
+    position: absolute;
+    top: 50%;
+    width: max-content;
+  }
+
+  .left.HotspotAnnotation {
+    right: calc(100% + 2em);
+    left: unset;
+  }
+  
+  .Hotspot:not([data-visible]) > * {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(calc(-50% + 4px));
+    transition: transform 0.3s, opacity 0.3s;
+  }
+  

cv.html

@@ -15,6 +15,14 @@ or have a look at my <a href="/blog">blog</a>. Click any item for a little more
     </div>
     
     {% for entry in work %}
+      {% if entry.image_markup %}
+      {% assign image_markup = entry.image_markup %}
+      {% else %}
+      {% capture image_markup %} 
+      <img  src="{{ entry.image }}" alt="{{ entry.alt }}">
+      {% endcapture %}
+      {% endif %}
+
       <details class="{{topic.id}}">
       <summary class="cv"><time>{{entry.period}}</time>
                         <div class = "title-column">
@@ -24,7 +32,7 @@ or have a look at my <a href="/blog">blog</a>. Click any item for a little more
       </summary>
       <div class = "details-container">
           <div class = "details-img">
-              <a href="{{entry.url}}"><img  src="{{entry.image}}" alt="{{entry.alt}}"></a>
+              <a href="{{entry.url}}">{{ image_markup }}</a>
           </div>
           <div class = "details-text">
               {{entry.excerpt}}