deploy: b68cbee

pictures/path.html

@@ -88,7 +88,7 @@ <h2 id="concept" class="section">Concept</h2>
               <img src="basic-path.png" alt="A path with straight lines and bezier curves" title="A path with straight lines and bezier curves">
             </div>
             <p>You probably noticed this is a <code>ClosedPath</code>, which suggests there is also an <code>OpenPath</code>. This is correct. The difference is how the path ends. If a <code>ClosedPath</code> doesn&#39;t end at the point it started (which is the origin), it will have a straight line inserted joining the end to the start. An <code>OpenPath</code> will not.</p>
-            <p>Here&#39;s an example showing the difference. We create a curve, drawn as an open and a closed path. Notice how the open path is just a curve, while the closed path has an extra line added joining the start and end points.</p>
+            <p>Here&#39;s an example showing the difference. We create a curve, drawn as an open and as a closed path. Notice how the open path is just a curve, while the closed path has an extra line added joining the start and end points.</p>
             <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">open</span><span> =
   </span><span class="type-name">OpenPath</span><span>.</span><span class="identifier">empty</span><span>.</span><span class="identifier">curveTo</span><span>(</span><span class="number-literal">90</span><span>, </span><span class="number-literal">0</span><span>, </span><span class="number-literal">100</span><span>, </span><span class="number-literal">10</span><span>, </span><span class="number-literal">50</span><span>, </span><span class="number-literal">50</span><span>).</span><span class="identifier">path</span><span>.</span><span class="identifier">strokeColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">red</span><span>)
 
@@ -97,7 +97,7 @@ <h2 id="concept" class="section">Concept</h2>
 
 </span><span class="keyword">val</span><span> </span><span class="identifier">curves</span><span> = </span><span class="identifier">open</span><span>.</span><span class="identifier">beside</span><span>(</span><span class="identifier">closed</span><span>)</span></code></pre>
             <div class="default-image-block">
-              <img src="open-closed-paths.png" alt="A curve drawn as an open and a closed path" title="A curve drawn as an open and a closed path">
+              <img src="open-closed-paths.png" alt="A curve drawn as an open and as a closed path" title="A curve drawn as an open and as a closed path">
             </div>
 
             <h2 id="implementation" class="section">Implementation</h2>

pictures/picture-image.html

@@ -83,7 +83,7 @@ <h2 id="using-image" class="section">Using Image</h2>
             <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">composition</span><span> = </span><span class="identifier">redSquare</span><span>.</span><span class="identifier">beside</span><span>(</span><span class="identifier">blueSquare</span><span>)</span></code></pre>
             <p>When draw this has the output shown below. </p>
             <div class="default-image-block">
-              <img src="red-blue.png" alt="A red square beside a blue square" title="A red square beside a blue square">
+              <img src="composition.png" alt="A red square beside a blue square" title="A red square beside a blue square">
             </div>
             <p>The interpreter pattern means that we separate describing the Image from rendering it. Writing <code>Image.square(100)</code> doesn&#39;t draw anything. To draw an image we need to call the <code>draw()</code> method. This separation is important for composition; if we were to immediately draw we would lose composition. </p>
 

pictures/shape.html

@@ -76,7 +76,7 @@ <h2 id="concept" class="section">Concept</h2>
     .</span><span class="identifier">strokeWidth</span><span>(</span><span class="number-literal">5.0</span><span>)</span></code></pre>
             <p>This program gives the output below.</p>
             <div class="default-image-block">
-              <img src="basic-shapes.png" alt="A circle with square and triangle" title="A circle with square and triangle">
+              <img src="basic-shapes.png" alt="A circle on a square on a triangle" title="A circle on a square on a triangle">
             </div>
             <p>Here is a short description of all the methods provided by <code>Shape</code>.</p>
             <ul>

pictures/size.html

@@ -88,10 +88,10 @@ <h2 id="bounding-box" class="section">Bounding Box</h2>
       .</span><span class="identifier">strokeColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">hotpink</span><span>)
       .</span><span class="identifier">strokeWidth</span><span>(</span><span class="number-literal">3.0</span><span>)
   )
-</span><span class="comment">// boundingBox: Picture[FromGifBase64 &amp; Basic &amp; Bitmap &amp; FromBufferedImage &amp; FromPngBase64 &amp; FromJpgBase64, Unit] = doodle.algebra.Picture$$anon$1@53f1d73
+</span><span class="comment">// boundingBox: Picture[FromGifBase64 &amp; Basic &amp; Bitmap &amp; FromBufferedImage &amp; FromPngBase64 &amp; FromJpgBase64, Unit] = doodle.algebra.Picture$$anon$1@45c344f5
 </span><span>  
 </span><span class="keyword">val</span><span> </span><span class="identifier">picture</span><span> = </span><span class="identifier">circle</span><span>.</span><span class="identifier">on</span><span>(</span><span class="identifier">boundingBox</span><span>)
-</span><span class="comment">// picture: Picture[Bitmap &amp; FromBufferedImage &amp; FromPngBase64 &amp; FromGifBase64 &amp; Basic &amp; FromJpgBase64, Unit] = doodle.syntax.LayoutSyntax$$anon$1@32dd4a9d</span></code></pre>
+</span><span class="comment">// picture: Picture[Bitmap &amp; FromBufferedImage &amp; FromPngBase64 &amp; FromGifBase64 &amp; Basic &amp; FromJpgBase64, Unit] = doodle.syntax.LayoutSyntax$$anon$1@7e548fa0</span></code></pre>
             <p>This produces the picture shown below.</p>
             <div class="default-image-block">
               <img src="bounding-box.png" alt="A circle with a bounding box" title="A circle with a bounding box">

pictures/style.html

@@ -84,7 +84,7 @@ <h2 id="concept" class="section">Concept</h2>
         .</span><span class="identifier">fillColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">lavender</span><span>)
     )</span></code></pre>
             <div class="default-image-block">
-              <img src="basic-style.png" alt="A circle with no style and a circle with a purple stroke and lavender fill" title="A circle with no style and a circle with a purple stroke and lavender fill">
+              <img src="basic-style.png" alt="A circle with no style, and a circle with a purple stroke and lavender fill" title="A circle with no style, and a circle with a purple stroke and lavender fill">
             </div>
             <p>The available settings for the stroke are:</p>
             <ul>
@@ -145,7 +145,7 @@ <h2 id="concept" class="section">Concept</h2>
         .</span><span class="identifier">strokeWidth</span><span>(</span><span class="number-literal">5.0</span><span>)
     )</span></code></pre>
             <div class="default-image-block">
-              <img src="fill-style.png" alt="A square with a linear gradient fill and a circle with a radial gradient fill" title="A square with a linear gradient fill and a circle with a radial gradient fill">
+              <img src="fill-style.png" alt="A square with a linear gradient fill, and a circle with a radial gradient fill" title="A square with a linear gradient fill, and a circle with a radial gradient fill">
             </div>
 
             <h2 id="implementation" class="section">Implementation</h2>