bump

chapters/00_7_intro.html

@@ -201,13 +201,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="assets/intro/intro_ex01.png" />
+<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="../images/intro/intro_ex01.png" />
 <figcaption>&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="../images/intro/intro_01.png" />
+<figure id="intro_figure1"><img alt="Figure I.1" src="intro/intro_01.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -241,7 +241,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="../images/intro/intro_ex02.png" />
+<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>
 </figure>
 
@@ -408,7 +408,7 @@ <h5>Exercise I.2</h5>
 	</li>
 </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="../images/intro/intro_ex03.png" />
+<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>
 </figure>
 
@@ -458,11 +458,11 @@ <h1>I.4 A Normal Distribution of Random Numbers</h1>
 
 <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="../images/intro/intro_02.png" />
+<figure class="two-col" id="intro_figure2"><img alt="Figure I.2" src="intro/intro_02.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
-<figure class="two-col" id="intro_figure3"><img alt="Figure I.3" src="../images/intro/intro_03.png" />
+<figure class="two-col" id="intro_figure3"><img alt="Figure I.3" src="intro/intro_03.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -574,7 +574,7 @@ <h1>Calculating Mean and Standard Deviation</h1>
 
 <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="../images/intro/intro_ex04.png" />
+<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>
 </figure>
 
@@ -641,7 +641,7 @@ <h1>I.5 A Custom Distribution of Random Numbers</h1>
 
 <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="../images/intro/intro_04.png" />
+<figure id="intro_figure4"><img alt="Figure I.4" src="intro/intro_04.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -726,11 +726,11 @@ <h1>I.6 Perlin Noise (A Smoother Approach)</h1>
 
 <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="../images/intro/intro_05.png" />
+<figure class="two-col"><img alt="Figure I.5: Noise" src="intro/intro_05.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
-<figure class="two-col"><img alt="Figure I.6: Random" src="../images/intro/intro_06.png" />
+<figure class="two-col"><img alt="Figure I.6: Random" src="intro/intro_06.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -849,7 +849,7 @@ <h3 id="noise-detail">Noise Detail</h3>
 
 <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="../images/intro/intro_07.png" />
+<figure id="intro_figure7"><img alt="Figure I.7" src="intro/intro_07.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -862,7 +862,7 @@ <h2>Mapping Noise</h2>
 
 <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="../images/intro/intro_08.png" />
+<figure id="intro_figure8"><img alt="Figure I.8" src="intro/intro_08.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -882,7 +882,7 @@ <h2>Mapping Noise</h2>
 
 <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="../images/intro/intro_ex05.png" />
+<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>
 </figure>
 
@@ -916,7 +916,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="../images/intro/intro_09.png" />
+<figure id="intro_figure9"><img alt="Figure I.9" src="intro/intro_09.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -936,19 +936,19 @@ <h2>Two-Dimensional Noise</h2>
 
 <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="../images/intro/intro_10.png" />
+<figure class="two-col-borderless" id="intro_figure10"><img alt="Figure I.10: 1D Noise" src="intro/intro_10.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
-<figure class="two-col-borderless" id="intro_figure11"><img alt="Figure I.11: 2D Noise" src="../images/intro/intro_11.png" />
+<figure class="two-col-borderless" id="intro_figure11"><img alt="Figure I.11: 2D Noise" src="intro/intro_11.png" />
 <figcaption>&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="../images/intro/intro_ex06.png" />
+<figure><img alt="intro ex06" src="intro/intro_ex06.png" />
 <figcaption>&nbsp;</figcaption>
 </figure>
 
@@ -1016,18 +1016,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="../images/intro/intro_exc10.png" />
+<figure><img alt="intro exc10" src="intro/intro_exc10.png" />
 <figcaption>&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="../images/intro/intro_12.png" />
+<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>
 </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="../images/intro/intro_13.png" />
+<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>
 </figure>
 </section>

magicbook.json

@@ -17,19 +17,8 @@
             ]
          },
          "images" : {
-            "source" : "/noc_pdf/imgs/"
-         }
-      },
-      {
-         "format":"html",
-         "layout":"layouts/html.html",
-         "stylesheets":{
-            "files":[
-               "noc_html/stylesheets/code-html.css",
-               "noc_html/stylesheets/fonts.css",
-               "noc_html/stylesheets/html.css"
-            ]
+            "source" : "noc_pdf/imgs/"
          }
       }
    ]
-}
+}