cleaned up design features

one-mit · May 27, 2024 · a7c34c4 · a7c34c4
1 parent 75ecd1f
commit a7c34c4
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 36 deletions.
diff --git a/src/faq.md b/src/faq.md
@@ -55,7 +55,7 @@ Every year MIT welcomes new students, staff, and faculty to join the community!
 **Q: Why is nothing showing up as I zoom in?**
 
 Names are loaded as vector tiles at higher zoom levels, but it might take a few moments.
-Read more about how [here]("./name-search").
+Read more about how [here](./name-search).
 
 :::
 
@@ -64,7 +64,7 @@ Read more about how [here]("./name-search").
 **Q: What order are the names in?**
 
 The names are in pseudo-random order.
-Read more about why [here]("./design-process").
+Read more about why [here](./design-process).
 
 :::
 
@@ -73,7 +73,7 @@ Read more about why [here]("./design-process").
 **Q: Who designed One.MIT?**
 
 MIT Professor W. Craig Carter leads the artistic vision and intricate mathematical designs for every version of One.MIT.
-Learn more about the design process [here]("./design-process").
+Learn more about the design process [here](./design-process).
 
 :::
 
@@ -82,7 +82,7 @@ Learn more about the design process [here]("./design-process").
 **Q: How is the wafer made?**
 
 Each wafer is fabricated right in MIT.nano cleanrooms on campus, led by Jorg Scholvin with assistance from MIT undergrad students!
-Learn more about the wafer fabrication [here]("./wafer-fabrication").
+Learn more about the wafer fabrication [here](./wafer-fabrication).
 
 :::
 
@@ -93,7 +93,7 @@ Learn more about the wafer fabrication [here]("./wafer-fabrication").
 MIT alum Georgios Varnavides implemented the name-search functionality.
 The 2018 version uses precomputed images at different magnifications.
 The 2020 and 2024 versions use vector tiles to implement a navigation-like interface.
-Learn more about the name search implementation [here]("./name-search").
+Learn more about the name search implementation [here](./name-search).
 
 :::
 

diff --git a/src/imgs/hilbert-schematics.png b/src/imgs/hilbert-schematics.png
diff --git a/src/imgs/hilbert_curves.png b/src/imgs/hilbert_curves.png
diff --git a/src/imgs/mit-background-washed.jpg b/src/imgs/mit-background-washed.jpg
diff --git a/src/imgs/mit_logo_std_rgb_black.svg b/src/imgs/mit_logo_std_rgb_black.svg
diff --git a/src/imgs/one-visit-overlay.jpg b/src/imgs/one-visit-overlay.jpg
diff --git a/src/imgs/onemit2024_base_image.png b/src/imgs/onemit2024_base_image.png
diff --git a/src/imgs/schwarz-christoffel-mapping.png b/src/imgs/schwarz-christoffel-mapping.png
diff --git a/src/inception.md b/src/inception.md
@@ -30,7 +30,7 @@ Each design &ndash; the Great Dome (2018), the MIT Seal (2020), and the Move to
 In Bulovic's words, “One.MIT celebrates the MIT ethos and reminds us that no matter when we came to MIT, whatever our roles, we all leave a mark on this remarkable community.”
 
 The One.MIT artwork and specially fabricated wafers are on permanent display in the ground floor galleries at MIT.nano in the <a href="https://whereis.mit.edu/?go=12">Lisa T. Su Building</a>.
-The [onemit.mit.edu]("https://onemit.mit.edu") interactive website allows visitors to search for individual names in each design.
+The [onemit.mit.edu](https://onemit.mit.edu) interactive website allows visitors to search for individual names in each design.
 
 (Image: MIT.nano in the <a href="https://whereis.mit.edu/?go=12">Lisa T. Su Building</a>, opened in 2018.)
 

diff --git a/src/special-features.md b/src/special-features.md
@@ -1,55 +1,82 @@
 ---
-title: Design Notes
+title: Design Features
 toc: false
 theme: [air, alt, wide]
 style: css/custom.css
 ---
 
-<div class= "grid grid-cols-2">
-  <div class="card">
-    <h1> Special features of the designs  </h1>
+```js
+// IMAGES
 
-Curious about the inspirations and special features behind each One.MIT design? Read on below!
+const img_src_souvenir = FileAttachment(
+  "./imgs/lithograph_1916_program_image.png",
+).href;
+const img_src_hilbert = FileAttachment("./imgs/hilbert-schematics.png").href;
+const img_src_thumbnail = FileAttachment(
+  "./imgs/onemit2024_thumbnail.png",
+).href;
+const img_style = "object-fit:contain;";
+import { return_resized_img } from "./components/img_utils.js";
+```
+
+<div class= "grid grid-cols-2" style="grid-auto-rows: auto;">
+
+:::card
+
+# Special Design Features
 
 **_One.MIT 2024 - Move to Cambridge_**
 
 Inspired by a 1916 lithograph celebrating the opening of MIT’s then newly-built Cambridge campus, the One.MIT 2024 design achieves its background gradient effect by using a _single continuous line_ that weaves back and forth in a Schwarz-Christoffel mapping of a Hilbert curve.
 
-[![Image of program cover](./imgs/lithograph_1916_program_image.png)](https://cdn.libraries.mit.edu/dissemination/diponline/AC0343/AC0343_SouvenirProgram.pdf)
-
 Carter had to redraw the lithograph’s architectural features and character elements to get clean data representation.
-
 The color gradient representing the sky behind the dome was a challenge because only two shades were available. In true MIT spirit, this challenge provided Carter an opportunity for nerdiness and fun. Two techniques were combined to create the gradient effect.
 
-![Hilbert curves](./imgs/hilbert_curves.png)
+The first technique to create a Hilbert curve. 
+A Hilbert curve is a hierarchical continuous curve that is created by replacing an element with combination of four elements. 
+Each of these four elements are replaced by another four elements, and so on.
+The result is a fractal-like object composed on 90-degree turns. 
+The Hilbert curve creates the texture that is the foundation of the gradient for the sky in the final figure. 
+It also will help create a useful reference as you search for a name in ONE.MIT.
+:::
 
-The first technique to create a Hilbert curve. A Hilbert curve is a hierarchical continuous curve that is created by replacing an element with combination of four elements. Each of these four elements are replaced by another four elements, and so on. The result is a fractal-like object composed on 90-degree turns. The Hilbert curve creates the texture that is the foundation of the gradient for the sky in the final figure. It also will help create a useful reference as you search out a name in ONE.MIT.
+<div style="min-height:300px;">
+  ${resize((width,height)=> return_resized_img(img_src_souvenir,width,height,img_style))}
+</div>
+
+:::card
 
-![Schwarz-Christoffel mapping](./imgs/schwarz-christoffel-mapping.png)
+To achieve the gradient and the wafer shape, Carter morphed square Hilbert curve into a disk. 
+Maintaining the 90-degree turns provides a pleasing aesthetic element and an opportunity to inject some complex analysis nerdiness into the scheme.
 
-To achieve the gradient and the wafer shape, Carter morphed square Hilbert curve into a disk. Maintaining the 90-degree turns provides a pleasing aesthetic element and an opportunity to inject some Complex Analysis nerdiness into the scheme.
+A conformal map comes in handy—in this case the Schwarz-Christoffel mapping.
+Conformal maps can be used to solve problems in electrostatics, gravitational fields, fluid flow, and temperature distributions—they are lovely convergences of physics and engineering with mathematics and geometry.
 
-A Conformal Map comes in handy—in this case the Schwarz-Christoffel mapping. Conformal maps can be used to solve problems in electrostatics, gravitational fields, fluid flow, and temperature distributions—they are lovely convergences of physics and engineering with mathematics and geometry.
+Because the conformal mapping is smooth and preserves the local angles, the square’s corners produce four singular points on the circle where the Hilbert curve’s line segments shrink to a point. 
+The location of the four points in the upper part of the circle squeezes the curve and creates the gradient: dense-to-sparse from top-to-bottom.
 
-Because the conformal mapping is smooth and preserves the local angles, the square’s corners produce four singular points on the circle where the Hilbert curve’s line segments shrink to a point. The location of the four points in the upper part of the circle squeezes the curve and creates the gradient: dense-to-sparse from top-to-bottom.
+:::
 
-![One.MIT 2024 drawing](./imgs/onemit2024_base_image.png)
+<div style="min-height:200px;">
+  ${resize((width,height)=> return_resized_img(img_src_hilbert,width,height,img_style))}
+</div>
 
-<br>
+:::card
 
 **One.MIT 2020 - The MIT Seal**
 
-If you look carefully, you may spot an additional motif hidden on the 2020 wafer. Inspired by the beautiful (and intriguingly mathematical) patterns inside a sunflower, known as phyllotaxis, this subtle pattern spirals out over the design.
+If you look carefully, you may spot an additional motif hidden on the 2020 wafer.
+Inspired by the beautiful (and intriguingly mathematical) patterns inside a sunflower, known as phyllotaxis, this subtle pattern spirals out over the design.
+
+:::
 
-<br>
+:::card
 
 **One.MIT 2018 - The Great Dome**
 
-This original image of MIT’s iconic Great Dome was drawn by Heidi Erickson, senior graphic designer in the MIT Center for Art, Science & Technology. Read more about the very first One.MIT design at MIT News: <a href="https://news.mit.edu/2019/onemit-creates-monument-at-smallest-scale-0318">“One.MIT” creates a monument — at the smallest scale</a>.
+This original image of MIT’s iconic Great Dome was drawn by Heidi Erickson, senior graphic designer in the MIT Center for Art, Science & Technology.
+Read more about the very first One.MIT design at MIT News: ["One.MIT" creates a monument - at the smallest scale](https://news.mit.edu/2019/onemit-creates-monument-at-smallest-scale-0318).
 
-  </div>
+:::
 
-  <div class="card">
-    <h1> Figure placeholder </h1>
-  </div>
 </div>