move all alt tags to figure captions #63

chapters/00_2_dedication.html

@@ -4,7 +4,7 @@ <h1>Dedication</h1>
 <p>For my grandmother, Bella Manel Greenfield (October 13, 1915 - April 3, 2010)</p>
 
 <figure class="bella"><img alt="bella" src="bella.jpg" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>bella&nbsp;</figcaption>
 </figure>
 
 <p>Bella Manel was born in New York City. A pioneering woman in mathematics, she earned her PhD in 1939 from New York University under the supervision of Richard Courant. She worked for Ramo-Wooldridge (now TRW) and at the Rand Corporation with Richard Bellman. Later, she taught mathematics at the College of Notre Dame (now Notre Dame de Namur University) in Belmont, California, and at UCLA. The Bella Manel Prize for outstanding graduate work by a woman or minority was established at NYU&rsquo;s Courant Institute in 1995.</p>

chapters/00_7_intro.html

@@ -202,13 +202,13 @@ <h5>Example I.1: Traditional random walk</h5>
 <p>Since we only draw the background once in <span class="function">setup()</span>, rather than clearing it continually each time through <span class="function">draw()</span>, we see the trail of the random walk in our Processing window.</p>
 
 <figure class="screenshot" data-pde="processingjs/intro/_I_1_RandomWalkTraditional/_I_1_RandomWalkTraditional.pde processingjs/intro/_I_1_RandomWalkTraditional/Walker.pde"><img alt="intro ex01" src="intro/intro_ex01.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex01&nbsp;</figcaption>
 </figure>
 
 <p>There are a couple improvements we could make to the random walker. For one, this <span class="klass">Walker</span><code>&rsquo;</code>s step choices are limited to four options&mdash;up, down, left, and right. But any given pixel in the window has eight possible neighbors, and a ninth possibility is to stay in the same place.</p>
 
 <figure id="intro_figure1"><img alt="Figure I.1" src="intro/intro_01.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.1&nbsp;</figcaption>
 </figure>
 
 <p>To implement a <span class="klass">Walker</span> object that can step to any neighboring pixel (or stay put), we could pick a number between 0 and 8 (nine possible choices). However, a more efficient way to write the code would be to simply pick from three possible steps along the x-axis (-1, 0, or 1) and three possible steps along the y-axis.</p>
@@ -242,7 +242,7 @@ <h5>Example I.1: Traditional random walk</h5>
 <p>Conveniently, this is how the <span class="function">random()</span> function works. Processing&rsquo;s random number generator (which operates behind the scenes) produces what is known as a &ldquo;uniform&rdquo; distribution of numbers. We can test this distribution with a Processing sketch that counts each time a random number is picked and graphs it as the height of a rectangle.</p>
 
 <figure class="screenshot" data-pde="processingjs/intro/_I_2_RandomDistribution/_I_2_RandomDistribution.pde"><img alt="intro ex02" src="intro/intro_ex02.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex02&nbsp;</figcaption>
 </figure>
 
 <div data-type="example">
@@ -409,7 +409,7 @@ <h5>Exercise I.2</h5>
 </ul>
 
 <figure class="screenshot" data-pde="processingjs/intro/_I_3_RandomWalkTendsToRight/_I_3_RandomWalkTendsToRight.pde processingjs/intro/_I_3_RandomWalkTendsToRight/Walker.pde"><img alt="intro ex03" src="intro/intro_ex03.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex03&nbsp;</figcaption>
 </figure>
 
 <div data-type="example">
@@ -459,11 +459,11 @@ <h2>I.4 A Normal Distribution of Random Numbers</h2>
 <p>When you graph the distribution, you get something that looks like the following, informally known as a bell curve:</p>
 
 <figure class="two-col" id="intro_figure2"><img alt="Figure I.2" src="intro/intro_02.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.2&nbsp;</figcaption>
 </figure>
 
 <figure class="two-col" id="intro_figure3"><img alt="Figure I.3" src="intro/intro_03.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.3&nbsp;</figcaption>
 </figure>
 
 <a data-primary="mu (μ)" data-type="indexterm"></a> <a data-primary="sigma (σ)" data-type="indexterm"></a> <a data-primary="probability" data-secondary="standard deviation" data-type="indexterm"></a> <a data-primary="standard deviation" data-type="indexterm"></a>
@@ -575,7 +575,7 @@ <h2>Calculating Mean and Standard Deviation</h2>
 <p>The <span class="function">nextGaussian()</span> function returns a normal distribution of random numbers with the following parameters: <em>a mean of zero</em> and <em>a standard deviation of one</em>. Let&rsquo;s say we want a mean of 320 (the center horizontal pixel in a window of width 640) and a standard deviation of 60 pixels. We can adjust the value to our parameters by multiplying it by the standard deviation and adding the mean.</p>
 
 <figure class="screenshot" data-pde="processingjs/intro/_I_4_Gaussian/_I_4_Gaussian.pde"><img alt="intro ex04" src="intro/intro_ex04.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex04&nbsp;</figcaption>
 </figure>
 
 <div data-type="example">
@@ -642,7 +642,7 @@ <h2>I.5 A Custom Distribution of Random Numbers</h2>
 <p>However, this reduces the probabilities to a fixed number of options. What if we wanted to make a more general rule&mdash;the higher a number, the more likely it is to be picked? 3.145 would be more likely to be picked than 3.144, even if that likelihood is just a tiny bit greater. In other words, if <span class="var">x</span> is the random number, we could map the likelihood on the y-axis with <span class="var">y</span> = <span class="var">x</span>.</p>
 
 <figure id="intro_figure4"><img alt="Figure I.4" src="intro/intro_04.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.4&nbsp;</figcaption>
 </figure>
 
 <p>If we can figure out how to generate a distribution of random numbers according to the above graph, then we will be able to apply the same methodology to any curve for which we have a formula.</p>
@@ -725,11 +725,11 @@ <h2>I.6 Perlin Noise (A Smoother Approach)</h2>
 <p>Perlin noise has a more organic appearance because it produces a naturally ordered (&ldquo;smooth&rdquo;) sequence of pseudo-random numbers. The graph on the left below shows Perlin noise over time, with the x-axis representing time; note the smoothness of the curve. The graph on the right shows pure random numbers over time. (The code for generating these graphs is available in the accompanying book downloads.)</p>
 
 <figure class="two-col"><img alt="Figure I.5: Noise" src="intro/intro_05.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.5: Noise&nbsp;</figcaption>
 </figure>
 
 <figure class="two-col"><img alt="Figure I.6: Random" src="intro/intro_06.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.6: Random&nbsp;</figcaption>
 </figure>
 
 <a data-primary="noise() function (Processing)" data-type="indexterm"></a> <a data-primary="Perlin noise" data-secondary="noise() function (Processing)" data-type="indexterm"></a> <a data-primary="Processing" data-secondary="noise() function" data-type="indexterm"></a>
@@ -848,7 +848,7 @@ <h2 id="noise-detail">Noise Detail</h2>
 <p>How quickly we increment <span class="var">t</span> also affects the smoothness of the noise. If we make large jumps in time, then we are skipping ahead and the values will be more random.</p>
 
 <figure id="intro_figure7"><img alt="Figure I.7" src="intro/intro_07.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.7&nbsp;</figcaption>
 </figure>
 
 <p>Try running the code several times, incrementing <span class="var">t</span> by 0.01, 0.02, 0.05, 0.1, 0.0001, and you will see different results.</p>
@@ -861,7 +861,7 @@ <h3>Mapping Noise</h3>
 <p>Now we&rsquo;re ready to answer the question of what to do with the noise value. Once we have the value with a range between 0 and 1, it&rsquo;s up to us to map that range to what we want. The easiest way to do this is with Processing&rsquo;s <span class="function">map()</span> function. The <span class="function">map()</span> function takes five arguments. First up is the value we want to map, in this case <span class="var">n</span>. Then we have to give it the value&rsquo;s current range (minimum and maximum), followed by our desired range.</p>
 
 <figure id="intro_figure8"><img alt="Figure I.8" src="intro/intro_08.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.8&nbsp;</figcaption>
 </figure>
 
 <p>In this case, we know that noise has a range between 0 and 1, but we&rsquo;d like to draw our circle with a range between 0 and the window&rsquo;s width.</p>
@@ -881,7 +881,7 @@ <h3>Mapping Noise</h3>
 <p>We can apply the exact same logic to our random walker, and assign both its x- and y-values according to Perlin noise.</p>
 
 <figure class="screenshot" data-pde="processingjs/intro/_I_5_NoiseWalk/_I_5_NoiseWalk.pde processingjs/intro/_I_5_NoiseWalk/Walker.pde"><img alt="intro ex05" src="intro/intro_ex05.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex05&nbsp;</figcaption>
 </figure>
 
 <div data-type="example">
@@ -915,7 +915,7 @@ <h5>Example I.5: Perlin noise walker</h5>
 <p>Notice how the above example requires an additional pair of variables: <span class="var">tx</span> and <span class="var">ty</span>. This is because we need to keep track of two time variables, one for the x-location of the <span class="klass">Walker</span> object and one for the y-location. But there is something a bit odd about these variables. Why does <span class="var">tx</span> start at 0 and <span class="var">ty</span> at 10,000? While these numbers are arbitrary choices, we have very specifically initialized our two time variables with different values. This is because the noise function is deterministic: it gives you the same result for a specific time <span class="var">t</span> each and every time. If we asked for the noise value at the same time <span class="var">t</span> for both <span class="var">x</span> and <span class="var">y</span>, then <span class="var">x</span> and <span class="var">y</span> would always be equal, meaning that the <span class="klass">Walker</span> object would only move along a diagonal. Instead, we simply use two different parts of the noise space, starting at 0 for <span class="var">x</span> and 10,000 for <span class="var">y</span> so that <span class="var">x</span> and <span class="var">y</span> can appear to act independently of each other.</p>
 
 <figure id="intro_figure9"><img alt="Figure I.9" src="intro/intro_09.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.9&nbsp;</figcaption>
 </figure>
 
 <p>In truth, there is no actual concept of time at play here. It&rsquo;s a useful metaphor to help us understand how the noise function works, but really what we have is space, rather than time. The graph above depicts a linear sequence of noise values in a one-dimensional space, and we can ask for a value at a specific x-location whenever we want. In examples, you will often see a variable named <span class="var">xoff</span> to indicate the x-offset along the noise graph, rather than <span class="var">t</span> for time (as noted in the diagram).</p>
@@ -935,19 +935,19 @@ <h3>Two-Dimensional Noise</h3>
 <p>This idea of noise values living in a one-dimensional space is important because it leads us right into a discussion of two-dimensional space. Let&rsquo;s think about this for a moment. With one-dimensional noise, we have a sequence of values in which any given value is similar to its neighbor. Because the value is in one dimension, it only has two neighbors: a value that comes before it (to the left on the graph) and one that comes after it (to the right).</p>
 
 <figure class="two-col-borderless" id="intro_figure10"><img alt="Figure I.10: 1D Noise" src="intro/intro_10.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.10: 1D Noise&nbsp;</figcaption>
 </figure>
 
 <figure class="two-col-borderless" id="intro_figure11"><img alt="Figure I.11: 2D Noise" src="intro/intro_11.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.11: 2D Noise&nbsp;</figcaption>
 </figure>
 
 <p>Two-dimensional noise works exactly the same way conceptually. The difference of course is that we aren&rsquo;t looking at values along a linear path, but values that are sitting on a grid. Think of a piece of graph paper with numbers written into each cell. A given value will be similar to all of its neighbors: above, below, to the right, to the left, and along any diagonal.</p>
 
 <p>If you were to visualize this graph paper with each value mapped to the brightness of a color, you would get something that looks like clouds. White sits next to light gray, which sits next to gray, which sits next to dark gray, which sits next to black, which sits next to dark gray, etc.</p>
 
 <figure><img alt="intro ex06" src="intro/intro_ex06.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro ex06&nbsp;</figcaption>
 </figure>
 
 <p>This is why noise was originally invented. You tweak the parameters a bit or play with color to make the resulting image look more like marble or wood or any other organic texture.</p>
@@ -1015,18 +1015,18 @@ <h5>Exercise I.10</h5>
 <p>Use the noise values as the elevations of a landscape. See the screenshot below as a reference.</p>
 
 <figure><img alt="intro exc10" src="intro/intro_exc10.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>intro exc10&nbsp;</figcaption>
 </figure>
 </div>
 
 <p>We&rsquo;ve examined several traditional uses of Perlin noise in this section. With one-dimensional noise, we used smooth values to assign the location of an object to give the appearance of wandering. With two-dimensional noise, we created a cloudy pattern with smoothed values on a plane of pixels. It&rsquo;s important to remember, however, that Perlin noise values are just that&mdash;values. They aren&rsquo;t inherently tied to pixel locations or color. Any example in this book that has a variable could be controlled via Perlin noise. When we model a wind force, its strength could be controlled by Perlin noise. Same goes for the angles between the branches in a fractal tree pattern, or the speed and direction of objects moving along a grid in a flow field simulation.</p>
 
 <figure class="two-col" data-pde="processingjs/intro/TreeStochasticNoise/TreeStochasticNoise.pde" id="intro_figure12"><img alt="Figure I.12: Tree with Perlin noise" src="intro/intro_12.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.12: Tree with Perlin noise&nbsp;</figcaption>
 </figure>
 
 <figure class="two-col" data-pde="processingjs/intro/_6_04_FlowField/_6_04_FlowField.pde processingjs/intro/_6_04_FlowField/FlowField.pde processingjs/intro/_6_04_FlowField/Vehicle.pde" id="intro_figure13"><img alt="Figure I.13: Flow field with Perlin noise" src="intro/intro_13.png" />
-<figcaption>&nbsp;</figcaption>
+<figcaption>Figure I.13: Flow field with Perlin noise&nbsp;</figcaption>
 </figure>
 </section>
 </section>