fix HTML problems related to pandoc and markdown image notation

Improve `make clobber` for `2004/anonymous`. Instead of using this markdown element to embed an image: ``` ![alt text](filename.png "Title") ``` Use a "img" HTML element with "alt", "alt", "width" and "length" attributes: ``` <img src="filename.png" alt="describe the filename.png image for someone who cannot view it" width=PIXEL_WIDTH height=PIXEL_HEIGHT> ``` This was performed for: ``` 2004/anonymous/index.html 2005/boutines/index.html 2011/goren/index.html 2012/vik/index.html 2013/birken/index.html 2013/cable1/index.html 2013/cable3/index.html 2013/hou/doc/example.html 2013/hou/index.html 2020/ferguson1/chocolate-cake.html ``` In the case of `2013/cable1/index.html` we reduce the displayed image size by a factor for 2. There is **NO** need to downsize the image as this image size reduction produces a clean and sharp looking image. In the case of `2013/hou/index.html` we reduce the displayed image size by a factor for 2. There is **NO** need to downsize the image as this image size reduction produces a clean and sharp looking image. In the case of `2020/ferguson1/chocolate-cake.html` we reduce the displayed image size by a factor for 4. There is **NO** need to downsize the image as this image size reduction produces a clean and sharp looking image. Run `make www` to perform the above.
2024-04-20 21:42:50 -07:00
1 parent 651e21719c
commit 9b55039fd4
@@ -203,6 +203,7 @@ clean:

 clobber: clean
 	${RM} -f ${TARGET} ${ALT_TARGET}
+	${RM} -f precious.pgm ring.pgm
 	${RM} -rf *.dSYM
 	@-if [ -e sandwich ]; then \
 	    ${RM} -f sandwich; \
@@ -198,7 +198,7 @@ it. The real text is:</p>
 Speech</a>:</p>
 <p><img src="One_Ring_inscription.png"
 alt="The inscription, in the Black Speech of Mordor, on the One Ring"
- width=453 height=127></p>
+ width=690 height=127></p>
 <p>into English reads:</p>
 <pre><code>    One Ring to rule them all,
    One Ring to find them,
@@ -108,7 +108,9 @@ factors.

 Therefore this entry is limited to

-![floor\bigg(\frac{10^6}{4\times(sizeof(double)+1)}-1\bigg)](eqn.png)
+<img src="eqn.png"
+ alt="equation of the limit of the entry"
+ width=232 height=43>

 points and won't even be suitable for more than a few thousand; although
 generated files did pass the [W3C SVG
@@ -181,7 +183,9 @@ viewport and potentially every

 ### Example Output

-![Voronoi diagram of two regular pentagon vertices](Voronoi.png)
+<img src="Voronoi.png"
+ alt="image of example output: 5 regions of a 5-pointed star with 5 external regions beyond it"
+ width=542 height=542>


 <!--
@@ -211,10 +211,9 @@ hard to qualify under the IOCCC size limit. So guess what I did? A compromise
 favoring innermost obfuscation, sacrificing sometimes speed and other tedious
 factors.</p>
 <p>Therefore this entry is limited to</p>
-<figure>
-<img src="eqn.png" alt="floor(-1)" />
-<figcaption aria-hidden="true">floor(-1)</figcaption>
-</figure>
+<p><img src="eqn.png"
+ alt="equation of the limit of the entry"
+ width=232 height=43></p>
 <p>points and won’t even be suitable for more than a few thousand; although
 generated files did pass the <a href="https://validator.w3.org/#validate_by_upload+with_options">W3C SVG
 Validator</a>, and are
@@ -266,10 +265,9 @@ viewport and potentially every
 <li><a href="http://www.snibbe.com/scott/bf">Voronoi and Art</a></li>
 </ul>
 <h3 id="example-output">Example Output</h3>
-<figure>
-<img src="Voronoi.png" alt="Voronoi diagram of two regular pentagon vertices" />
-<figcaption aria-hidden="true">Voronoi diagram of two regular pentagon vertices</figcaption>
-</figure>
+<p><img src="Voronoi.png"
+ alt="image of example output: 5 regions of a 5-pointed star with 5 external regions beyond it"
+ width=542 height=542></p>
 <!--

    Copyright © 1984-2024 by Landon Curt Noll. All Rights Reserved.
@@ -23,7 +23,9 @@

 In the words of [René François Ghislain Magritte Magritte](http://en.wikipedia.org/wiki/Rene_Magritte):

-![This is not a pipe](MagrittePipe.jpg "Ceci n'est pas une pipe")
+<img src="MagrittePipe.jpg"
+ alt="The Treachery of Images, image of a pipe, titled: Ceci n'est pas une pipe"
+ width=387 height=264>

 One may ask the surrealist question:

@@ -160,10 +160,9 @@ Location: <a href="../../location.html#IL">IL</a> - <em>State of Israel</em> (<e
 <pre><code>    ./try.sh</code></pre>
 <h2 id="judges-remarks">Judges’ remarks:</h2>
 <p>In the words of <a href="http://en.wikipedia.org/wiki/Rene_Magritte">René François Ghislain Magritte Magritte</a>:</p>
-<figure>
-<img src="MagrittePipe.jpg" title="Ceci n&#39;est pas une pipe" alt="This is not a pipe" />
-<figcaption aria-hidden="true">This is not a pipe</figcaption>
-</figure>
+<p><img src="MagrittePipe.jpg"
+ alt="The Treachery of Images, image of a pipe, titled: Ceci n'est pas une pipe"
+ width=387 height=264></p>
 <p>One may ask the surrealist question:</p>
 <pre><code>    echo &#39;If | is just a representation of a pipe, then how can data stuff it?&#39; | ./goren</code></pre>
 <p>However if one takes a firm stand and declares:</p>
@@ -83,10 +83,11 @@ Use `vik.alt` as you would `vik` above.
 References to chocolate had no effect on judging this entry. We
 guarantee it.

-Can you discern hidden pieces of chocolate in
-[chocolate-in-ioccc.png](chocolate-in-ioccc.png)?
+Can you discern hidden pieces of chocolate in:

-![chocolate in ioccc](chocolate-in-ioccc.png "Chocolate in IOCCC")
+<img src="chocolate.png"
+ alt="image of peices of chocolate candy"
+ width=300 height=110>


 ## Author's remarks:
@@ -183,12 +183,10 @@ code</a> section below.</p>
 <h2 id="judges-remarks">Judges’ remarks:</h2>
 <p>References to chocolate had no effect on judging this entry. We
 guarantee it.</p>
-<p>Can you discern hidden pieces of chocolate in
-<a href="chocolate-in-ioccc.png">chocolate-in-ioccc.png</a>?</p>
-<figure>
-<img src="chocolate-in-ioccc.png" title="Chocolate in IOCCC" alt="chocolate in ioccc" />
-<figcaption aria-hidden="true">chocolate in ioccc</figcaption>
-</figure>
+<p>Can you discern hidden pieces of chocolate in:</p>
+<p><img src="chocolate.png"
+ alt="image of peices of chocolate candy"
+ width=300 height=110></p>
 <h2 id="authors-remarks">Author’s remarks:</h2>
 <h3 id="introduction">Introduction</h3>
 <p>This program is a <a href="https://en.wikipedia.org/wiki/Steganography">steganography</a>
@@ -133,13 +133,19 @@ from the bottom up. To generate an individual square, the algorithm assembles a
 structure consisting of a rectangular region fully supported by a single square
 protruding from the bottom. When the rectangular region is completed, its rows
 are cleared, leaving behind the protruding square. Three examples of the process
-appear below.
+appear below:

-![](pen0.gif)
+<img src="pen0.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #0"
+ width=528 height=132>

-![](pen1.gif)
+<img src="pen1.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #1"
+ width=528 height=204>

-![](pen2.gif)
+<img src="pen2.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #2"
+ width=528 height=228>

 During construction of a row, all of the squares produced by this method must be
 supported. In the images above, the generated squares are supported by the floor
@@ -148,9 +154,11 @@ provide the support necessary for the construction of the row above it. The
 algorithm solves this problem by constructing a flat platform on top of the row
 with holes. In the animation below, a platform is built above a row comprising
 of a single red square. The platform is a temporary structure and inserting the
-final piece removes it.
+final piece removes it:

-![](platform0.gif)
+<img src="platform0.gif"
+ alt="animated gif the bottom layers of a Tetris game showing a platform formed and going away #0"
+ width=528 height=156>

 Below, a row containing 5 red squares is deposited above a row containing 3 red
 squares. This is accomplished by building a flat platform on top of the lower
@@ -158,9 +166,11 @@ row. The platform provides the support necessary to generate the 5 red squares.
 Finally, the platform is removed by inserting its final piece and the new row
 drops into place. Note, if the algorithm needed to generate the rows in the
 opposite order (a row of 3 red squares above a row of 5 red squares), a platform
-would not be necessary.
+would not be necessary:

-![](platform1.gif)
+<img src="platform1.gif"
+ alt="animated gif the bottom layers of a Tetris game showing a platforms forming going away #1"
+ width=528 height=324>


 ### Single Square Emitters
@@ -170,7 +180,9 @@ For reference, the names of the 7
 actually a kind of geometric shape used in
 [Tetris](https://en.wikipedia.org/wiki/Tetris)) appear in the table below.

-![](names.png)
+<img src="names.png"
+ alt="image of names of the 7 Tetris game pieces"
+ width=696 height=144>

 This algorithm was tailored specifically to render sprites from early video
 games. Those games packed graphics into 8x8 tiles where 2 bits were dedicated to
@@ -182,9 +194,11 @@ The animation below depicts all the patterns used to emit single squares. `J`,
 interchangeably within each pattern to produce the protruding square at the
 bottom. The algorithm assigns those tetriminos to the 3 colors present in the
 sprite. The remaining tetriminos are assigned arbitrary colors. And, all the
-colors remain constant during gameplay.
+colors remain constant during gameplay"

-![](pen4.gif)
+<img src="pen4.gif"
+ alt="image of assignment of colours of Tetris game pieces"
+ width=528 height=228>

 It is not possible to emit a square of all 3 colors in the first 2 and the last
 2 columns due to the shapes of the 3
@@ -194,16 +208,20 @@ squares. However, it turns out that 20 is too small.

 As illustrated below, the region above the protruding square cannot exclusively
 consist of a single row because the only pieces that could fit, the `I`
-[tetriminos](https://en.wikipedia.org/wiki/Tetromino), are unsupported.
+[tetriminos](https://en.wikipedia.org/wiki/Tetromino), are unsupported:

-![](pen5.gif)
+<img src="pen5.gif"
+ alt="image of showing a single row with the only pieces that could fit"
+ width=480 height=84>

 With 2 rows, the only means of spanning the full play-field width in a way that
 remains supported is to use `S` and `Z`
 [tetriminos](https://en.wikipedia.org/wiki/Tetromino).  But, that will always
-leave holes in the upper row.
+leave holes in the upper row:

-![](pen6.gif)
+<img src="pen6.gif"
+ alt="image of showing a row of S and Z Tetris pieces"
+ width=576 height=108>

 The minimal number of rows required above the protruding square is 3 and as
 shown repeatedly above, such patterns do exist.  20 squares is the minimal width
@@ -224,11 +242,15 @@ square emitting patterns.  However, due to mirror symmetry, there are really
 only 10 patterns.  Clearing 3 rows works for the majority of them.  But, an
 exhaustive computer search revealed that 2 of the patterns require more.  The
 next possible option is 7 rows since `21 * 7 + 1 = 148`, requiring 37
-tetriminos.  As the images below show, those patterns do exist.
+tetriminos.  As the images below show, those patterns do exist:

-![](pen7.gif)
+<img src="pen7.gif"
+ alt="image of showing patterns of Tetris pieces #7"
+ width=528 height=228>

-![](pen8.gif)
+<img src="pen8.gif"
+ alt="image of showing patterns of Tetris pieces #8"
+ width=528 height=228>


 ### Platforms
@@ -246,9 +268,12 @@ a `T` [tetrimino](https://en.wikipedia.org/wiki/Tetromino) on top one of the
 squares of the last generated row.  The remaining tetriminos support each other
 down to that first `T`.  Meaning, as long as the previously generated row
 contains at least 1 square, like the red square below, then it is possible to
-construct a flat platform above it for the generation of the next row.
+construct a flat platform above it for the generation of the next row:

-![](platform2.gif)
+<img src="platform2.gif"
+ alt="image of a tattoo of the 1984 anonymous C code"
+ alt="animated gif showing a bottom Tetris row with a red square and constucted patterns above it"
+ width=528 height=156>

 In the middle of platform construction, the bottom row gets completed and
 cleared, leaving 3 rows above it.  The final `J` or `L`
@@ -269,7 +294,9 @@ above exist.
 The input sprite is represented textually.  Digit characters `0` to `7`
 correspond to pixels with colors from the palette below.

-![ANSI color palette](palette.png)
+<img src="palette.png"
+ alt="image of the Tetris palette"
+ width=432 height=84>

 As discussed above, sprites are limited to a maximum of 3 colors from this
 palette.
@@ -381,9 +408,11 @@ squares were sorted such that the least significant bits stored the largest
 coordinate values.  The results were offset by 35, the `#` character, which is 1
 beyond the ASCII value of `"`, making it easier to pack into a string.  None of
 the resultant values are beyond ASCII 127.  The coordinates for all 19 rotations
-fit in a string of length 38.
+fit in a string of length 38:

-![](rotations.png)
+<img src="rotations.png"
+ alt="image of a the 7 Tetris pieces under all 19 rotations"
+ width=672 height=336>

 The second string stores the single square emitter patterns and the platform
 patterns.  Each pattern is a sequence of pairs, `{ tetrimino index, drop
@@ -440,22 +469,34 @@ program as a prime number generator.
 Due to the contest code size constraint, some optimizations reluctantly had to
 be omitted.  For example, multi-square emitters are possible:

-![](multi2.gif)
+<img src="multi2.gif"
+ alt="image showing Tetris multi-square emitters #2"
+ width=528 height=204>

-![](multi3.gif)
+<img src="multi3.gif"
+ alt="image showing Tetris multi-square emitters #3"
+ width=528 height=180>

-![](multi4.gif)
+<img src="multi4.gif"
+ alt="image showing Tetris multi-square emitters #4"
+ width=528 height=156>

-![](multi5.gif)
+<img src="multi5.gif"
+ alt="image showing Tetris multi-square emitters #5"
+ width=528 height=132>

 In fact, using dynamic programming and creative heuristics, real-time search is
 possible, enabling patterns like this:

-![](triple0.gif)
+<img src="triple0.gif"
+ alt="image showing Tetris triple patterns #0"
+ width=528 height=180>

 And, even this:

-![](triple1.gif)
+<img src="triple1.gif"
+ alt="image showing Tetris triple patterns #1"
+ width=528 height=156>

 In addition, it is possible to extend the algorithm to 6 colors instead of just 3.
 This is achieved using `I`, `S` and `Z` to produce the protruding square.  A
@@ -222,10 +222,16 @@ from the bottom up. To generate an individual square, the algorithm assembles a
 structure consisting of a rectangular region fully supported by a single square
 protruding from the bottom. When the rectangular region is completed, its rows
 are cleared, leaving behind the protruding square. Three examples of the process
-appear below.</p>
-<p><img src="pen0.gif" /></p>
-<p><img src="pen1.gif" /></p>
-<p><img src="pen2.gif" /></p>
+appear below:</p>
+<p><img src="pen0.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #0"
+ width=528 height=132></p>
+<p><img src="pen1.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #1"
+ width=528 height=204></p>
+<p><img src="pen2.gif"
+ alt="animated gif the bottom layers of a Tetris game being cleared #2"
+ width=528 height=228></p>
 <p>During construction of a row, all of the squares produced by this method must be
 supported. In the images above, the generated squares are supported by the floor
 of the play-field. However, if an arbitrary row contains holes, it may not
@@ -233,22 +239,28 @@ provide the support necessary for the construction of the row above it. The
 algorithm solves this problem by constructing a flat platform on top of the row
 with holes. In the animation below, a platform is built above a row comprising
 of a single red square. The platform is a temporary structure and inserting the
-final piece removes it.</p>
-<p><img src="platform0.gif" /></p>
+final piece removes it:</p>
+<p><img src="platform0.gif"
+ alt="animated gif the bottom layers of a Tetris game showing a platform formed and going away #0"
+ width=528 height=156></p>
 <p>Below, a row containing 5 red squares is deposited above a row containing 3 red
 squares. This is accomplished by building a flat platform on top of the lower
 row. The platform provides the support necessary to generate the 5 red squares.
 Finally, the platform is removed by inserting its final piece and the new row
 drops into place. Note, if the algorithm needed to generate the rows in the
 opposite order (a row of 3 red squares above a row of 5 red squares), a platform
-would not be necessary.</p>
-<p><img src="platform1.gif" /></p>
+would not be necessary:</p>
+<p><img src="platform1.gif"
+ alt="animated gif the bottom layers of a Tetris game showing a platforms forming going away #1"
+ width=528 height=324></p>
 <h3 id="single-square-emitters">Single Square Emitters</h3>
 <p>For reference, the names of the 7
 <a href="https://en.wikipedia.org/wiki/Tetromino">tetriminos</a> (the game pieces or
 actually a kind of geometric shape used in
 <a href="https://en.wikipedia.org/wiki/Tetris">Tetris</a>) appear in the table below.</p>
-<p><img src="names.png" /></p>
+<p><img src="names.png"
+ alt="image of names of the 7 Tetris game pieces"
+ width=696 height=144></p>
 <p>This algorithm was tailored specifically to render sprites from early video
 games. Those games packed graphics into 8x8 tiles where 2 bits were dedicated to
 each pixel. Consequentially, sprites usually contained only 3 colors plus
@@ -258,8 +270,10 @@ transparent regions and they were typically sized either 16x16 or 16x32 pixels.<
 interchangeably within each pattern to produce the protruding square at the
 bottom. The algorithm assigns those tetriminos to the 3 colors present in the
 sprite. The remaining tetriminos are assigned arbitrary colors. And, all the
-colors remain constant during gameplay.</p>
-<p><img src="pen4.gif" /></p>
+colors remain constant during gameplay”</p>
+<p><img src="pen4.gif"
+ alt="image of assignment of colours of Tetris game pieces"
+ width=528 height=228></p>
 <p>It is not possible to emit a square of all 3 colors in the first 2 and the last
 2 columns due to the shapes of the 3
 <a href="https://en.wikipedia.org/wiki/Tetromino">tetriminos</a>. As a result, the minimal
@@ -267,13 +281,17 @@ width of a play-field to accommodate a 16 pixel wide sprite is <code>2 + 16 + 2
 squares. However, it turns out that 20 is too small.</p>
 <p>As illustrated below, the region above the protruding square cannot exclusively
 consist of a single row because the only pieces that could fit, the <code>I</code>
-<a href="https://en.wikipedia.org/wiki/Tetromino">tetriminos</a>, are unsupported.</p>
-<p><img src="pen5.gif" /></p>
+<a href="https://en.wikipedia.org/wiki/Tetromino">tetriminos</a>, are unsupported:</p>
+<p><img src="pen5.gif"
+ alt="image of showing a single row with the only pieces that could fit"
+ width=480 height=84></p>
 <p>With 2 rows, the only means of spanning the full play-field width in a way that
 remains supported is to use <code>S</code> and <code>Z</code>
 <a href="https://en.wikipedia.org/wiki/Tetromino">tetriminos</a>. But, that will always
-leave holes in the upper row.</p>
-<p><img src="pen6.gif" /></p>
+leave holes in the upper row:</p>
+<p><img src="pen6.gif"
+ alt="image of showing a row of S and Z Tetris pieces"
+ width=576 height=108></p>
 <p>The minimal number of rows required above the protruding square is 3 and as
 shown repeatedly above, such patterns do exist. 20 squares is the minimal width
 required to fit a 16 pixel wide sprite. But, <code>20 * 3 + 1 = 61</code>, which is not
@@ -291,9 +309,13 @@ square emitting patterns. However, due to mirror symmetry, there are really
 only 10 patterns. Clearing 3 rows works for the majority of them. But, an
 exhaustive computer search revealed that 2 of the patterns require more. The
 next possible option is 7 rows since <code>21 * 7 + 1 = 148</code>, requiring 37
-tetriminos. As the images below show, those patterns do exist.</p>
-<p><img src="pen7.gif" /></p>
-<p><img src="pen8.gif" /></p>
+tetriminos. As the images below show, those patterns do exist:</p>
+<p><img src="pen7.gif"
+ alt="image of showing patterns of Tetris pieces #7"
+ width=528 height=228></p>
+<p><img src="pen8.gif"
+ alt="image of showing patterns of Tetris pieces #8"
+ width=528 height=228></p>
 <h3 id="platforms">Platforms</h3>
 <p>Before a row is constructed, the algorithm inspects the row below it. If the
 row below fails to provide support for all of the squares to be deposited above
@@ -307,8 +329,11 @@ a <code>T</code> <a href="https://en.wikipedia.org/wiki/Tetromino">tetrimino</a>
 squares of the last generated row. The remaining tetriminos support each other
 down to that first <code>T</code>. Meaning, as long as the previously generated row
 contains at least 1 square, like the red square below, then it is possible to
-construct a flat platform above it for the generation of the next row.</p>
-<p><img src="platform2.gif" /></p>
+construct a flat platform above it for the generation of the next row:</p>
+<p><img src="platform2.gif"
+ alt="image of a tattoo of the 1984 anonymous C code"
+ alt="animated gif showing a bottom Tetris row with a red square and constucted patterns above it"
+ width=528 height=156></p>
 <p>In the middle of platform construction, the bottom row gets completed and
 cleared, leaving 3 rows above it. The final <code>J</code> or <code>L</code>
 <a href="https://en.wikipedia.org/wiki/Tetromino">tetrimino</a> that will remove those rows
@@ -323,10 +348,9 @@ above exist.</p>
 <h3 id="program-input">Program Input</h3>
 <p>The input sprite is represented textually. Digit characters <code>0</code> to <code>7</code>
 correspond to pixels with colors from the palette below.</p>
-<figure>
-<img src="palette.png" alt="ANSI color palette" />
-<figcaption aria-hidden="true">ANSI color palette</figcaption>
-</figure>
+<p><img src="palette.png"
+ alt="image of the Tetris palette"
+ width=432 height=84></p>
 <p>As discussed above, sprites are limited to a maximum of 3 colors from this
 palette.</p>
 <p>All other characters are interpreted as transparent pixels.</p>
@@ -402,8 +426,10 @@ squares were sorted such that the least significant bits stored the largest
 coordinate values. The results were offset by 35, the <code>#</code> character, which is 1
 beyond the ASCII value of <code>"</code>, making it easier to pack into a string. None of
 the resultant values are beyond ASCII 127. The coordinates for all 19 rotations
-fit in a string of length 38.</p>
-<p><img src="rotations.png" /></p>
+fit in a string of length 38:</p>
+<p><img src="rotations.png"
+ alt="image of a the 7 Tetris pieces under all 19 rotations"
+ width=672 height=336></p>
 <p>The second string stores the single square emitter patterns and the platform
 patterns. Each pattern is a sequence of pairs, <code>{ tetrimino index, drop x-coordinate }</code>. As mentioned, there are 19 distinct rotations, requiring 5
 bits of storage for the <a href="https://en.wikipedia.org/wiki/Tetromino">tetrimino</a>
@@ -444,15 +470,27 @@ program as a prime number generator.</p></li>
 <h3 id="beyond-obfuscation">Beyond Obfuscation</h3>
 <p>Due to the contest code size constraint, some optimizations reluctantly had to
 be omitted. For example, multi-square emitters are possible:</p>
-<p><img src="multi2.gif" /></p>
-<p><img src="multi3.gif" /></p>
-<p><img src="multi4.gif" /></p>
-<p><img src="multi5.gif" /></p>
+<p><img src="multi2.gif"
+ alt="image showing Tetris multi-square emitters #2"
+ width=528 height=204></p>
+<p><img src="multi3.gif"
+ alt="image showing Tetris multi-square emitters #3"
+ width=528 height=180></p>
+<p><img src="multi4.gif"
+ alt="image showing Tetris multi-square emitters #4"
+ width=528 height=156></p>
+<p><img src="multi5.gif"
+ alt="image showing Tetris multi-square emitters #5"
+ width=528 height=132></p>
 <p>In fact, using dynamic programming and creative heuristics, real-time search is
 possible, enabling patterns like this:</p>
-<p><img src="triple0.gif" /></p>
+<p><img src="triple0.gif"
+ alt="image showing Tetris triple patterns #0"
+ width=528 height=180></p>
 <p>And, even this:</p>
-<p><img src="triple1.gif" /></p>
+<p><img src="triple1.gif"
+ alt="image showing Tetris triple patterns #1"
+ width=528 height=156></p>
 <p>In addition, it is possible to extend the algorithm to 6 colors instead of just 3.
 This is achieved using <code>I</code>, <code>S</code> and <code>Z</code> to produce the protruding square. A
 series of rectangular regions are constructed above those
@@ -65,18 +65,20 @@ A PC guy as expected.  What about that other Steve?
 Humm .. maybe there is a hidden reason he is leaving the late Micro$oft? :-)
 Why late? Because:

-![tweet about M$ being dead](dead-ms-tweet.jpg)
+<img src="dead-ms-tweet.jpg"
+ alt="image of snarky tweet from 2013 Nov 15 by Landon Noll about Microsoft"
+ width=491 height=312>

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-An important 2023 update about twitter:
+```
+    An important 2023 update about twitter:

-The IOCCC no longer uses twitter.  Today the IOCCC uses Mastodon.
-For more information and to see our IOCCC Mastodon posts, see:
+    The IOCCC no longer uses twitter.  Today the IOCCC uses Mastodon.
+    For more information and to see our IOCCC Mastodon posts, see:

-    https://fosstodon.org/@ioccc
+	https://fosstodon.org/@ioccc

-End of important 2023 update to this historic note.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+    End of important 2023 update to this historic note.
+```

 So how does a one line C source know so much?  Hint: it doesn't.

@@ -177,17 +177,17 @@ testing:</p>
 <pre><code>    ./cable1 Ballmer Mac PC</code></pre>
 <p>Humm .. maybe there is a hidden reason he is leaving the late Micro$oft? :-)
 Why late? Because:</p>
-<figure>
-<img src="dead-ms-tweet.jpg" alt="tweet about M$ being dead" />
-<figcaption aria-hidden="true">tweet about M$ being dead</figcaption>
-</figure>
-<p>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-An important 2023 update about twitter:</p>
-<p>The IOCCC no longer uses twitter. Today the IOCCC uses Mastodon.
-For more information and to see our IOCCC Mastodon posts, see:</p>
-<p>https://fosstodon.org/<span class="citation" data-cites="ioccc">@ioccc</span></p>
-<p>End of important 2023 update to this historic note.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</p>
+<p><img src="dead-ms-tweet.jpg"
+ alt="image of snarky tweet from 2013 Nov 15 by Landon Noll about Microsoft"
+ width=491 height=312></p>
+<pre><code>    An important 2023 update about twitter:
+
+    The IOCCC no longer uses twitter.  Today the IOCCC uses Mastodon.
+    For more information and to see our IOCCC Mastodon posts, see:
+
+        https://fosstodon.org/@ioccc
+
+    End of important 2023 update to this historic note.</code></pre>
 <p>So how does a one line C source know so much? Hint: it doesn’t.</p>
 <h2 id="authors-remarks">Author’s remarks:</h2>
 <h3 id="presidents-of-the-united-states-of-america">Presidents of the United States of America!</h3>
@@ -460,19 +460,31 @@ Police Quest, and a bunch of freeware Windows games), and diagnostic/benchmark
 software (Manifest, Microsoft MSD, InfoSpot, CheckIt) and all of them run well.

 Screenshots of some of these applications running (on Mac OS X) are provided for
-the impatient.
+the impatient:

-![AutoCAD](screenshot_autocad.png)
+<img src="screenshot_autocad.png"
+ alt="screenshot image of autocad of St. Paul's Cathedral"
+ width=748 height=400>

-![Flight Simulator 4](screenshot_flightsim4.png)
+<img src="screenshot_autocad.png"
+ alt="screenshot image from a Flight Simulator"
+ width=748 height=400>

-![Lotus 123](screenshot_lotus123.png)
+<img src="screenshot_lotus123.png"
+ alt="screenshot image Lotus 123 color test"
+ width=748 height=400>

-![QBASIC](screenshot_qbasic.png)
+<img src="screenshot_qbasic.png"
+ alt="screenshot image of the welcome message from MS-DOS QBasic"
+ width=859 height=540>

-![SimCity](screenshot_simcity.png)
+<img src="screenshot_simcity.png"
+ alt="screenshot image from the Sim City game"
+ width=748 height=400>

-![Windows 3 on macOS](screenshot_win3_on_macosx.png)
+<img src="screenshot_win3_on_macosx.png"
+ alt="screenshot image of Windows 3.00a under macOS"
+ width=748 height=400>


 ### Compiler warnings
@@ -471,31 +471,25 @@ the top of this file) can. The author has tested a number of OSes/GUIs (MS-DOS
 Police Quest, and a bunch of freeware Windows games), and diagnostic/benchmark
 software (Manifest, Microsoft MSD, InfoSpot, CheckIt) and all of them run well.</p>
 <p>Screenshots of some of these applications running (on Mac OS X) are provided for
-the impatient.</p>
-<figure>
-<img src="screenshot_autocad.png" alt="AutoCAD" />
-<figcaption aria-hidden="true">AutoCAD</figcaption>
-</figure>
-<figure>
-<img src="screenshot_flightsim4.png" alt="Flight Simulator 4" />
-<figcaption aria-hidden="true">Flight Simulator 4</figcaption>
-</figure>
-<figure>
-<img src="screenshot_lotus123.png" alt="Lotus 123" />
-<figcaption aria-hidden="true">Lotus 123</figcaption>
-</figure>
-<figure>
-<img src="screenshot_qbasic.png" alt="QBASIC" />
-<figcaption aria-hidden="true">QBASIC</figcaption>
-</figure>
-<figure>
-<img src="screenshot_simcity.png" alt="SimCity" />
-<figcaption aria-hidden="true">SimCity</figcaption>
-</figure>
-<figure>
-<img src="screenshot_win3_on_macosx.png" alt="Windows 3 on macOS" />
-<figcaption aria-hidden="true">Windows 3 on macOS</figcaption>
-</figure>
+the impatient:</p>
+<p><img src="screenshot_autocad.png"
+ alt="screenshot image of autocad of St. Paul's Cathedral"
+ width=748 height=400></p>
+<p><img src="screenshot_autocad.png"
+ alt="screenshot image from a Flight Simulator"
+ width=748 height=400></p>
+<p><img src="screenshot_lotus123.png"
+ alt="screenshot image Lotus 123 color test"
+ width=748 height=400></p>
+<p><img src="screenshot_qbasic.png"
+ alt="screenshot image of the welcome message from MS-DOS QBasic"
+ width=859 height=540></p>
+<p><img src="screenshot_simcity.png"
+ alt="screenshot image from the Sim City game"
+ width=748 height=400></p>
+<p><img src="screenshot_win3_on_macosx.png"
+ alt="screenshot image of Windows 3.00a under macOS"
+ width=748 height=400></p>
 <h3 id="compiler-warnings">Compiler warnings</h3>
 <p>A lot of compiler warnings are produced by clang. Missing type specifiers,
 control reaching the end of functions without returning values, incompatible
@@ -39,11 +39,17 @@ you leave the program running overnight to see what happens. If however you do
 not have all night :-) then the following JPEG files should show you what
 happens with some of the invocations above:

-![./hou BIG - Luna](luna.jpg)
+<img src="luna.jpg"
+ alt="artificial image showing a room lit by light from a window"
+ width=640 height=480>

-![./hou old_default.scene - Old default](old_default.jpg)
+<img src="old_default.jpg"
+ alt="artificial image showing IOCCC 2013 in a room with stars on the floor and double helix in the backgrond"
+ width=640 height=480>

-![./hou otherroom.scene - Other room](otherroom.jpg)
+<img src="otherroom.jpg"
+ alt="artificial image the background double helix"
+ width=320 height=240>

 This program does not terminate by itself: you must kill `hou` (but not Qiming
 Hou :-) ) in order to end the program.
@@ -271,9 +271,12 @@ cell content in variable <code>C</code>. To fill it with material <code>i</code>
 <code>C</code>. To fill it with volume <code>i</code>, well, return <code>i</code>. To leave it empty, return
 <code>C=0</code>.</p>
 <p>Before starting to build a scene, it’s better to have a draft sketch handy
-first. Something like <img src="draft.png" alt="Draft sketch" />. Sometimes it’s hard to
-imagine where something should go without the sketch. And you don’t have to
-stick to your sketch :)</p>
+first. Something like:</p>
+<p><img src="draft.png"
+ alt="image of the draft sketch of a room with a window"
+ width=513 height=487></p>
+<p>Sometimes it’s hard to imagine where something should go without the sketch.
+And you don’t have to stick to your sketch :)</p>
 <p>What motivated my default scene: it was the full moon’s day (a national holiday)
 in China and my parents were planning to renovate their apartment. I rendered
 the image to tell my mom how ridiculous her starry-sky wall paper would look
@@ -303,9 +306,11 @@ renderer would assemble the colors into an image.</p>
 <p>Remember the function <code>5</code>? Here it comes. The first two “random” numbers have
 special meaning and must specify a point on the image plane <code>[0,1)x[0,1)</code>.
 You’re supposed to transform the image plane to the 3D space, choose a point for
-the camera, and shoot a ray from the camera point to the image plane point, see
-<img src="camera.png" alt="Camera convention" />. The camera point goes to <code>(U,V,W)</code>, and the
-ray direction vector (image plane point - camera point) is <code>(X,Y,Z)</code>. For the
+the camera, and shoot a ray from the camera point to the image plane point, see:</p>
+<p><img src="camera.png"
+ alt="image of a sketch showing a light ray from an object (person) thru an image plane pixel to a camera viewpoint"
+ width=935 height=632></p>
+<p>.. and the ray direction vector (image plane point - camera point) is <code>(X,Y,Z)</code>. For the
 coordinate space, volume 0 is scaled up 64x here to <code>(0,0,0)-(4096,4096,4096)</code>.</p>
 <p>For a basic camera shader example, check <a href="../otherroom.scene">otherroom.scene</a>.</p>
 <p>If any ray goes out of volume 0, the renderer crashes. Make sure it doesn’t
@@ -395,7 +400,9 @@ the incoming direction and the surface normal. It’s called importance sampling
 because here the probability of each outgoing direction has to be proportional
 to the reflected light strength (i.e., the <code>BRDF</code>) on that direction. For a
 diffuse surface, sample the upper hemisphere with a probability proportional to
-the cosine of the outgoing angle, see <img src="cosine.png" alt="Cosine sampling" />.</p>
+the cosine of the outgoing angle, see <img src="cosine.png"
+ alt="image of a sketch of a ray a angle theta from the vertical normal with cosine theta below it"
+ width=935 height=632>.</p>
 <p>The incoming direction is in <code>(X,Y,Z)</code> and the hit point is <code>(U,V,W)</code>. The
 outgoing direction is returned in, where else, <code>(X,Y,Z)</code>.</p>
 <p>The surface normal is provided in variables <code>S</code> and <code>T</code>. Since the geometry is
@@ -191,9 +191,14 @@ cell content in variable `C`. To fill it with material `i`, return `64+i` in
 `C=0`.

 Before starting to build a scene, it's better to have a draft sketch handy
-first. Something like ![ Draft sketch ](draft.png). Sometimes it's hard to
-imagine where something should go without the sketch. And you don't have to
-stick to your sketch :)
+first. Something like:
+
+<img src="draft.png"
+ alt="image of the draft sketch of a room with a window"
+ width=513 height=487>
+
+Sometimes it's hard to imagine where something should go without the sketch.
+And you don't have to stick to your sketch :)

 What motivated my default scene: it was the full moon's day (a national holiday)
 in China and my parents were planning to renovate their apartment. I rendered
@@ -233,9 +238,13 @@ renderer would assemble the colors into an image.
 Remember the function `5`? Here it comes. The first two "random" numbers have
 special meaning and must specify a point on the image plane `[0,1)x[0,1)`.
 You're supposed to transform the image plane to the 3D space, choose a point for
-the camera, and shoot a ray from the camera point to the image plane point, see
-![ Camera convention ](camera.png). The camera point goes to `(U,V,W)`, and the
-ray direction vector (image plane point - camera point) is `(X,Y,Z)`. For the
+the camera, and shoot a ray from the camera point to the image plane point, see:
+
+<img src="camera.png"
+ alt="image of a sketch showing a light ray from an object (person) thru an image plane pixel to a camera viewpoint"
+ width=935 height=632>
+
+.. and the ray direction vector (image plane point - camera point) is `(X,Y,Z)`. For the
 coordinate space, volume 0 is scaled up 64x here to `(0,0,0)-(4096,4096,4096)`.

 For a basic camera shader example, check [otherroom.scene](../otherroom.scene).
@@ -349,7 +358,9 @@ the incoming direction and the surface normal. It's called importance sampling,
 because here the probability of each outgoing direction has to be proportional
 to the reflected light strength (i.e., the `BRDF`) on that direction. For a
 diffuse surface, sample the upper hemisphere with a probability proportional to
-the cosine of the outgoing angle, see ![ Cosine sampling ](cosine.png).
+the cosine of the outgoing angle, see <img src="cosine.png"
+ alt="image of a sketch of a ray a angle theta from the vertical normal with cosine theta below it"
+ width=935 height=632>.

 The incoming direction is in `(X,Y,Z)` and the hit point is `(U,V,W)`. The
 outgoing direction is returned in, where else, `(X,Y,Z)`.
@@ -170,18 +170,15 @@ every so often reopen the file, to see how it changes. The author suggests that
 you leave the program running overnight to see what happens. If however you do
 not have all night :-) then the following JPEG files should show you what
 happens with some of the invocations above:</p>
-<figure>
-<img src="luna.jpg" alt="./hou BIG - Luna" />
-<figcaption aria-hidden="true">./hou BIG - Luna</figcaption>
-</figure>
-<figure>
-<img src="old_default.jpg" alt="./hou old_default.scene - Old default" />
-<figcaption aria-hidden="true">./hou old_default.scene - Old default</figcaption>
-</figure>
-<figure>
-<img src="otherroom.jpg" alt="./hou otherroom.scene - Other room" />
-<figcaption aria-hidden="true">./hou otherroom.scene - Other room</figcaption>
-</figure>
+<p><img src="luna.jpg"
+ alt="artificial image showing a room lit by light from a window"
+ width=640 height=480></p>
+<p><img src="old_default.jpg"
+ alt="artificial image showing IOCCC 2013 in a room with stars on the floor and double helix in the backgrond"
+ width=640 height=480></p>
+<p><img src="otherroom.jpg"
+ alt="artificial image the background double helix"
+ width=320 height=240></p>
 <p>This program does not terminate by itself: you must kill <code>hou</code> (but not Qiming
 Hou :-) ) in order to end the program.</p>
 <h2 id="judges-remarks">Judges’ remarks:</h2>
@@ -144,10 +144,9 @@ below is after it’s been iced. The image <a href="ioccc-cake.jpg">ioccc-cake.j
 feeble attempt at drawing <code>IOCCC</code> into the cake before icing, a different time.
 The picture below was taken for my birthday (14 February) in 2022 as it’s the
 best one I have:</p>
-<figure>
-<img src="cake.jpg" alt="picture of the Double-layered chocolate fudge cake" />
-<figcaption aria-hidden="true">picture of the Double-layered chocolate fudge cake</figcaption>
-</figure>
+<p><img src="cake.jpg"
+ alt="photograth of a delicious double-layered chocolate fudge cake"
+ width=756 height=602></p>
 <p>There are two sets of ingredients and instructions; the cake and the icing. In
 addition there are some <strong>VERY IMPORTANT NOTES</strong> to pay attention to; some will
 be repeated because they’re <strong>VITALLY IMPORTANT</strong> for the quality of the cake.
@@ -11,7 +11,9 @@ feeble attempt at drawing `IOCCC` into the cake before icing, a different time.
 The picture below was taken for my birthday (14 February) in 2022 as it's the
 best one I have:

-![picture of the Double-layered chocolate fudge cake](cake.jpg)
+<img src="cake.jpg"
+ alt="photograth of a delicious double-layered chocolate fudge cake"
+ width=756 height=602>

 There are two sets of ingredients and instructions; the cake and the icing. In
 addition there are some **VERY IMPORTANT NOTES** to pay attention to; some will