<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head>
<title>Diagrams</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta name="copyright" content="Copyright &#169; 2008-2011 Péter Diviánszky" />
<link rel="shortcut icon" href="icon.ico" />
<script src="common_en.js" charset="utf-8" type="text/javascript"></script> 
<link rel="stylesheet" href="common.css" type="text/css" />
</head>
<body onload="javascript:resetForms(); javascript:slidy_init();">
<div><h1 class="cover">Diagrams</h1>
<div id="info"></div>
<ul>
<li><a href="#diagrams">Diagrams</a></li>
<li><a href="#coordinate-system">Coordinate System</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#rectangle">Rectangle</a></li>
<li><a href="#superposition-of-two-diagrams">Superposition of two Diagrams</a></li>
<li><a href="#exercise-no-entry-sign">Exercise: “No Entry” Sign</a></li>
<li><a href="#moving-diagrams">Moving Diagrams</a></li>
<li><a href="#exercise-door">Exercise: Door</a></li>
<li><a href="#superposition-of-diagrams">Superposition of Diagrams</a></li>
<li><a href="#list-comprehensions">List Comprehensions</a></li>
<li><a href="#dot-dot-expressions">Dot-dot Expressions</a></li>
<li><a href="#exercise-coins">Exercise: Coins</a></li>
<li><a href="#exercise-stairs">Exercise: Stairs</a></li>
<li><a href="#exercise-cage">Exercise: Cage</a></li>
<li><a href="#exercise-circles">Exercise: Circles</a></li>
<li><a href="#exercise-spheres">Exercise: Spheres</a></li>
<li><a href="#exercise-pearl-necklace">Exercise: Pearl Necklace</a></li>
<li><a href="#exercise-spiral">Exercise: Spiral</a></li>
<li><a href="#coloring">Coloring</a></li>
<li><a href="#exercise-colored-no-entry-sign">Exercise: Colored “No Entry” Sign</a></li>
<li><a href="#rotation">Rotation</a></li>
<li><a href="#exercise-black-star">Exercise: Black Star</a></li>
<li><a href="#exercise-dial">Exercise: Dial</a></li>
<li><a href="#section">Section</a></li>
<li><a href="#exercise-dandelion">Exercise: Dandelion</a></li>
<li><a href="#polygon">Polygon</a></li>
<li><a href="#exercise-star">Exercise: Star</a></li>
<li><a href="#anything-else">Anything Else?</a></li>
</ul>
</div>
<div class="section level1" id="diagrams">
<h1><a href="#diagrams">Diagrams</a></h1>
<p>Notes</p>
<ul>
<li>Edit the line after <code>Test&gt;</code> and hit <code>&lt;Enter&gt;</code>.<br /> The diagram will change!</li>
<li>Diagrams presented here are not part of the Haskell Platform.<br /> We use them only to introduce the basic concepts of Haskell.</li>
</ul>
</div>
<div class="section level1" id="coordinate-system">
<h1><a href="#coordinate-system">Coordinate System</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','f4a83d4731e5996daf42e2ae134f11b7','f4a83d4731e5996daf42e2ae134f11b7');"><div class="answer" id="resf4a83d4731e5996daf42e2ae134f11b7"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><rect height="100.000" style="fill: yellow" width="100.000" x="-50.000" y="-50.000"></rect><line x1="-10.000" x2="10.000" y1="0.000" y2="0.000"></line><line x1="9.000" x2="10.000" y1="0.500" y2="0.000"></line><line x1="9.000" x2="10.000" y1="-0.500" y2="0.000"></line><line x1="0.500" x2="0.000" y1="9.000" y2="10.000"></line><line x1="-0.500" x2="0.000" y1="9.000" y2="10.000"></line><line x1="0.000" x2="0.000" y1="-10.000" y2="10.000"></line><line x1="1.000" x2="1.000" y1="-0.500" y2="0.500"></line></g></svg></div></form></div>
</div>
<div class="section level1" id="circle">
<h1><a href="#circle">Circle</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','db28a9c08812290560571c748806b0b0','db28a9c08812290560571c748806b0b0');"><div class="answer" id="resdb28a9c08812290560571c748806b0b0"><code class="result">circle</code><code> :: </code><code class="type">Double -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','573ca58fac99c4ef7e58123738471493','573ca58fac99c4ef7e58123738471493');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea573ca58fac99c4ef7e58123738471493" value="circle 5" /><br /><div class="answer" id="res573ca58fac99c4ef7e58123738471493"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><circle r="5.000" style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"></circle></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the type of functions and the syntax of function application.</p>
</div>
</div>
<div class="section level1" id="rectangle">
<h1><a href="#rectangle">Rectangle</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','afa95a28ecbfcf957b103890d2244e9f','afa95a28ecbfcf957b103890d2244e9f');"><div class="answer" id="resafa95a28ecbfcf957b103890d2244e9f"><code class="result">rect</code><code> :: </code><code class="type">Double -&gt; Double -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','d6664d1c01afd24810cc31ab8fb869e5','d6664d1c01afd24810cc31ab8fb869e5');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="taread6664d1c01afd24810cc31ab8fb869e5" value="rect 8 8" /><br /><div class="answer" id="resd6664d1c01afd24810cc31ab8fb869e5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><rect height="8.000" style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)" width="8.000" x="-4.000" y="-4.000"></rect></svg></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','b177b023e5c1a28051f993a0cdc0fc35','b177b023e5c1a28051f993a0cdc0fc35');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareab177b023e5c1a28051f993a0cdc0fc35" value="rect (4+4) (5+3)" /><br /><div class="answer" id="resb177b023e5c1a28051f993a0cdc0fc35"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><rect height="8.000" style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)" width="8.000" x="-4.000" y="-4.000"></rect></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the type of functions with two parameters and their application.</p>
</div>
</div>
<div class="section level1" id="superposition-of-two-diagrams">
<h1><a href="#superposition-of-two-diagrams">Superposition of two Diagrams</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','3e252cfffbcacf9509e7866fc18db2d3','3e252cfffbcacf9509e7866fc18db2d3');"><div class="answer" id="res3e252cfffbcacf9509e7866fc18db2d3"><code class="result">(&lt;|&gt;)</code><code> :: </code><code class="type">Diagram -&gt; Diagram -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','163ee09fdbb00e52c1a91ae0e34a7af2','163ee09fdbb00e52c1a91ae0e34a7af2');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea163ee09fdbb00e52c1a91ae0e34a7af2" value="circle 5 &lt;|&gt; rect 8 8" /><br /><div class="answer" id="res163ee09fdbb00e52c1a91ae0e34a7af2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><rect height="8.000" width="8.000" x="-4.000" y="-4.000"></rect></g></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the syntax of operators.</p>
</div>
</div>
<div class="section level1" id="exercise-no-entry-sign">
<h1><a href="#exercise-no-entry-sign">Exercise: “No Entry” Sign</a></h1>
<p>Make a diagram similar to the “no entry” sign shown here (hint: use lengths 2, 5 and 8):</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','d4edfd5f67d36fc7fd5cd8f073e8a330','d4edfd5f67d36fc7fd5cd8f073e8a330');"><div class="answer" id="resd4edfd5f67d36fc7fd5cd8f073e8a330"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><rect height="2.000" width="8.000" x="-4.000" y="-1.000"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','c16a5320fa475530d9583c34fd356ef5','c16a5320fa475530d9583c34fd356ef5');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareac16a5320fa475530d9583c34fd356ef5" value="" /><br /><div class="answer" id="resc16a5320fa475530d9583c34fd356ef5"></div></form></div>
</div>
<div class="section level1" id="moving-diagrams">
<h1><a href="#moving-diagrams">Moving Diagrams</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','6f495984ed377b9d7263dad35c6076e1','6f495984ed377b9d7263dad35c6076e1');"><div class="answer" id="res6f495984ed377b9d7263dad35c6076e1"><code class="result">move</code><code> :: </code><code class="type">Diagram -&gt; Point -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','ea315e5d301c65942191ee7ca3224e8d','ea315e5d301c65942191ee7ca3224e8d');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareaea315e5d301c65942191ee7ca3224e8d" value="circle 5 &lt;|&gt; rect 8 8 `move` (3,0)" /><br /><div class="answer" id="resea315e5d301c65942191ee7ca3224e8d"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><rect height="8.000" transform="translate(3.000,0.000)" width="8.000" x="-4.000" y="-4.000"></rect></g></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the application of functions with two parameters as operators.</p>
<p>Note that the precedence of <code>move</code> is higher than the precedence of <code>&lt;|&gt;</code>.</p>
</div>
</div>
<div class="section level1" id="exercise-door">
<h1><a href="#exercise-door">Exercise: Door</a></h1>
<p>Make a diagram similar to the door shown here (hint: use lengths 0, 2, 6, 10, 14 and 20):</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','779c3bc2293101b220e3fe79e11f5667','779c3bc2293101b220e3fe79e11f5667');"><div class="answer" id="res779c3bc2293101b220e3fe79e11f5667"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><rect height="14.000" width="20.000" x="-10.000" y="-7.000"></rect><rect height="10.000" transform="translate(0.000,-2.000)" width="6.000" x="-3.000" y="-5.000"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','17e62166fc8586dfa4d1bc0e1742c08b','17e62166fc8586dfa4d1bc0e1742c08b');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea17e62166fc8586dfa4d1bc0e1742c08b" value="" /><br /><div class="answer" id="res17e62166fc8586dfa4d1bc0e1742c08b"></div></form></div>
</div>
<div class="section level1" id="superposition-of-diagrams">
<h1><a href="#superposition-of-diagrams">Superposition of Diagrams</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','4abdfc90b1013aafe84d15525f0404fb','4abdfc90b1013aafe84d15525f0404fb');"><div class="answer" id="res4abdfc90b1013aafe84d15525f0404fb"><code class="result">union</code><code> :: </code><code class="type">[Diagram] -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','d6410b1b7a86decbefb44896bd278a3e','d6410b1b7a86decbefb44896bd278a3e');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="taread6410b1b7a86decbefb44896bd278a3e" value="union [circle 5, circle 4, circle 3, circle 2, circle 1]" /><br /><div class="answer" id="resd6410b1b7a86decbefb44896bd278a3e"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><circle r="4.000"></circle><circle r="3.000"></circle><circle r="2.000"></circle><circle r="1.000"></circle></g></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the type of lists and the syntax of conctrete lists.</p>
</div>
</div>
<div class="section level1" id="list-comprehensions">
<h1><a href="#list-comprehensions">List Comprehensions</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','2ad1a2d0b090e0ad0e3f38511ccb1adf','2ad1a2d0b090e0ad0e3f38511ccb1adf');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea2ad1a2d0b090e0ad0e3f38511ccb1adf" value="union [circle i | i&lt;-[5,4,3,2,1]]" /><br /><div class="answer" id="res2ad1a2d0b090e0ad0e3f38511ccb1adf"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><circle r="4.000"></circle><circle r="3.000"></circle><circle r="2.000"></circle><circle r="1.000"></circle></g></svg></div></form></div>
</div>
<div class="section level1" id="dot-dot-expressions">
<h1><a href="#dot-dot-expressions">Dot-dot Expressions</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','395537b00d215f0c192131b575aba39c','395537b00d215f0c192131b575aba39c');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea395537b00d215f0c192131b575aba39c" value="union [circle i | i&lt;-[5,4..1]]" /><br /><div class="answer" id="res395537b00d215f0c192131b575aba39c"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><circle r="4.000"></circle><circle r="3.000"></circle><circle r="2.000"></circle><circle r="1.000"></circle></g></svg></div></form></div>
</div>
<div class="section level1" id="exercise-coins">
<h1><a href="#exercise-coins">Exercise: Coins</a></h1>
<p>Make a diagram similar to the coins shown here (hint: the radius of the circles are 4):</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','ae80eea167d5c963858ab033b93da64c','ae80eea167d5c963858ab033b93da64c');"><div class="answer" id="resae80eea167d5c963858ab033b93da64c"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="4.000" transform="translate(0.000,-2.000)"></circle><circle r="4.000" transform="translate(0.000,-1.000)"></circle><circle r="4.000" transform="translate(0.000,0.000)"></circle><circle r="4.000" transform="translate(0.000,1.000)"></circle><circle r="4.000" transform="translate(0.000,2.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','66f041e16a60928b05a7e228a89c3799','66f041e16a60928b05a7e228a89c3799');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea66f041e16a60928b05a7e228a89c3799" value="" /><br /><div class="answer" id="res66f041e16a60928b05a7e228a89c3799"></div></form></div>
</div>
<div class="section level1" id="exercise-stairs">
<h1><a href="#exercise-stairs">Exercise: Stairs</a></h1>
<p>Make a diagram similar to the stairs shown here (hint: use lengths -5, 1, 2, 5):</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','6f1e4925f2fab090b0490a5730e0155d','6f1e4925f2fab090b0490a5730e0155d');"><div class="answer" id="res6f1e4925f2fab090b0490a5730e0155d"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><rect height="1.000" transform="translate(-5.000,-5.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(-4.000,-4.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(-3.000,-3.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(-2.000,-2.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(-1.000,-1.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(0.000,0.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(1.000,1.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(2.000,2.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(3.000,3.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(4.000,4.000)" width="2.000" x="-1.000" y="-0.500"></rect><rect height="1.000" transform="translate(5.000,5.000)" width="2.000" x="-1.000" y="-0.500"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','44f683a84163b3523afe57c2e008bc8c','44f683a84163b3523afe57c2e008bc8c');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea44f683a84163b3523afe57c2e008bc8c" value="" /><br /><div class="answer" id="res44f683a84163b3523afe57c2e008bc8c"></div></form></div>
</div>
<div class="section level1" id="exercise-cage">
<h1><a href="#exercise-cage">Exercise: Cage</a></h1>
<p>Make a diagram similar to the cage shown here (hint: use lengths -5, 1, 2, 4, 20):</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','1cb459184d6319319df3219798fed884','1cb459184d6319319df3219798fed884');"><div class="answer" id="res1cb459184d6319319df3219798fed884"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><rect height="20.000" transform="translate(-9.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(-7.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(-5.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(-3.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(-1.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(1.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(3.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(5.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(7.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect><rect height="20.000" transform="translate(9.000,0.000)" width="2.000" x="-1.000" y="-10.000"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','3295c76acbf4caaed33c36b1b5fc2cb1','3295c76acbf4caaed33c36b1b5fc2cb1');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea3295c76acbf4caaed33c36b1b5fc2cb1" value="" /><br /><div class="answer" id="res3295c76acbf4caaed33c36b1b5fc2cb1"></div></form></div>
</div>
<div class="section level1" id="exercise-circles">
<h1><a href="#exercise-circles">Exercise: Circles</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','cf9341a7497871a7151c6b7a85ebc459','cf9341a7497871a7151c6b7a85ebc459');"><div class="answer" id="rescf9341a7497871a7151c6b7a85ebc459"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="0.500" transform="translate(2.000,0.000)"></circle><circle r="1.000" transform="translate(4.000,0.000)"></circle><circle r="1.500" transform="translate(6.000,0.000)"></circle><circle r="2.000" transform="translate(8.000,0.000)"></circle><circle r="2.500" transform="translate(10.000,0.000)"></circle><circle r="3.000" transform="translate(12.000,0.000)"></circle><circle r="3.500" transform="translate(14.000,0.000)"></circle><circle r="4.000" transform="translate(16.000,0.000)"></circle><circle r="4.500" transform="translate(18.000,0.000)"></circle><circle r="5.000" transform="translate(20.000,0.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','14bfa6bb14875e45bba028a21ed38046','14bfa6bb14875e45bba028a21ed38046');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea14bfa6bb14875e45bba028a21ed38046" value="" /><br /><div class="answer" id="res14bfa6bb14875e45bba028a21ed38046"></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','c8e4878038afd3b076468f3943d471bc','c8e4878038afd3b076468f3943d471bc');"><div class="answer" id="resc8e4878038afd3b076468f3943d471bc"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000" transform="translate(20.000,0.000)"></circle><circle r="4.500" transform="translate(18.000,0.000)"></circle><circle r="4.000" transform="translate(16.000,0.000)"></circle><circle r="3.500" transform="translate(14.000,0.000)"></circle><circle r="3.000" transform="translate(12.000,0.000)"></circle><circle r="2.500" transform="translate(10.000,0.000)"></circle><circle r="2.000" transform="translate(8.000,0.000)"></circle><circle r="1.500" transform="translate(6.000,0.000)"></circle><circle r="1.000" transform="translate(4.000,0.000)"></circle><circle r="0.500" transform="translate(2.000,0.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','e2c420d928d4bf8ce0ff2ec19b371514','e2c420d928d4bf8ce0ff2ec19b371514');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareae2c420d928d4bf8ce0ff2ec19b371514" value="" /><br /><div class="answer" id="rese2c420d928d4bf8ce0ff2ec19b371514"></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','5cb024888cdf37083b3dd3d223836662','5cb024888cdf37083b3dd3d223836662');"><div class="answer" id="res5cb024888cdf37083b3dd3d223836662"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000" transform="translate(-10.000,0.000)"></circle><circle r="4.000" transform="translate(-8.000,0.000)"></circle><circle r="3.000" transform="translate(-6.000,0.000)"></circle><circle r="2.000" transform="translate(-4.000,0.000)"></circle><circle r="1.000" transform="translate(-2.000,0.000)"></circle><circle r="0.000" transform="translate(0.000,0.000)"></circle><circle r="1.000" transform="translate(2.000,0.000)"></circle><circle r="2.000" transform="translate(4.000,0.000)"></circle><circle r="3.000" transform="translate(6.000,0.000)"></circle><circle r="4.000" transform="translate(8.000,0.000)"></circle><circle r="5.000" transform="translate(10.000,0.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','d2ddea18f00665ce8623e36bd4e3c7c5','d2ddea18f00665ce8623e36bd4e3c7c5');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="taread2ddea18f00665ce8623e36bd4e3c7c5" value="" /><br /><div class="answer" id="resd2ddea18f00665ce8623e36bd4e3c7c5"></div></form></div>
</div>
<div class="section level1" id="exercise-spheres">
<h1><a href="#exercise-spheres">Exercise: Spheres</a></h1>
<p>The radius of the spheres are 1.5<sup>x</sup>, x∈{-5,-4,…,4,5}.</p>
<p>The exponentiation operator is: <code>**</code></p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','a536e2bd43f3db54ef02c55927485f9e','a536e2bd43f3db54ef02c55927485f9e');"><div class="answer" id="resa536e2bd43f3db54ef02c55927485f9e"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="7.594" transform="translate(22.781,0.000)"></circle><circle r="5.063" transform="translate(15.188,0.000)"></circle><circle r="3.375" transform="translate(10.125,0.000)"></circle><circle r="2.250" transform="translate(6.750,0.000)"></circle><circle r="1.500" transform="translate(4.500,0.000)"></circle><circle r="1.000" transform="translate(3.000,0.000)"></circle><circle r="0.667" transform="translate(2.000,0.000)"></circle><circle r="0.444" transform="translate(1.333,0.000)"></circle><circle r="0.296" transform="translate(0.889,0.000)"></circle><circle r="0.198" transform="translate(0.593,0.000)"></circle><circle r="0.132" transform="translate(0.395,0.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','35f4a8d465e6e1edc05f3d8ab658c551','35f4a8d465e6e1edc05f3d8ab658c551');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea35f4a8d465e6e1edc05f3d8ab658c551" value="" /><br /><div class="answer" id="res35f4a8d465e6e1edc05f3d8ab658c551"></div></form></div>
</div>
<div class="section level1" id="exercise-pearl-necklace">
<h1><a href="#exercise-pearl-necklace">Exercise: Pearl Necklace</a></h1>
<p>A function used is x ↦ x<sup>2</sup>/10.</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','38d34b73fe386ec6fa8b3b341a687d43','38d34b73fe386ec6fa8b3b341a687d43');"><div class="answer" id="res38d34b73fe386ec6fa8b3b341a687d43"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="0.500" transform="translate(-20.000,40.000)"></circle><circle r="0.500" transform="translate(-19.000,36.100)"></circle><circle r="0.500" transform="translate(-18.000,32.400)"></circle><circle r="0.500" transform="translate(-17.000,28.900)"></circle><circle r="0.500" transform="translate(-16.000,25.600)"></circle><circle r="0.500" transform="translate(-15.000,22.500)"></circle><circle r="0.500" transform="translate(-14.000,19.600)"></circle><circle r="0.500" transform="translate(-13.000,16.900)"></circle><circle r="0.500" transform="translate(-12.000,14.400)"></circle><circle r="0.500" transform="translate(-11.000,12.100)"></circle><circle r="0.500" transform="translate(-10.000,10.000)"></circle><circle r="0.500" transform="translate(-9.000,8.100)"></circle><circle r="0.500" transform="translate(-8.000,6.400)"></circle><circle r="0.500" transform="translate(-7.000,4.900)"></circle><circle r="0.500" transform="translate(-6.000,3.600)"></circle><circle r="0.500" transform="translate(-5.000,2.500)"></circle><circle r="0.500" transform="translate(-4.000,1.600)"></circle><circle r="0.500" transform="translate(-3.000,0.900)"></circle><circle r="0.500" transform="translate(-2.000,0.400)"></circle><circle r="0.500" transform="translate(-1.000,0.100)"></circle><circle r="0.500" transform="translate(0.000,0.000)"></circle><circle r="0.500" transform="translate(1.000,0.100)"></circle><circle r="0.500" transform="translate(2.000,0.400)"></circle><circle r="0.500" transform="translate(3.000,0.900)"></circle><circle r="0.500" transform="translate(4.000,1.600)"></circle><circle r="0.500" transform="translate(5.000,2.500)"></circle><circle r="0.500" transform="translate(6.000,3.600)"></circle><circle r="0.500" transform="translate(7.000,4.900)"></circle><circle r="0.500" transform="translate(8.000,6.400)"></circle><circle r="0.500" transform="translate(9.000,8.100)"></circle><circle r="0.500" transform="translate(10.000,10.000)"></circle><circle r="0.500" transform="translate(11.000,12.100)"></circle><circle r="0.500" transform="translate(12.000,14.400)"></circle><circle r="0.500" transform="translate(13.000,16.900)"></circle><circle r="0.500" transform="translate(14.000,19.600)"></circle><circle r="0.500" transform="translate(15.000,22.500)"></circle><circle r="0.500" transform="translate(16.000,25.600)"></circle><circle r="0.500" transform="translate(17.000,28.900)"></circle><circle r="0.500" transform="translate(18.000,32.400)"></circle><circle r="0.500" transform="translate(19.000,36.100)"></circle><circle r="0.500" transform="translate(20.000,40.000)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','9778d5d219c5080b9a6a17bef029331c','9778d5d219c5080b9a6a17bef029331c');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea9778d5d219c5080b9a6a17bef029331c" value="" /><br /><div class="answer" id="res9778d5d219c5080b9a6a17bef029331c"></div></form></div>
</div>
<div class="section level1" id="exercise-spiral">
<h1><a href="#exercise-spiral">Exercise: Spiral</a></h1>
<p>The new functions used here are <code>pi</code>, <code>sin</code> and <code>cos</code>.</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','33e12b30a858eb6c7c9c84966e64955e','33e12b30a858eb6c7c9c84966e64955e');"><div class="answer" id="res33e12b30a858eb6c7c9c84966e64955e"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="0.000" transform="translate(0.000,0.000)"></circle><circle r="0.105" transform="translate(0.262,0.453)"></circle><circle r="0.209" transform="translate(0.907,0.524)"></circle><circle r="0.314" transform="translate(1.571,0.000)"></circle><circle r="0.419" transform="translate(1.814,-1.047)"></circle><circle r="0.524" transform="translate(1.309,-2.267)"></circle><circle r="0.628" transform="translate(-0.000,-3.142)"></circle><circle r="0.733" transform="translate(-1.833,-3.174)"></circle><circle r="0.838" transform="translate(-3.628,-2.094)"></circle><circle r="0.942" transform="translate(-4.712,0.000)"></circle><circle r="1.047" transform="translate(-4.534,2.618)"></circle><circle r="1.152" transform="translate(-2.880,4.988)"></circle><circle r="1.257" transform="translate(0.000,6.283)"></circle><circle r="1.361" transform="translate(3.403,5.895)"></circle><circle r="1.466" transform="translate(6.348,3.665)"></circle><circle r="1.571" transform="translate(7.854,-0.000)"></circle><circle r="1.676" transform="translate(7.255,-4.189)"></circle><circle r="1.780" transform="translate(4.451,-7.709)"></circle><circle r="1.885" transform="translate(-0.000,-9.425)"></circle><circle r="1.990" transform="translate(-4.974,-8.616)"></circle><circle r="2.094" transform="translate(-9.069,-5.236)"></circle><circle r="2.199" transform="translate(-10.996,0.000)"></circle><circle r="2.304" transform="translate(-9.976,5.760)"></circle><circle r="2.409" transform="translate(-6.021,10.429)"></circle><circle r="2.513" transform="translate(0.000,12.566)"></circle></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','93db85ed909c13838ff95ccfa94cebd9','93db85ed909c13838ff95ccfa94cebd9');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea93db85ed909c13838ff95ccfa94cebd9" value="" /><br /><div class="answer" id="res93db85ed909c13838ff95ccfa94cebd9"></div></form></div>
</div>
<div class="section level1" id="coloring">
<h1><a href="#coloring">Coloring</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','0866bdf6a560f2bfd0b02f9c2794d4e2','0866bdf6a560f2bfd0b02f9c2794d4e2');"><div class="answer" id="res0866bdf6a560f2bfd0b02f9c2794d4e2"><code class="result">fill</code><code> :: </code><code class="type">Diagram -&gt; Color -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','eb9bf18ef4fcfdcf3889735f7d5211fc','eb9bf18ef4fcfdcf3889735f7d5211fc');"><div class="answer" id="reseb9bf18ef4fcfdcf3889735f7d5211fc"><code class="result">black</code><code> :: </code><code class="type">Color</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','b75af9775082fe1e6d36a2839dca92f9','b75af9775082fe1e6d36a2839dca92f9');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareab75af9775082fe1e6d36a2839dca92f9" value="circle 5 `fill` yellow" /><br /><div class="answer" id="resb75af9775082fe1e6d36a2839dca92f9"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><circle r="5.000" style="stroke-width: 0.100; stroke: black; fill: white; fill: yellow" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"></circle></svg></div></form></div>
<p>Predefined colors: <code>black</code>, <code>gray</code>, <code>white</code>, <code>red</code>, <code>green</code>, <code>blue</code>, <code>yellow</code></p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','2fa99cd4af91f87e091fea181f4e274b','2fa99cd4af91f87e091fea181f4e274b');"><div class="answer" id="res2fa99cd4af91f87e091fea181f4e274b"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="450" height="60"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 50.000 30.000)"><circle r="2.000" style="fill: black" transform="translate(0.000,0.000)"></circle><circle r="2.000" style="fill: gray" transform="translate(5.000,0.000)"></circle><circle r="2.000" style="fill: white" transform="translate(10.000,0.000)"></circle><circle r="2.000" style="fill: red" transform="translate(15.000,0.000)"></circle><circle r="2.000" style="fill: green" transform="translate(20.000,0.000)"></circle><circle r="2.000" style="fill: blue" transform="translate(25.000,0.000)"></circle><circle r="2.000" style="fill: yellow" transform="translate(30.000,0.000)"></circle></g></svg></div></form></div>
<div class="handout">
<hr />
<p>Note the type of constants (nothing special though).</p>
</div>
</div>
<div class="section level1" id="exercise-colored-no-entry-sign">
<h1><a href="#exercise-colored-no-entry-sign">Exercise: Colored “No Entry” Sign</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','4847499c6f119ef7438b6269d1de4cb1','4847499c6f119ef7438b6269d1de4cb1');"><div class="answer" id="res4847499c6f119ef7438b6269d1de4cb1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000" style="fill: red"></circle><rect height="2.000" width="8.000" x="-4.000" y="-1.000"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','ac627ab1ccbdb62ec96e702f07f6425b','ac627ab1ccbdb62ec96e702f07f6425b');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareaac627ab1ccbdb62ec96e702f07f6425b" value="" /><br /><div class="answer" id="resac627ab1ccbdb62ec96e702f07f6425b"></div></form></div>
</div>
<div class="section level1" id="rotation">
<h1><a href="#rotation">Rotation</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','4c898f9b3aa595dd09e9208a4adfe079','4c898f9b3aa595dd09e9208a4adfe079');"><div class="answer" id="res4c898f9b3aa595dd09e9208a4adfe079"><code class="result">rotate</code><code> :: </code><code class="type">Diagram -&gt; Double -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','cde9009dbc912f64d2d2134690747d22','cde9009dbc912f64d2d2134690747d22');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareacde9009dbc912f64d2d2134690747d22" value="circle 5 &lt;|&gt; rect 8 8 `rotate` 45 `move` (3,0)" /><br /><div class="answer" id="rescde9009dbc912f64d2d2134690747d22"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><circle r="5.000"></circle><rect height="8.000" transform="translate(3.000,0.000) rotate(45.000)" width="8.000" x="-4.000" y="-4.000"></rect></g></svg></div></form></div>
</div>
<div class="section level1" id="exercise-black-star">
<h1><a href="#exercise-black-star">Exercise: Black Star</a></h1>
<p>The used length is 10.</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','ff0c074dce4554db0dcf7f7707088e7a','ff0c074dce4554db0dcf7f7707088e7a');"><div class="answer" id="resff0c074dce4554db0dcf7f7707088e7a"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white; fill: black" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000) rotate(22.500)"><rect height="10.000" width="10.000" x="-5.000" y="-5.000"></rect><rect height="10.000" transform="rotate(45.000)" width="10.000" x="-5.000" y="-5.000"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','f0935e4cd5920aa6c7c996a5ee53a70f','f0935e4cd5920aa6c7c996a5ee53a70f');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareaf0935e4cd5920aa6c7c996a5ee53a70f" value="" /><br /><div class="answer" id="resf0935e4cd5920aa6c7c996a5ee53a70f"></div></form></div>
</div>
<div class="section level1" id="exercise-dial">
<h1><a href="#exercise-dial">Exercise: Dial</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','d92b6f6d170a1eeb0879f2ffe13cbb4f','d92b6f6d170a1eeb0879f2ffe13cbb4f');"><div class="answer" id="resd92b6f6d170a1eeb0879f2ffe13cbb4f"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><rect height="1.000" transform="rotate(0.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(30.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(60.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(90.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(120.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(150.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(180.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(210.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(240.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(270.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(300.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(330.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect><rect height="1.000" transform="rotate(360.000) translate(6.000,0.000)" width="1.000" x="-0.500" y="-0.500"></rect></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','2723d092b63885e0d7c260cc007e8b9d','2723d092b63885e0d7c260cc007e8b9d');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea2723d092b63885e0d7c260cc007e8b9d" value="" /><br /><div class="answer" id="res2723d092b63885e0d7c260cc007e8b9d"></div></form></div>
</div>
<div class="section level1" id="section">
<h1><a href="#section">Section</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','c69dac34f667fa017064ff8ef1950be5','c69dac34f667fa017064ff8ef1950be5');"><div class="answer" id="resc69dac34f667fa017064ff8ef1950be5"><code class="result">(~~)</code><code> :: </code><code class="type">Point -&gt; Point -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','febac134dadd6ed7fd9304843f0b415c','febac134dadd6ed7fd9304843f0b415c');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareafebac134dadd6ed7fd9304843f0b415c" value="(-5,-5) ~~ (5,5)" /><br /><div class="answer" id="resfebac134dadd6ed7fd9304843f0b415c"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><line style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)" x1="-5.000" x2="5.000" y1="-5.000" y2="5.000"></line></svg></div></form></div>
</div>
<div class="section level1" id="exercise-dandelion">
<h1><a href="#exercise-dandelion">Exercise: Dandelion</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','5fccda114d022abeeb1b6244c0f041b9','5fccda114d022abeeb1b6244c0f041b9');"><div class="answer" id="res5fccda114d022abeeb1b6244c0f041b9"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"><line transform="rotate(0.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(10.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(20.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(30.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(40.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(50.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(60.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(70.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(80.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(90.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(100.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(110.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(120.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(130.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(140.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(150.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(160.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(170.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(180.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(190.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(200.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(210.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(220.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(230.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(240.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(250.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(260.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(270.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(280.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(290.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(300.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(310.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(320.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(330.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(340.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line><line transform="rotate(350.000)" x1="0.000" x2="0.000" y1="0.000" y2="10.000"></line></g></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','2b44928ae11fb9384c4cf38708677c48','2b44928ae11fb9384c4cf38708677c48');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea2b44928ae11fb9384c4cf38708677c48" value="" /><br /><div class="answer" id="res2b44928ae11fb9384c4cf38708677c48"></div></form></div>
</div>
<div class="section level1" id="polygon">
<h1><a href="#polygon">Polygon</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','977596ca21f8d96677b7565bbdc6be8d','977596ca21f8d96677b7565bbdc6be8d');"><div class="answer" id="res977596ca21f8d96677b7565bbdc6be8d"><code class="result">polygon</code><code> :: </code><code class="type">[Point] -&gt; Diagram</code></div></form></div>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','df4b989b4e708eef236d87ef7be63608','df4b989b4e708eef236d87ef7be63608');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tareadf4b989b4e708eef236d87ef7be63608" value="polygon [(5*sin x, 5*cos x) | x &lt;- [0,pi/3..2*pi]]" /><br /><div class="answer" id="resdf4b989b4e708eef236d87ef7be63608"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><polygon points="0.000,5.000 4.330,2.500 4.330,-2.500 0.000,-5.000 -4.330,-2.500 -4.330,2.500 0.000,5.000" style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"></polygon></svg></div></form></div>
</div>
<div class="section level1" id="exercise-star">
<h1><a href="#exercise-star">Exercise: Star</a></h1>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','55c5dd41bd43387b49a380bf15b88a86','55c5dd41bd43387b49a380bf15b88a86');"><div class="answer" id="res55c5dd41bd43387b49a380bf15b88a86"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><polygon points="0.000,5.000 2.939,-4.045 -4.755,1.545 4.755,1.545 -2.939,-4.045 -0.000,5.000" style="stroke-width: 0.100; stroke: black; fill: white; fill: yellow" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000)"></polygon></svg></div></form></div>
<div class="indent"><form class="interpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','4c56ff4ce4aaf9573aa5dff913df997a','4c56ff4ce4aaf9573aa5dff913df997a');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea4c56ff4ce4aaf9573aa5dff913df997a" value="" /><br /><div class="answer" id="res4c56ff4ce4aaf9573aa5dff913df997a"></div></form></div>
</div>
<div class="section level1" id="anything-else">
<h1><a href="#anything-else">Anything Else?</a></h1>
<p>This is just a demo what can we define later.<br />The following code describes a tree with <code>n</code> levels:</p>
<pre class="sourceCode haskell"><code class="sourceCode haskell">tree n 
  <span class="fu">|</span> n <span class="fu">&lt;=</span> <span class="dv">0</span> <span class="fu">=</span> empty
  <span class="fu">|</span> <span class="fu">otherwise</span> 
      <span class="fu">=</span> <span class="fu">pack</span> (tree (n<span class="fu">-</span><span class="dv">1</span>)) <span class="fu">$</span> \t <span class="ot">-&gt;</span> 
         ((<span class="dv">0</span>,<span class="dv">0</span>)<span class="fu">~~</span>(<span class="dv">0</span>,<span class="fu">-</span><span class="dv">5</span>) <span class="fu">&lt;|&gt;</span> t <span class="ot">`rotate`</span> <span class="dv">15</span> <span class="fu">&lt;|&gt;</span> t <span class="ot">`rotate`</span> (<span class="fu">-</span><span class="dv">15</span>))
             <span class="ot">`move`</span> (<span class="dv">0</span>,<span class="dv">5</span>) <span class="ot">`scale`</span> <span class="dv">0</span><span class="fu">.</span><span class="dv">8</span></code></pre>
<p>Here is the tree with 6 levels:<br />(WARNING: you can kill your browser with more than 8 levels!)</p>
<div class="indent"><form class="resetinterpreter" action="javascript:getOne('c=eval&amp;f=Diagrams_en.hs','9f9f328b180179dbe66bcce76467a55e','9f9f328b180179dbe66bcce76467a55e');"><code class="prompt">Test&gt; </code><input class="interpreter" type="text" size="60" maxlength="1000" id="tarea9f9f328b180179dbe66bcce76467a55e" value="tree 6 `move` (0,-10)" /><br /><div class="answer" id="res9f9f328b180179dbe66bcce76467a55e"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="320" height="200"><g style="stroke-width: 0.100; stroke: black; fill: white" transform="matrix(10.000 0.000 0.000 -10.000 160.000 100.000) translate(0.000,-10.000)"><defs><g id="9f9f328b180179dbe66bcce76467a55e1"><defs><g id="9f9f328b180179dbe66bcce76467a55e2"><defs><g id="9f9f328b180179dbe66bcce76467a55e3"><defs><g id="9f9f328b180179dbe66bcce76467a55e4"><defs><g id="9f9f328b180179dbe66bcce76467a55e5"><defs><g id="9f9f328b180179dbe66bcce76467a55e6"></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e6"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e6"></use></g></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e5"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e5"></use></g></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e4"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e4"></use></g></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e3"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e3"></use></g></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e2"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e2"></use></g></g></defs><g transform="scale(0.800,0.800) translate(0.000,5.000)"><line x1="0.000" x2="0.000" y1="0.000" y2="-5.000"></line><use transform="rotate(15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e1"></use><use transform="rotate(-15.000)" xlink:href="#9f9f328b180179dbe66bcce76467a55e1"></use></g></g></svg></div></form></div>
</div>
<div><h1><a href="Overview_en.xml">Back to the main page</a></h1>
<p><em><a href="Overview_en.xml">Main page</a></em></p>
</div>
</body>
</html>

