deploy: 6c506f2

algebra/using.html

@@ -94,8 +94,8 @@ <h2 id="using-backend-specific-features" class="section">Using Backend Specific
             <p>The first step is, as before, to import the Doodle core, Java2D backend, syntax extensions, and the Cats Effect runtime.</p>
             <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
 </span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
+</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
             <p>Now we can go about creating our picture, using the <code>read</code> method to load a bitmap image.</p>
             <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">redCircle</span><span> = </span><span class="type-name">Picture</span><span>.</span><span class="identifier">circle</span><span>(</span><span class="number-literal">100</span><span>).</span><span class="identifier">strokeColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">red</span><span>)
 </span><span class="keyword">val</span><span> </span><span class="identifier">twoRedCircles</span><span> = </span><span class="identifier">redCircle</span><span>.</span><span class="identifier">beside</span><span>(</span><span class="identifier">redCircle</span><span>)
@@ -107,10 +107,7 @@ <h2 id="using-backend-specific-features" class="section">Using Backend Specific
 
             <h2 id="creating-cross-backend-pictures" class="section">Creating Cross-Backend Pictures</h2>
             <p>Targeting multiple backends requires a little bit more work than working with a single backend. We can&#39;t use the usual constructor methods on a <code>Picture</code> object, as those methods target a specific backend and we want to work across multiple backends. However, every constructor method has a syntax equivalent that we can call. So to create a circle we can write</p>
-            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*
-
-</span><span class="identifier">circle</span><span>(</span><span class="number-literal">100</span><span>)</span></code></pre>
+            <pre><code class="nohighlight"><span class="identifier">circle</span><span>(</span><span class="number-literal">100</span><span>)</span></code></pre>
             <p>Once we know how to do this, everything proceeds as before. Here&#39;s a complete example.</p>
             <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">redCircle</span><span> = </span><span class="identifier">circle</span><span>(</span><span class="number-literal">100</span><span>).</span><span class="identifier">strokeColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">red</span><span>)
 </span><span class="keyword">val</span><span> </span><span class="identifier">rad</span><span> = </span><span class="identifier">text</span><span>(</span><span class="string-literal">&quot;Doodle is rad&quot;</span><span>)
@@ -122,8 +119,7 @@ <h2 id="creating-cross-backend-pictures" class="section">Creating Cross-Backend
             <h2 id="using-raw-algebras" class="section">Using Raw Algebras</h2>
             <p>We never need to call methods on algebras directly. Doodle provides the <a class="api" href="https://javadoc.io/doc/org.creativescala/doodle-docs_3/latest/doodle/algebra/Picture.html">Picture</a> abstraction and lots of <a class="api" href="https://javadoc.io/doc/org.creativescala/doodle-docs_3/latest/doodle/syntax.html">syntax</a> to avoid this. However, if some reason you did want to use algebras directly here is how to do it. Understanding this does help a bit in understanding the utilities that Doodle provides to avoid using algebras directly.</p>
             <p>To use algebras directly, write a method with a parameter that is the algebras that you need. For example, if we were to write a simple program using <code>Layout</code>, <code>Style</code>, and <code>Shape</code> we might write the following.</p>
-            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">algebra</span><span>.*
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">algebra</span><span>.*
 
 </span><span class="comment">// Two red circles beside each other
 </span><span class="keyword">def</span><span> </span><span class="declaration-name">twoRedCircles</span><span>[</span><span class="type-name">Alg</span><span> &lt;: </span><span class="type-name">Layout</span><span> &amp; </span><span class="type-name">Style</span><span> &amp; </span><span class="type-name">Shape</span><span>](</span><span class="identifier">algebra</span><span>: </span><span class="type-name">Alg</span><span>): </span><span class="identifier">algebra</span><span>.</span><span class="type-name">Drawing</span><span>[</span><span class="type-name">Unit</span><span>] = {

interact/animation.html

@@ -78,8 +78,8 @@ <h2 id="using-animations" class="section">Using Animations</h2>
 </span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">interact</span><span>.*
 </span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">interact</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*</span></code></pre>
             <p>To do anything useful we&#39;ll also need a backend. Here are the imports for the Java2D backend:</p>
-            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
 
             <h2 id="example" class="section">Example</h2>
             <p>Here&#39;s an example animating a ball moving across the screen. This uses an <code>Interpolation</code>, via the <code>upTo</code> method, because the position of the ball is a simple function of a value in the range -100.0 to 100.0.</p>

pictures/picture-image.html

@@ -69,8 +69,8 @@ <h2 id="choosing-between-picture-and-image" class="section">Choosing Between Pic
             <h2 id="using-image" class="section">Using Image</h2>
             <p>To use <code>Image</code> we need the following imports:</p>
             <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">image</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">image</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*</span></code></pre>
+</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">image</span><span>.*</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">image</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*</span></code></pre>
             <p>We&#39;ll also need to import a backend. Most people will be working on the JVM, and will use the Java2D backend.</p>
             <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*
 </span><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
@@ -91,8 +91,8 @@ <h2 id="using-picture" class="section">Using Picture</h2>
             <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
 </span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*</span></code></pre>
             <p>We&#39;ll also need to import a backend. Most people will be working on the JVM, and will use the Java2D backend.</p>
-            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*</span></code></pre>
+            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">cats</span><span>.</span><span class="identifier">effect</span><span>.</span><span class="identifier">unsafe</span><span>.</span><span class="identifier">implicits</span><span>.</span><span class="identifier">global</span></code></pre>
             <p><code>Picture</code> works the same way as <code>Image</code>, using composition and the interpreter pattern. In fact the above example can be rewritten using picture by simply changing <code>Image</code> to <code>Picture</code>.</p>
             <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">redSquare</span><span> = </span><span class="type-name">Picture</span><span>.</span><span class="identifier">square</span><span>(</span><span class="number-literal">100</span><span>).</span><span class="identifier">fillColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">red</span><span>)
 </span><span class="keyword">val</span><span> </span><span class="identifier">blueSquare</span><span> = </span><span class="type-name">Picture</span><span>.</span><span class="identifier">square</span><span>(</span><span class="number-literal">100</span><span>).</span><span class="identifier">fillColor</span><span>(</span><span class="type-name">Color</span><span>.</span><span class="identifier">blue</span><span>)

pictures/size.html

@@ -80,19 +80,17 @@ <h2 id="bounding-box" class="section">Bounding Box</h2>
             In other words, the <code>BoundingBox</code> will be calculated when the <code>Picture</code> is rendered and is not immediately available.
             This is necessary because the size may depend on backend-specific calculations, such as the space occupied by text.</p>
             <p>To make use of the <code>BoundingBox</code> in the creation of a picture we can use the <code>flatMap</code> method on <code>Picture</code>.</p>
-            <pre><code class="nohighlight"><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">core</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">java2d</span><span>.*
-</span><span class="keyword">import</span><span> </span><span class="identifier">doodle</span><span>.</span><span class="identifier">syntax</span><span>.</span><span class="identifier">all</span><span>.*
-
-</span><span class="keyword">val</span><span> </span><span class="identifier">boundingBox</span><span> =
+            <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">boundingBox</span><span> =
   </span><span class="identifier">circleBoundingBox</span><span>.</span><span class="identifier">flatMap</span><span>(</span><span class="identifier">bb</span><span> =&gt; 
     </span><span class="type-name">Picture</span><span>
       .</span><span class="identifier">roundedRectangle</span><span>(</span><span class="identifier">bb</span><span>.</span><span class="identifier">width</span><span>, </span><span class="identifier">bb</span><span>.</span><span class="identifier">height</span><span>, </span><span class="number-literal">3.0</span><span>)
       .</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="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></code></pre>
+</span><span class="comment">// boundingBox: Picture[FromGifBase64 &amp; Basic &amp; Bitmap &amp; FromBufferedImage &amp; FromPngBase64 &amp; FromJpgBase64, Unit] = doodle.algebra.Picture$$anon$1@3d898a50
+</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@7b95e0f5</span></code></pre>
             <p>This produces the picture shown below.</p>
             <div class="default-image-block">
               <img src="bounding-box.png">