gbrault
/
jupytersketcher
cermin dari https://github.com/gbrault/jupytersketcher.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
							

<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      <link rel="shortcut icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.1, mkdocs-material-5.4.0">
    
    
        <title>Learning by Example - Jypyter Sketcher</title>
      
    
      <link rel="stylesheet" href="../assets/stylesheets/main.fe0cca5b.min.css">
      
      
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
        <style>body,input{font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace}</style>
      
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#a-language-to-describe-a-sketch" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid" aria-label="Header">
    <a href=".." title="Jypyter Sketcher" class="md-header-nav__button md-logo" aria-label="Jypyter Sketcher">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>

    </a>
    <label class="md-header-nav__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
    </label>
    <div class="md-header-nav__title" data-md-component="header-title">
      
        <div class="md-header-nav__ellipsis">
          <span class="md-header-nav__topic md-ellipsis">
            Jypyter Sketcher
          </span>
          <span class="md-header-nav__topic md-ellipsis">
            
              Learning by Example
            
          </span>
        </div>
      
    </div>
    
      <label class="md-header-nav__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
      </label>
      
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
      </label>
      <button type="reset" class="md-search__icon md-icon" aria-label="Clear" data-md-component="search-reset" tabindex="-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
  </nav>
</header>
    
    <div class="md-container" data-md-component="container">
      
        
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="Jypyter Sketcher" class="md-nav__button md-logo" aria-label="Jypyter Sketcher">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54z"/></svg>

    </a>
    Jypyter Sketcher
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
  <li class="md-nav__item">
    <a href=".." title="Home" class="md-nav__link">
      Home
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../about/" title="About" class="md-nav__link">
      About
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../presentation/" title="Presentation" class="md-nav__link">
      Presentation
    </a>
  </li>

    
  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    
    
      <label class="md-nav__link md-nav__link--active" for="__toc">
        Learning by Example
        <span class="md-nav__icon md-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
        </span>
      </label>
    
    <a href="./" title="Learning by Example" class="md-nav__link md-nav__link--active">
      Learning by Example
    </a>
    
      
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
      </span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#a-language-to-describe-a-sketch" class="md-nav__link">
    A language to describe a sketch
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
    <nav class="md-nav" aria-label="Example">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#the-final-sketch" class="md-nav__link">
    The final sketch
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#support-files" class="md-nav__link">
    Support files
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-yaml-definition" class="md-nav__link">
    The yaml definition
  </a>
  
    <nav class="md-nav" aria-label="The yaml definition">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#libraries-construction-variables-frame" class="md-nav__link">
    Libraries, Construction Variables, Frame
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-body-object" class="md-nav__link">
    The body object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-plan-object" class="md-nav__link">
    The plan object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-friction-sketch" class="md-nav__link">
    The friction sketch
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-the-parser" class="md-nav__link">
    Using the parser
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#friction-sketch-hierarchy" class="md-nav__link">
    "friction" sketch hierarchy
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
    
  </li>

    
  <li class="md-nav__item">
    <a href="../shapereference/" title="Shapes Reference" class="md-nav__link">
      Shapes Reference
    </a>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
      </span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#a-language-to-describe-a-sketch" class="md-nav__link">
    A language to describe a sketch
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
    <nav class="md-nav" aria-label="Example">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#the-final-sketch" class="md-nav__link">
    The final sketch
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#support-files" class="md-nav__link">
    Support files
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-yaml-definition" class="md-nav__link">
    The yaml definition
  </a>
  
    <nav class="md-nav" aria-label="The yaml definition">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#libraries-construction-variables-frame" class="md-nav__link">
    Libraries, Construction Variables, Frame
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-body-object" class="md-nav__link">
    The body object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-plan-object" class="md-nav__link">
    The plan object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#the-friction-sketch" class="md-nav__link">
    The friction sketch
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-the-parser" class="md-nav__link">
    Using the parser
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#friction-sketch-hierarchy" class="md-nav__link">
    "friction" sketch hierarchy
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                  <h1>Learning by Example</h1>
                
                <h2 id="a-language-to-describe-a-sketch">A language to describe a sketch</h2>
<p>Pysketcher initial version <a href="">HPL Pysketcher</a> enable sketch definition in python. HPL is showing the hierachical nature of sketches. This is implemented via the Composition function. One can further grasp this using the graphviz_dot function applied to discover the composition herarchy implemented as a graphviz image <a href="#friction-sketch-hierarchy">see The hierarchy of the "friction" sketch</a> at the end of this page.</p>
<p>Due to the hierarchical nature of sketches, it is quite straightforward to think about using yaml as the syntax for defining a sketch.</p>
<p>Benefits are the following:</p>
<ul>
<li>Leaner sketch writing as only data relevant to the context needs to be defined</li>
<li>A more straightforward reading for the same reason</li>
<li>A more robust sketch definition <ul>
<li>The same set of rules is applied to generate a sketch</li>
<li>No further python idiom is be intermingled as opposed to the case of python defined sketches</li>
<li>Don't make me wrong! Data defined versus program defined there is no winner, it's just a matter of context</li>
</ul>
</li>
</ul>
<h2 id="example">Example</h2>
<p>This example provides the yaml content to define the Dry Friction case</p>
<h3 id="the-final-sketch">The final sketch</h3>
<p><img alt="dryfriction sketch" src="../images/dryfriction.svg" /></p>
<p>An inclined plan (the A-B edge) supports a blue rectangle which is dragged down by gravity. The plan makes an angle <span><span class="MathJax_Preview">\theta</span><script type="math/tex">\theta</script></span> with the ground level. Sketch implementation notebook includes a controller enabling the <span><span class="MathJax_Preview">\theta</span><script type="math/tex">\theta</script></span> angle to change. The whole plan, including the body, can rotate arround point B.</p>
<h3 id="support-files">Support files</h3>
<p>The example we are developing now is based upon the "Dry Friction mockup" notebook</p>
<ul>
<li>the rendered html version of the notbook can be viewed <a href="../resources/DryFriction.html">here</a></li>
<li>the notebook can be download <a href="../resources/DryFriction.ipynb">here</a></li>
</ul>
<h3 id="the-yaml-definition">The yaml definition</h3>
<p>Sketcher language is defined as a yaml compliant file or string. The yaml file is a dictionnary of "objects". Objects can be regular python objects or sketcher objects.
A skertcher object is composed as follow:</p>
<ul>
<li><strong>a formula</strong>: it's a leaf object, like Rectangle, Circle, Line etc or a composition</li>
<li><strong>a style list</strong>: line or fill colors, line stroke... declared as a yaml hierarchy</li>
<li><strong>a transformation list</strong>: the defined object can be transformed using sketcher transformation: translation, rotation...</li>
</ul>
<p>As a general rule, a new object suppose all parameters to be defined before they are used to construct it.</p>
<p><strong>For example, you can create a circle if the center and the radius have been defined earlier in the file.</strong></p>
<p>The general layout of a sketcher file is as follow:</p>
<ul>
<li><strong>Libraries, Construction Variables, Frame</strong><ul>
<li>declaration of the libraries used by the objects further declared: at least pysketcher is mandatory</li>
<li>various global variable which encompass the "Construction" variables which define the object main physical dimensions, positions...</li>
<li>some "actions" corresponding to executable python sentences<ul>
<li>One mandatory action is the setting of the drawing frame (drawing_tool.set_coordinate_system): it must be declared before any other pysketcher object is used.</li>
<li>Other use case of action is the setting of global parameters like default line color: (drawing_tool.set_linecolor('black')) for example</li>
</ul>
</li>
<li>this is stored in the head string thereafter</li>
</ul>
</li>
<li><strong>Sketcher Objects</strong><ul>
<li>Usually starting with the declaration of Pysketcher leaf objects (Geometry object like Line, Circle, Rectangle...)</li>
<li>May be aggregated using the composition object</li>
<li>Composition can be made of composition object (recursive behaviour)</li>
<li>Grouping leafs and composition will be further used to apply transformation latter on (based on the "physics")</li>
<li>The example presents three group of objects<ul>
<li>The body object</li>
<li>The plan object</li>
<li>The friction main object</li>
</ul>
</li>
<li>The plan includes the body</li>
<li>The friction includes the plan (that will be able to rotate as a group) and the ground (will stay fixed)</li>
</ul>
</li>
</ul>
<h4 id="libraries-construction-variables-frame">Libraries, Construction Variables, Frame</h4>
<pre><code class="python">head = &quot;&quot;&quot;\
libraries: [&quot;from math import tan, radians, sin, cos&quot;,&quot;from pysketcher import *&quot;]
fontsize: 18
g: 9.81              # constant gravity
theta: 30.0          # inclined plane angle
L: 10.0              # sketch sizing parameter
a: 1.0               #
xmin: 0.0            # sketech min Abscissa
ymin: -3.0           # sketech min Ordinate     
rl: 2.0              # rectangle width
rL: 1.0              # rectangle length
setframe:            # sketch setup
    action: &quot;drawing_tool.set_coordinate_system(xmin=xmin-L/5, xmax=xmin+1.5*L,ymin=ymin, ymax=ymin+1.5*L,instruction_file='tmp_mpl_friction.py')&quot;
setblackline:        # default frame values and actions
    action: &quot;drawing_tool.set_linecolor('black')&quot;
B: point(a+L,0)                      # wall right end
A: point(a,tan(radians(theta))*L)    # wall left end
normal_vec: point(sin(radians(theta)),cos(radians(theta)))     # Vector normal to wall
tangent_vec: point(cos(radians(theta)),-sin(radians(theta)))   # Vector tangent to wall
help_line: Line(A,B)                 # wall line
x: a + 3*L/10.
y: help_line(x=x)    
contact: point(x, y)    
c: contact + rL/2*normal_vec
&quot;&quot;&quot;
</code></pre>

<h4 id="the-body-object">The body object</h4>
<pre><code class="python">body=&quot;&quot;&quot;\
rectangle: 
    formula: Rectangle(contact, rl, rL)
    style:
        linecolor: blue
        filled_curves: blue
    transform: [&quot;rotate(-theta, contact)&quot;,
                &quot;translate(-rl/2*tangent_vec)&quot;]
N: 
    formula: Force(contact - rl*normal_vec, contact, r'$N$', text_pos='start')
    style:
        linecolor: black
wheel: 
    formula: &quot;Composition({'outer': rectangle})&quot;   
    style:
        shadow: 1
mc:
    formula: Text(r'$c$', c)
body: 
    formula: &quot;Composition({'wheel': wheel, 'N': N, 'mc': mc})&quot;
    style:
        linecolor: black
&quot;&quot;&quot;
</code></pre>

<h4 id="the-plan-object">The plan object</h4>
<pre><code class="python">plan=&quot;&quot;&quot;\
mB:
    formula: Text(r'$B$',B)
mA:
    formula: Text(r'$A$', A)
wall: 
    formula: Wall(x=[A[0], B[0]], y=[A[1], B[1]], thickness=-0.25,transparent=False)
    style:
        linecolor: black    
x_const: 
    formula: Line(contact, contact + point(0,4))
    style:
        linestyle: dotted
    transform: rotate(-theta, contact)
x_axis: 
    formula: &quot;Axis(start=contact+ 2*rl*normal_vec, length=2*rl,label='$x$', rotation_angle=-theta)&quot;
plan: 
    formula: &quot;Composition({'body': body, 'inclined wall': wall, 'x start': x_const, 'x axis': x_axis, 'mA': mA, 'mB': mB})&quot;
&quot;&quot;&quot;
</code></pre>

<h4 id="the-friction-sketch">The friction sketch</h4>
<pre><code class="python">friction=&quot;&quot;&quot;\
mg: 
    formula: Gravity(c, rl, text='$Mg$')
    style:
        linecolor: black
angle: 
    formula: &quot;Arc_wText(r'$&lt;bslash&gt;theta$', center=B, radius=3, start_angle=180-theta, arc_angle=theta, fontsize=fontsize)&quot;
    style:
        linecolor: black
        linewidth: 1
ground: 
     formula: Line((B[0]-L/10., 0), (B[0]-L/2.,0))
     stlye:
         linecolor: black
         linestyle: dashed
         linewidth: 1
friction: 
    formula: &quot;Composition({'plan': plan, 'ground': ground, 'mg': mg, 'angle': angle})&quot;
&quot;&quot;&quot;
</code></pre>

<h3 id="using-the-parser">Using the parser</h3>
<p>To parse the above example, the following code do the job.
1. the head must be used first as all the other bits needs one or more variable it defines.
2. After, any other string can be parsed, the order just need to respect precedence (if one object uses another one it must be parsed after)
3. this setting allows naturally a modular definition of sketch objects</p>
<pre><code class="python">myfig = {}
sketchParse(head,myfig)
sketchParse(body,myfig)
sketchParse(plan,myfig)
sketchParse(friction,myfig)
</code></pre>

<h3 id="friction-sketch-hierarchy">"friction" sketch hierarchy</h3>
<p><img alt="" src="../images/dotdryfriction.svg" /></p>
                
              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
        
          <a href="../presentation/" title="Presentation" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-footer-nav__button md-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
            </div>
            <div class="md-footer-nav__title">
              <div class="md-ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Presentation
              </div>
            </div>
          </a>
        
        
          <a href="../shapereference/" title="Shapes Reference" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-footer-nav__title">
              <div class="md-ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                Shapes Reference
              </div>
            </div>
            <div class="md-footer-nav__button md-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
        Made with
        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
          Material for MkDocs
        </a>
      </div>
      
    </div>
  </div>
</footer>
      
    </div>
    
      <script src="../assets/javascripts/vendor.d710d30a.min.js"></script>
      <script src="../assets/javascripts/bundle.b39636ac.min.js"></script><script id="__lang" type="application/json">{"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents"}</script>
      
      <script>
        app = initialize({
          base: "..",
          features: [],
          search: Object.assign({
            worker: "../assets/javascripts/worker/search.a68abb33.min.js"
          }, typeof search !== "undefined" && search)
        })
      </script>
      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
      
    
  </body>
</html>