mirror/ioccc
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix HTML problems related to pandoc and markdown image notation

Browse Source 
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.
This commit is contained in:
Landon Curt Noll committed 2024-04-20 21:42:50 -07:00
1 parent 651e21719c
commit 9b55039fd4
20 files changed
+283 -171
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

2013/birken/index.html
+70 -32
View File
@@ -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