deploy: b825ad5

animation/easing.html

@@ -168,12 +168,12 @@ <h1 id="easing-functions" class="title">Easing Functions</h1>
  .</span><span class="identifier">withRender</span><span>(</span><span class="identifier">r</span><span> =&gt; </span><span class="type-name">Image</span><span>.</span><span class="identifier">circle</span><span>(</span><span class="identifier">r</span><span>))
 </span><span class="comment">// bubble: Reactor[Double] = Reactor(
 // initial = 0.0,
-// onMouseClickHandler = doodle.reactor.Reactor$$$Lambda$13926/0x0000000103b96840@60aacf64,
-// onMouseMoveHandler = doodle.reactor.Reactor$$$Lambda$13927/0x0000000103b97040@28cca7bc,
-// onTickHandler = doodle.reactor.Reactor$$$Lambda$13931/0x0000000103b9f040@31e256d6,
+// onMouseClickHandler = doodle.reactor.Reactor$$$Lambda$13940/0x0000000103b96840@4f60c4f5,
+// onMouseMoveHandler = doodle.reactor.Reactor$$$Lambda$13941/0x0000000103b97040@3aff39a0,
+// onTickHandler = doodle.reactor.Reactor$$$Lambda$13945/0x0000000103b9f040@5291a600,
 // tickRate = 100 milliseconds,
-// renderHandler = repl.MdocSession$MdocApp$$Lambda$13933/0x0000000103b9d840@6beb8870,
-// stopHandler = doodle.reactor.Reactor$$$Lambda$13932/0x0000000103b9e040@4fd07ca3
+// renderHandler = repl.MdocSession$MdocApp$$Lambda$13947/0x0000000103b9d840@1ee31d64,
+// stopHandler = doodle.reactor.Reactor$$$Lambda$13946/0x0000000103b9e040@60dbdd81
 // )</span></code></pre>
  <div class="flex flex-row justify-between">
  <a class="pageNavigation" href="../sequences/">←Shapes, Sequences, and Stars</a> <a class="pageNavigation" href="reactor.html">Reactors→</a>

flowers/functions.html

@@ -346,17 +346,17 @@ <h4 id="exercise-function-literals">Exercise: Function Literals</h4>
  <div class="solution-body">
  <p>The first function is</p>
  <pre><code class="nohighlight"><span>(</span><span class="identifier">x</span><span>: </span><span class="type-name">Int</span><span>) =&gt; </span><span class="identifier">x</span><span> * </span><span class="identifier">x</span><span>
-</span><span class="comment">// res10: Function1[Int, Int] = repl.MdocSession$MdocApp0$$Lambda$14254/0x0000000103c93040@ece0dd</span></code></pre>
+</span><span class="comment">// res10: Function1[Int, Int] = repl.MdocSession$MdocApp0$$Lambda$14268/0x0000000103cb0840@7725d673</span></code></pre>
  <p>The second is</p>
  <pre><code class="nohighlight"><span>(</span><span class="identifier">c</span><span>: </span><span class="type-name">Color</span><span>) =&gt; </span><span class="identifier">c</span><span>.</span><span class="identifier">spin</span><span>(</span><span class="number-literal">15</span><span>.</span><span class="identifier">degrees</span><span>)
-</span><span class="comment">// res11: Function1[Color, HSLA] = repl.MdocSession$MdocApp0$$Lambda$14255/0x0000000103c92040@105106dd</span></code></pre>
+</span><span class="comment">// res11: Function1[Color, HSLA] = repl.MdocSession$MdocApp0$$Lambda$14269/0x0000000103cb1840@320f11e5</span></code></pre>
  <p>The third is</p>
  <pre><code class="nohighlight"><span>(</span><span class="identifier">image</span><span>: </span><span class="type-name">Image</span><span>) =&gt; 
  </span><span class="identifier">image</span><span>.</span><span class="identifier">beside</span><span>(</span><span class="identifier">image</span><span>.</span><span class="identifier">rotate</span><span>(</span><span class="number-literal">90</span><span>.</span><span class="identifier">degrees</span><span>))
  .</span><span class="identifier">beside</span><span>(</span><span class="identifier">image</span><span>.</span><span class="identifier">rotate</span><span>(</span><span class="number-literal">180</span><span>.</span><span class="identifier">degrees</span><span>))
  .</span><span class="identifier">beside</span><span>(</span><span class="identifier">image</span><span>.</span><span class="identifier">rotate</span><span>(</span><span class="number-literal">270</span><span>.</span><span class="identifier">degrees</span><span>))
  .</span><span class="identifier">beside</span><span>(</span><span class="identifier">image</span><span>.</span><span class="identifier">rotate</span><span>(</span><span class="number-literal">360</span><span>.</span><span class="identifier">degrees</span><span>))
-</span><span class="comment">// res12: Function1[Image, Image] = repl.MdocSession$MdocApp0$$Lambda$14256/0x0000000103c91840@1c7ac3e9</span></code></pre>
+</span><span class="comment">// res12: Function1[Image, Image] = repl.MdocSession$MdocApp0$$Lambda$14270/0x0000000103cb2040@568f80c1</span></code></pre>
  </div>
  </div>
  <div class="exercise">

generative/flatmap.html

@@ -355,15 +355,15 @@ <h4 id="randomness-and-randomness" class="section">Randomness and Randomness {-}
 // c = FlatMapped(
 // c = FlatMapped(
 // c = Suspend(a = RDouble),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@148747d
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@208f60bf
 // ),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@3f8cd643
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@54585612
 // ),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@1c680713
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@7e51b3dd
 // ),
-// f = repl.MdocSession$MdocApp5$$Lambda$14334/0x0000000103ce1840@5ac23f62
+// f = repl.MdocSession$MdocApp5$$Lambda$14348/0x0000000103ce1840@33b6d747
 // ),
-// f = repl.MdocSession$MdocApp5$$Lambda$14337/0x0000000103ce4040@18eb53db
+// f = repl.MdocSession$MdocApp5$$Lambda$14351/0x0000000103ce4040@6867d316
 // )</span></code></pre>
  <p>which makes it clearer that we&#39;re generating three different circles.
  &lt;/div&gt;</p>
@@ -384,17 +384,17 @@ <h4 id="colored-boxes" class="section">Colored Boxes {-}</h4>
  </span><span class="type-name">Random</span><span>.</span><span class="identifier">double</span><span>.</span><span class="identifier">map</span><span>(</span><span class="identifier">x</span><span> =&gt; </span><span class="identifier">x</span><span>.</span><span class="identifier">turns</span><span>)
 </span><span class="comment">// randomAngle: Free[[A &gt;: Nothing &lt;: Any] =&gt; RandomOp[A], Angle] = FlatMapped(
 // c = Suspend(a = RDouble),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@410ca04b
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@7e19e0ce
 // )
 </span><span>
 </span><span class="keyword">val</span><span> </span><span class="identifier">randomColor</span><span>: </span><span class="type-name">Random</span><span>[</span><span class="type-name">Color</span><span>] =
  </span><span class="identifier">randomAngle</span><span>.</span><span class="identifier">map</span><span>(</span><span class="identifier">hue</span><span> =&gt; </span><span class="type-name">Color</span><span>.</span><span class="identifier">hsl</span><span>(</span><span class="identifier">hue</span><span>, </span><span class="number-literal">0.7</span><span>, </span><span class="number-literal">0.7</span><span>))
 </span><span class="comment">// randomColor: Free[[A &gt;: Nothing &lt;: Any] =&gt; RandomOp[A], Color] = FlatMapped(
 // c = FlatMapped(
 // c = Suspend(a = RDouble),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@410ca04b
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@7e19e0ce
 // ),
-// f = cats.free.Free$$Lambda$14317/0x0000000103caf040@1d0077e6
+// f = cats.free.Free$$Lambda$14331/0x0000000103cc9040@d257b8b
 // )
 </span><span>
 </span><span class="keyword">def</span><span> </span><span class="declaration-name">coloredRectangle</span><span>(</span><span class="identifier">color</span><span>: </span><span class="type-name">Color</span><span>): </span><span class="type-name">Image</span><span> =

generative/generative.html

@@ -191,29 +191,29 @@ <h1 id="generative-art" class="title">Generative Art</h1>
  </tbody>
  </table>
  <pre><code class="nohighlight"><span class="identifier">math</span><span>.</span><span class="identifier">random</span><span>
-</span><span class="comment">// res0: Double = 0.778798638508099
+</span><span class="comment">// res0: Double = 0.42263266045811687
 </span><span class="identifier">math</span><span>.</span><span class="identifier">random</span><span>
-</span><span class="comment">// res1: Double = 0.7622927751021928</span></code></pre>
+</span><span class="comment">// res1: Double = 0.570717919258517</span></code></pre>
  <p>Given <code>math.random</code> we could produce a method that returns a random <code>Angle</code> like so.</p>
  <pre><code class="nohighlight"><span class="keyword">def</span><span> </span><span class="declaration-name">randomAngle</span><span>: </span><span class="type-name">Angle</span><span> = 
  </span><span class="identifier">math</span><span>.</span><span class="identifier">random</span><span>.</span><span class="identifier">turns</span><span>
 
 </span><span class="identifier">randomAngle</span><span>
-</span><span class="comment">// res2: Angle = Angle(2.6238036213012323)
+</span><span class="comment">// res2: Angle = Angle(5.377206267801776)
 </span><span class="identifier">randomAngle</span><span>
-</span><span class="comment">// res3: Angle = Angle(2.9526942293831238)</span></code></pre>
+</span><span class="comment">// res3: Angle = Angle(0.6529155788286686)</span></code></pre>
  <p>Why might we not want to do this? What principle does this break?</p>
  <p>&lt;div class=&quot;solution&quot;&gt;
  Generating random numbers in this way breaks substitution. Remember substitution says wherever we see an expression we should be able to substitute the value it evaluates to without changing the meaning of the program. Concretely, this means</p>
  <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">result1</span><span> = </span><span class="identifier">randomAngle</span><span>
-</span><span class="comment">// result1: Angle = Angle(0.9168988221492637)
+</span><span class="comment">// result1: Angle = Angle(4.977285864995028)
 </span><span class="keyword">val</span><span> </span><span class="identifier">result2</span><span> = </span><span class="identifier">randomAngle</span><span>
-</span><span class="comment">// result2: Angle = Angle(4.521752264021588)</span></code></pre>
+</span><span class="comment">// result2: Angle = Angle(1.0040306448075407)</span></code></pre>
  <p>and </p>
  <pre><code class="nohighlight"><span class="keyword">val</span><span> </span><span class="identifier">result1</span><span> = </span><span class="identifier">randomAngle</span><span>
-</span><span class="comment">// result1: Angle = Angle(2.2145044049455134)
+</span><span class="comment">// result1: Angle = Angle(5.072548901649536)
 </span><span class="keyword">val</span><span> </span><span class="identifier">result2</span><span> = </span><span class="identifier">result1</span><span>
-</span><span class="comment">// result2: Angle = Angle(2.2145044049455134)</span></code></pre>
+</span><span class="comment">// result2: Angle = Angle(5.072548901649536)</span></code></pre>
  <p>should be the same program and clearly they are not.
  &lt;/div&gt;</p>
  <p>What should we do? Suffer the slings and arrows of outrageous computational models, or take arms against a sea of side-effects, and by opposing end them! There&#39;s really only one choice.</p>

generative/random.html

@@ -176,7 +176,7 @@ <h1 id="randomness-without-effect" class="title">Randomness without Effect</h1>
 // )</span></code></pre>
  <p>No random numbers are actually created until we call the <code>run</code> method.</p>
  <pre><code class="nohighlight"><span class="identifier">randomDouble</span><span>.</span><span class="identifier">run</span><span>
-</span><span class="comment">// res0: Double = 0.26122829823106186</span></code></pre>
+</span><span class="comment">// res0: Double = 0.7485819426109376</span></code></pre>
  <p>The type <code>Random[Double]</code> indicates we have something that will produce a random <code>Double</code> when we <code>run</code> it. Just like with <code>Image</code> and <code>draw</code>, substitution holds with <code>Random</code> up until the point we call <code>run</code>.</p>
  <p>Table Table generative:random shows some of the ways to construct <code>Random</code> values.</p>
  <hr>
@@ -214,9 +214,9 @@ <h3 id="composing-random" class="section">Composing Random</h3>
  </span><span class="type-name">Random</span><span>.</span><span class="identifier">double</span><span>.</span><span class="identifier">map</span><span>(</span><span class="identifier">x</span><span> =&gt; </span><span class="identifier">x</span><span>.</span><span class="identifier">turns</span><span>)</span></code></pre>
  <p>When we <code>run</code> <code>RandomAngle</code> we can generate randomly created <code>Angle</code></p>
  <pre><code class="nohighlight"><span class="identifier">randomAngle</span><span>.</span><span class="identifier">run</span><span>
-</span><span class="comment">// res1: Angle = Angle(3.7029679286272037)
+</span><span class="comment">// res1: Angle = Angle(1.3754429028686068)
 </span><span class="identifier">randomAngle</span><span>.</span><span class="identifier">run</span><span>
-</span><span class="comment">// res2: Angle = Angle(4.109491633058895)</span></code></pre>
+</span><span class="comment">// res2: Angle = Angle(2.341097183595856)</span></code></pre>
 
  <h3 id="exercises" class="section">Exercises {-}</h3>
 

main.js

@@ -14118,10 +14118,6 @@ $c_Lpolygons_Creative$.prototype.curvygonExercise__T__V = (function(id) {
  var runtime = $m_Lcats_effect_unsafe_IORuntime$().global__Lcats_effect_unsafe_IORuntime();
  $f_Ldoodle_interact_animation_Transducer__animate__O__Ldoodle_interact_effect_AnimationRenderer__Ldoodle_effect_Renderer__Ldoodle_interact_algebra_Redraw__s_$less$colon$less__Lcats_effect_unsafe_IORuntime__V(this$22, frame, a, e, r, ev, runtime)
 });
-$c_Lpolygons_Creative$.prototype.spiralExercise = (function(arg) {
- var prep0 = $as_T(arg);
- this.spiralExercise__T__V(prep0)
-});
 $c_Lpolygons_Creative$.prototype.bezierCurveAnimation = (function(arg) {
  var prep0 = $as_T(arg);
  this.bezierCurveAnimation__T__V(prep0)
@@ -14134,6 +14130,10 @@ $c_Lpolygons_Creative$.prototype.starPolygonConstruction = (function(arg) {
  var prep0 = $as_T(arg);
  this.starPolygonConstruction__T__V(prep0)
 });
+$c_Lpolygons_Creative$.prototype.spiralExercise = (function(arg) {
+ var prep0 = $as_T(arg);
+ this.spiralExercise__T__V(prep0)
+});
 $c_Lpolygons_Creative$.prototype.starPolygonExercise = (function(arg) {
  var prep0 = $as_T(arg);
  this.starPolygonExercise__T__V(prep0)
@@ -14283,14 +14283,14 @@ $c_Lpolygons_Paths$.prototype.regularPolygonExercise__T__V = (function(id) {
  var this$5 = $m_Ldoodle_image_syntax_package$all$();
  new $c_Ldoodle_image_syntax_AbstractImageSyntax$ImageOps(this$5, polygons).drawWithFrame__O__Ldoodle_effect_Renderer__Lcats_effect_unsafe_IORuntime__V($n($m_Ldoodle_svg_package$().Ldoodle_svg_package$__f_Frame).apply__T__Ldoodle_svg_effect_Frame(id), $m_Ldoodle_svg_package$().Ldoodle_svg_package$__f_svgRenderer, $m_Lcats_effect_unsafe_IORuntime$().global__Lcats_effect_unsafe_IORuntime())
 });
-$c_Lpolygons_Paths$.prototype.regularPolygonExercise = (function(arg) {
- var prep0 = $as_T(arg);
- this.regularPolygonExercise__T__V(prep0)
-});
 $c_Lpolygons_Paths$.prototype.hexagon = (function(arg) {
  var prep0 = $as_T(arg);
  this.hexagon__T__V(prep0)
 });
+$c_Lpolygons_Paths$.prototype.regularPolygonExercise = (function(arg) {
+ var prep0 = $as_T(arg);
+ this.regularPolygonExercise__T__V(prep0)
+});
 var $d_Lpolygons_Paths$ = new $TypeData().initClass({
  Lpolygons_Paths$: 0
 }, false, "polygons.Paths$", {
@@ -14561,14 +14561,14 @@ $c_Lpolygons_Polygons$.prototype.points = (function(arg) {
  var prep0 = $as_T(arg);
  this.points__T__V(prep0)
 });
-$c_Lpolygons_Polygons$.prototype.polygonPointsExercise = (function(arg) {
- var prep0 = $as_T(arg);
- this.polygonPointsExercise__T__V(prep0)
-});
 $c_Lpolygons_Polygons$.prototype.vertices = (function(arg) {
  var prep0 = $as_T(arg);
  this.vertices__T__V(prep0)
 });
+$c_Lpolygons_Polygons$.prototype.polygonPointsExercise = (function(arg) {
+ var prep0 = $as_T(arg);
+ this.polygonPointsExercise__T__V(prep0)
+});
 var $d_Lpolygons_Polygons$ = new $TypeData().initClass({
  Lpolygons_Polygons$: 0
 }, false, "polygons.Polygons$", {

part-one-conclusions.html

@@ -176,7 +176,7 @@ <h1 id="part-one-conclusions" class="title">Part One: Conclusions</h1>
  <a href="https://isohedral.ca/">Craig Kaplan</a> has worked on <a href="https://cs.uwaterloo.ca/~csk/publications/Papers/kaplan_2000.pdf">algorithms to create Islamic star patterns</a> (as well as many other creative ideas in computer graphics.) His papers are quite heavy on the mathematics but you can still get a lot out of just the pictures illustrating the construction.</p>
  <p>If symmetrical tiling is your thing, <a href="https://press.princeton.edu/books/hardcover/9780691161730/creating-symmetry">Creating Symmetry</a> is the best book I know for exploring the mathematics behind it. I think you will need at least some University level mathematics to make headway in this book.</p>
  <p><a href="https://linktr.ee/georgemsavva">George Savva</a> creates artworks that make creative use of parametric curves. He also posts detailed breakdowns of the process behind his images <a href="https://georgemsavva.github.io/creativecoding/posts/lissajous/">such as this post which uses Lissajous curves</a>.</p>
- <p><a href="http://www.complexification.net/gallery/">Jared Tarbell</a> is a legend in the field of creative computing, and also a co-founder of <a href="https://www.etsy.com/">Etsy</a>. A lot of his work is over two decades old, but it still feels fresh. His website has just enough detail on his process that it&#39;s possible to reconstruct some of his work.</p>
+ <p><a href="http://www.complexification.net/gallery/">Jared Tarbell</a> is something of a legend in the field of creative computing, and also a co-founder of <a href="https://www.etsy.com/">Etsy</a>. A lot of his work is over two decades old, but it still feels fresh. His has just enough detail on his process that it&#39;s possible to reconstruct some of his work, whilst his <a href="https://www.infinite.center/">newer site</a> has code with every image.</p>
  <p>You can&#39;t go far in creative computing without running into <a href="https://processing.org/">Processing</a> and its descendant <a href="https://p5js.org/">p5.js</a>. 
  They are probably the two most widely used software packages in the creative computing world, but are based on quite a different programming model to Doodle. You can&#39;t go very far in the Processing world without running into <a href="https://en.wikipedia.org/wiki/Daniel_Shiffman">Daniel Shiffman</a> and his website <a href="https://thecodingtrain.com/">The Coding Train</a>, which has many many tutorials on a huge range of topics.</p>
  <p>Images are not the only medium for creative computing. <a href="https://sonic-pi.net/">Sonic Pi</a> is a programming language for creating music, and <a href="https://twinery.org/">Twine</a> is a system for creating non-linear fiction. <a href="https://en.wikipedia.org/wiki/Physical_computing">Physical computing</a> is another outlet.</p>