Skip to content

Commit

Permalink
deploy: 625b666
Browse files Browse the repository at this point in the history
  • Loading branch information
@noelwelsh
noelwelsh committed Apr 14, 2024
1 parent 8367770 commit 54250ab
Show file tree
Hide file tree
Showing 7 changed files with 16 additions and 16 deletions.
2 changes: 1 addition & 1 deletion main.js.map
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions pictures/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ <h3 id="above-beside-and-on" class="section">Above, Beside, and On</h3>
.</span><span class="identifier">strokeWidth</span><span>(</span><span class="number-literal">5.0</span><span>)</span></code></pre>
<p>Here&#39;s the output this creates.</p>
<div class="default-image-block">
<img src="basic-layout.png">
<img src="basic-layout.png" alt="A circle beside a square above a triangle" title="A circle beside a square above a triangle">
</div>
<p>As a convenience, there are also methods <code>below</code> and <code>under</code>, which are the opposite of <code>above</code> and <code>on</code> respectively. That is, <code>a.above(b) == b.below(a)</code> and <code>a.on(b) == b.under(a)</code></p>

Expand All @@ -95,7 +95,7 @@ <h3 id="bounding-box-and-origin" class="section">Bounding Box and Origin</h3>
</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">beside</span><span>(</span><span class="type-name">Picture</span><span>.</span><span class="identifier">regularPolygon</span><span>(</span><span class="number-literal">5</span><span>, </span><span class="number-literal">30</span><span>)).</span><span class="identifier">debug</span><span>
)</span></code></pre>
<div class="default-image-block">
<img src="debug-layout.png">
<img src="debug-layout.png" alt="Demonstration of debug layout" title="Demonstration of debug layout">
</div>
<p>This gives us some insight into how the basic layout works. Using <code>beside</code> horizontally aligns the origins of the two pictures, the creates a new bounding box enclosing the two existing boxes with the new origin in the middle of the line joining the two origins. <code>Above</code> works similarly, except the alignment is vertical, while <code>on</code> simply places the origins at the same location.</p>

Expand Down Expand Up @@ -125,7 +125,7 @@ <h3 id="repositioning-the-origin" class="section">Repositioning the Origin</h3>
.</span><span class="identifier">on</span><span>(</span><span class="type-name">Picture</span><span>.</span><span class="identifier">circle</span><span>(</span><span class="number-literal">10</span><span>).</span><span class="identifier">at</span><span>(</span><span class="number-literal">50</span><span>, </span><span class="number-literal">216</span><span>.</span><span class="identifier">degrees</span><span>))
.</span><span class="identifier">on</span><span>(</span><span class="type-name">Picture</span><span>.</span><span class="identifier">circle</span><span>(</span><span class="number-literal">10</span><span>).</span><span class="identifier">at</span><span>(</span><span class="number-literal">50</span><span>, </span><span class="number-literal">288</span><span>.</span><span class="identifier">degrees</span><span>))</span></code></pre>
<div class="default-image-block">
<img src="pentagon.png">
<img src="pentagon.png" alt="A pentagon constructed from circles" title="A pentagon constructed from circles">
</div>

<h3 id="positioning-using-landmarks" class="section">Positioning using Landmarks</h3>
Expand All @@ -152,7 +152,7 @@ <h3 id="positioning-using-landmarks" class="section">Positioning using Landmarks
.</span><span class="identifier">originAt</span><span>(</span><span class="type-name">Landmark</span><span>(</span><span class="type-name">Coordinate</span><span>.</span><span class="identifier">percent</span><span>(</span><span class="number-literal">50</span><span>), </span><span class="type-name">Coordinate</span><span>.</span><span class="identifier">percent</span><span>(</span><span class="number-literal">50</span><span>)))
)</span></code></pre>
<div class="default-image-block">
<img src="overlapping-circles.png">
<img src="overlapping-circles.png" alt="Four circles with origins at the midpoints of the bounding box edges" title="Four circles with origins at the midpoints of the bounding box edges">
</div>

<h3 id="adjusting-the-bounding-box" class="section">Adjusting the Bounding Box</h3>
Expand All @@ -167,7 +167,7 @@ <h3 id="adjusting-the-bounding-box" class="section">Adjusting the Bounding Box</
.</span><span class="identifier">beside</span><span>(</span><span class="identifier">circle</span><span>.</span><span class="identifier">margin</span><span>(-</span><span class="number-literal">15</span><span>).</span><span class="identifier">debug</span><span>)
.</span><span class="identifier">beside</span><span>(</span><span class="identifier">circle</span><span>.</span><span class="identifier">margin</span><span>(-</span><span class="number-literal">25</span><span>).</span><span class="identifier">debug</span><span>)</span></code></pre>
<div class="default-image-block">
<img src="rolling-circles.png">
<img src="rolling-circles.png" alt="Five circles with different margins" title="Five circles with different margins">
</div>

<h2 id="implementation" class="section">Implementation</h2>
Expand Down
6 changes: 3 additions & 3 deletions pictures/path.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ <h2 id="concept" class="section">Concept</h2>
.</span><span class="identifier">path</span></code></pre>
<p>Drawing this path creates the output below.</p>
<div class="default-image-block">
<img src="basic-path.png">
<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>
Expand All @@ -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">
<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">
</div>

<h2 id="implementation" class="section">Implementation</h2>
Expand Down Expand Up @@ -131,7 +131,7 @@ <h2 id="utilities" class="section">Utilities</h2>

</span><span class="keyword">val</span><span> </span><span class="identifier">curve</span><span> = </span><span class="type-name">Picture</span><span>.</span><span class="identifier">interpolatingSpline</span><span>(</span><span class="identifier">points</span><span>.</span><span class="identifier">toList</span><span>)</span></code></pre>
<div class="default-image-block">
<img src="curve.png">
<img src="curve.png" alt="A curve that intersects a sequence of points" title="A curve that intersects a sequence of points">
</div>
<p class="nextPage"><a href="layout.html">Layout→</a></p>
</main>
Expand Down
Binary file added pictures/red-blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pictures/shape.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<img src="basic-shapes.png" alt="A circle with square and triangle" title="A circle with square and triangle">
</div>
<p>Here is a short description of all the methods provided by <code>Shape</code>.</p>
<ul>
Expand Down
6 changes: 3 additions & 3 deletions pictures/size.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@ <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@250af75f
</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>
</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@f61de85</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@32dd4a9d</span></code></pre>
<p>This produces the picture shown below.</p>
<div class="default-image-block">
<img src="bounding-box.png">
<img src="bounding-box.png" alt="A circle with a bounding box" title="A circle with a bounding box">
</div>

<h2 id="other-methods" class="section">Other Methods</h2>
Expand Down
6 changes: 3 additions & 3 deletions pictures/style.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<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>
Expand Down Expand Up @@ -114,7 +114,7 @@ <h2 id="concept" class="section">Concept</h2>
.</span><span class="identifier">strokeDash</span><span>(</span><span class="type-name">Array</span><span>(</span><span class="number-literal">12.0</span><span>, </span><span class="number-literal">9.0</span><span>))
)</span></code></pre>
<div class="default-image-block">
<img src="stroke-style.png">
<img src="stroke-style.png" alt="Two stars with different stroke styles" title="Two stars with different stroke styles">
</div>
<p>The fill can either be one of:</p>
<ul>
Expand Down Expand Up @@ -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">
<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>
Expand Down

0 comments on commit 54250ab

Please sign in to comment.