Skip to content

Commit 75ecd1f

Browse files
committed
cleaned up design process, added border
1 parent 477e88c commit 75ecd1f

File tree

5 files changed

+49
-47
lines changed

5 files changed

+49
-47
lines changed

src/design-process.md

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,67 @@ theme: [air, alt, wide]
55
style: css/custom.css
66
---
77

8-
<style>
9-
10-
.img-container {
11-
text-align: center;
12-
}
13-
14-
.img-container img {
15-
position: absolute;
16-
left:50%;
17-
transform: translateX(-50%);
18-
}
19-
20-
</style>
21-
228
```js
239
// IMAGES
2410

2511
const img_src_kerning = FileAttachment("./imgs/text_kerning_example.png").href;
2612
const img_src_zoomin = FileAttachment("./imgs/crop_M.jpg").href;
27-
28-
function return_img(src, size) {
29-
return html` <img src="${src}" height="${size}px" width="${size}px" /> `;
30-
}
13+
const img_style =
14+
"object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
15+
import { return_resized_img } from "./components/img_utils.js";
3116
```
3217

33-
<div class= "grid grid-cols-2">
34-
<div class="card">
35-
<h1> Design Process </h1>
36-
37-
For every iteration of One.MIT, Prof. W. Craig Carter created the designs, algorithms, numerical solutions, and data translation -- a tremendous undertaking.
18+
<div class= "grid grid-cols-2" style="grid-auto-rows: auto;">
3819

39-
**Placing the names and creating the mosaics**
20+
:::card
4021

41-
Every One.MIT artwork starts from a black and white image: MIT's Great Dome, drawn by Heidi Erickson (2018); the MIT Seal (2020); an image Carter himself drew, inspired by a lithograph produced for the 1916 celebration of MIT's move from Boston to Cambridge (2024).
22+
# Kerning
4223

43-
The black and white regions sow the seeds that produce the heavy and light fonts that you see in the final image. For the final layout files, it was necessary for Carter to recreate kerns and the fonts as algorithmic geometric objects.
24+
For every One.MIT mosaic, Prof. W. Craig Carter created the designs, algorithms, numerical solutions, and data translation -- a tremendous undertaking.
4425

45-
The font types are inherited from their position in the background image. Quality typesetting requires the spacing between characters to be “kerned.” For example, the appearance of **LY** looks better when the spacing within the **L** and the **Y** is smaller. **IM** looks better with a wider spacing and so the kern is larger.
26+
Every One.MIT mosaic starts from a black and white image: MIT's Great Dome, drawn by Heidi Erickson (2018); the MIT Seal (2020); an image inspired by a 1916 lithograph celebrating MIT's move to Cambridge (2024).
27+
The black and white regions sow the seeds that produce the heavy and light fonts that you see in the final image.
28+
For the final layout files, it was necessary for Carter to recreate kerns and the fonts as algorithmic geometric objects.The font types are inherited from their position in the background image.
4629

47-
(_Image: An example of text with kerning. <a href="https://en.wikipedia.org/wiki/Kerning">Curious about kerning? Learn more at Wikipedia.</a>_)
30+
Quality typesetting requires the spacing between characters to be [“kerned.”](https://en.wikipedia.org/wiki/Kerning)
31+
For example, the appearance of **LY** looks better when the spacing within the **L** and the **Y** is smaller.
32+
**IM** looks better with a wider spacing and so the kern is larger.
4833

49-
</div>
34+
The kerns are different for the different font &ndash; each character pair has four possible kerns.
35+
This produces some complexity because minor adjustments can switch font types that have different widths and kerns.
36+
The change in spacing produces a cascading effect on subsequent font choices.
37+
Modifying just one letter from light to dark (and vice versa) perturbs the spacing in the whole image and requires re-computing the entire mosaic.
5038

51-
<div class="card">
52-
${resize((width,height)=> return_img(img_src_kerning,Math.min(width,height)))}
53-
</div>
39+
_(Image: An example of text with [kerning](https://en.wikipedia.org/wiki/Kerning).)_
5440

55-
<div class="card">
41+
:::
42+
43+
<div style="min-height:350px;">
44+
${resize((width,height)=> return_resized_img(img_src_kerning,width,height,img_style))}
45+
</div>
5646

57-
The kerns are different for the different fonts—each character pair has four possible kerns. This produces some complexity because minor adjustments can switch font types that have different widths and kerns. The change in spacing produces a cascading effect on subsequent font choices. Modifying just one letter from light to dark (and vice versa) perturbs the spacing in the whole image and requires re-computing the entire mosaic.
47+
:::card
5848

59-
Finally, Carter needed to find a font scale that fills the wafer space maximally. This seems straightforward at first. However, a small font change can cause an entire word to wrap around to the next line (which is familiar to anyone trying to fit an essay into a fixed number of pages). Optimization would be simple if the leftover space smoothly decreased as the font scale gets larger—but the word wrap problem throws a spanner in the works. Carter’s algorithm alleviates this somewhat by searching for names that slot into remaining spaces at the end of each row. Even with these minute fixes, a satisfactory font scale cannot always be obtained. So, the final algorithm performs an optimization over many different choices for the random order of the names.
49+
# Font Optimization
6050

61-
Once a solution (i.e., the final image created by the millions of characters) is obtained it must be converted to two different printing languages. For the wafer fabrication, Carter had to write data conversions to the layout file format (GDSII) that was created for interconnects on silicon chips.  For the large wall print, the data is converted to PostScript and then from PostScript to PDF.
51+
Finally, Carter needed to find a font scale that fills the wafer space maximally.
52+
While this seems straightforward at first, a small font change can cause an entire word to wrap around to the next line (familiar to anyone trying to fit an essay into a fixed number of pages).
53+
Optimization would be simple if the leftover space smoothly decreased as the font scale gets larger—but the word wrap problem throws a spanner in the works.
54+
Carter’s algorithm alleviates this somewhat by searching for names that slot into remaining spaces at the end of each row.
55+
56+
Even with these minute fixes, a satisfactory font scale cannot always be obtained.
57+
So, the final algorithm performs an optimization over many different choices for the random order of the names.
58+
59+
Once a solution (i.e., the final image created by the millions of characters) is obtained it must be converted to two different printing languages.
60+
For the wafer fabrication, Carter had to write data conversions to the layout file format (GDSII) that was created for interconnects on silicon chips.
61+
For the large wall print, the data is converted to PostScript and then from PostScript to PDF.
6262

6363
_(Image: Zooming on the One.MIT 2018 wafer design)_
6464

65-
</div>
65+
:::
6666

67-
<div class="card">
68-
${resize((width,height)=> return_img(img_src_zoomin,Math.min(width,height)))}
69-
</div>
67+
<div style="min-height:350px;">
68+
${resize((width,height)=> return_resized_img(img_src_zoomin,width,height,img_style))}
69+
</div>
7070

7171
</div>

src/gathering-names.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ style: css/custom.css
1010

1111
const img_src = FileAttachment("./imgs/about-OCR4.png").href;
1212
const img_style =
13-
"object-fit:cover; object-position:left; border-radius: 0.75rem;";
13+
"object-fit:cover; object-position: left; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
1414
import { return_resized_img } from "./components/img_utils.js";
1515
```
1616

src/inception.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ style: css/custom.css
99
// IMAGES
1010

1111
const img_src = FileAttachment("./imgs/MIT-nano-exterior_0.jpg").href;
12-
const img_style = "object-fit:cover; border-radius: 0.75rem;";
12+
const img_style =
13+
"object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
1314
import { return_resized_img } from "./components/img_utils.js";
1415
```
1516

@@ -35,7 +36,7 @@ The [onemit.mit.edu]("https://onemit.mit.edu") interactive website allows visito
3536

3637
:::
3738

38-
<div style="min-height:500px;">
39+
<div style="min-height:450px;">
3940
${resize((width,height)=> return_resized_img(img_src,width,height,img_style))}
4041
</div>
4142

src/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ Come see the wafers in the MIT.nano first floor galleries located in the southwe
3333
:::
3434

3535
<div class="grid grid-cols-3" style="grid-auto-rows: auto;">
36-
<div class="img-container" style="min-height:242px;">
36+
<div class="img-container" style="min-height:300px;">
3737
${resize((width,height)=> return_resized_img_link(img_src_2018,"./onemit2018",Math.min(width,height)))}
3838
</div>
39-
<div class="img-container" style="min-height:242px;">
39+
<div class="img-container" style="min-height:300px;">
4040
${resize((width,height)=> return_resized_img_link(img_src_2020,"./onemit2020",Math.min(width,height)))}
4141
</div>
42-
<div class="img-container" style="min-height:242px;">
42+
<div class="img-container" style="min-height:300px;">
4343
${resize((width,height)=> return_resized_img_link(img_src_2024,"./onemit2024",Math.min(width,height)))}
4444
</div>
4545
</div>

src/onemit2018.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ sql:
1111
// SEARCH BACKGROUND IMAGE
1212

1313
const img_src = FileAttachment("./imgs/onemit2018-search_background.jpg").href;
14-
const img_style = "object-fit:cover; border-radius: 0.75rem;";
14+
const img_style =
15+
"object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
1516
import { return_resized_img } from "./components/img_utils.js";
1617
```
1718

0 commit comments

Comments
 (0)