. The same formula is used for the <code>y</code> position.</p>

    <pre class="text-width"><code>rect(width - 100 - 25, height - 100 - 25, 100, 100);</code></pre>

  </section>

  <section data-type="sect1">

    <h1>Size</h1>

    <p>By increasing the size of important shapes and decreasing the size of less significant shapes, you can bring clarity to a design. This is a pattern we encounter daily in everything from traffic signs to headlines in an article.</p>

    <div class="grid">
      {% p5 shape/f