index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Not So Terrible</title>
  <style>
    html,
    body {
      color: white;
      background-color: black;
      font-family: monospace, Helvetica, sans-serif;
    }

    .welcome-box {
      border: 2px dashed white;
      display: block;
    }

    .welcome-text {
      text-align: center;
      font-size: 30px;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .centered {
      text-align: center;
    }

    .title {
      font-size: 5em;
      margin-bottom: 0px;
    }

    .title-2 {
      font-size: 3em;
    }

    .blurb {
      font-size: 2em;
      white-space: pre-wrap;
    }

    .color-inputs {
      display: flex;
      flex-direction: row;
    }

    @media (max-width: 600px) {
      .color-inputs {
        flex-wrap: wrap;
      }

    }

    .color-input {
      padding: 1em;
    }

    .rgb-result {
      flex-grow: 1;
    }

    #rgbResult {
      width: 100%;
      height: 4em;
      border: 1px solid;
      background-color: rgb(255, 0, 0);
    }

    .color-venn-diagram-buttons {
      display: grid;
      gap: 1em;
      grid-template-columns: auto auto auto;
      padding-bottom: 1em;
    }

    .color-venn-diagram-buttons>button {
      font-size: 24px;
    }

    .triagle-fractals-buttons {
      display: grid;
      gap: 1em;
      grid-template-columns: auto auto auto;
      padding-bottom: 1em;
    }
  </style>
</head>
<script src="./WelcomeLasers/index.js" type="module"></script>
<script src="./ColorVennDiagram/index.js" type="module" defer async></script>
<script src="./TriangleFractals/index.js" type="module" defer async></script>

<body id="body">
  <h1 class="title centered">Vanilla Extract</h1>
  <p class="subtext centered">Presented by <i>Ivan Chwalik</i></p>
  <pre class="blurb centered">
    Welcome!
    I wanted to create a small space where I could enjoy the fun that are HTML Canvases.

    Nothing but clean cut Javascript doing its thing to draw bits on maps.

    Little side project:
    <a target="_blank" href="./DNA-Visualization/index.html">DNA Visualization</a>

    Link to code:
    <a target="_blank" href="https://github.com/ivan-the-terrible/ivan-the-terrible.github.io">https://github.com/ivan-the-terrible/ivan-the-terrible.github.io</a>
  </pre>
  <div class="welcome-box">
    <canvas id="welcomeLasers"></canvas>
    <noscript>
      <div class="welcome-text">
        Welcome!
      </div>
    </noscript>
  </div>

  <h2 class="title-2 centered"><u>Color Venn Diagrams</u></h2>
  <pre class="blurb centered">
      So the idea with this one was to create something to visualize the additive color phenomen
      AND sneak in a mathematical proof too.

      You have 3 circles (red, green, and blue) that you can move around and upon overlap see the additive color.

      Since we are overlapping circles to create lenses, I used <a href="http://paulbourke.net/geometry/circlesphere/#:~:text=Intersection%20of%20two%20circles">Paul Bourke's proof</a>.
      When 3 circles overlap, it creates a subset of the Reuleaux Triangle that you'll see as white.
    </pre>
  <p class="subtext centered">DISCLAIMER: Moving the circles to intersect at certain angles break how the colors work,
    but for the most part this works.
  <h2>RGB Color Input of Active Circle</h2>
  <div class="color-inputs">
    <div class="color-input">
      <h3>Red</h3>
      <p id="redValue" class="redValue">255</p>
      <input id="redInput" type="range" min="0" max="255" value="255">
    </div>
    <div class="color-input">
      <h3>Green</h3>
      <p id="greenValue" class="greenValue">0</p>
      <input id="greenInput" type="range" min="0" max="255" value="0">
    </div class="color-input">
    <div class="color-input">
      <h3>Blue</h3>
      <p id="blueValue" class="blueValue">0</p>
      <input id="blueInput" type="range" min="0" max="255" value="0">
    </div>
    <div class="rgb-result">
      <h3>Result</h3>
      <div id="rgbResult"></div>
    </div>
  </div>

  <h3>NOTE: Resizing window will reset the canvas.</h3>
  <div class="color-venn-diagram-buttons">
    <button id="btnMouseDebug">Mouse Debug</button>
    <button id="btnCircleDebug">Circle Boundary Debug</button>
    <button id="btnLensDebug">Lens Center and Intersections Debug</button>
    <button id="btnReuleauxDebug">Reuleaux Debug</button>
    <button id="btnAddCircle">Add Circle (FOR TESTING, WILL BREAK THINGS)</button>
    <button id="btnReset">Reload Canvas</button>
  </div>

  <canvas id="colorVennDiagram" height="500" style="border: 1px solid; display: block;"></canvas>

  <h2 class="title-2 centered"><u>Triangle Fractals</u></h2>
  <pre class="blurb centered">
    Think of the the classic Sierpinski triangle.

    I wanted to take it a step further, make it more interactive, and ask a question:
    can you take a fractal and determine how many triangles there are at any given level of recursion WITHOUT counting them via a loop? Can you find a formula?

    The idea is to take a triangle and split it into 3 smaller triangles, then repeat the process on each of the smaller triangles.

    I want an equation, which would be so much faster than a recursive loop. This requires leveraging Geometric Series.
  </pre>
  <div class="triagle-fractals-buttons">
    <div>
      <h3>Level of Recursion (n)</h3>
      <input id="recursionLevelInput" type="range" min="1" max="10" value="1">
      <div id="recursionLevelValue" class="recursionLevelValue">1</div>
    </div>
    <div>
      <p>Number of Triangles:</p>
      <div id="triangleCount" class="triangletriangleCount">1</div>
    </div>
  </div>
  <canvas id="sierpinskiTriangle" height="500" style="border: 1px solid; display: block;"></canvas>
  <pre class="blurb">
    Let's walk through how to determine the number of triangles at any given state.

    The initial state has 1 triangle,
    the second state has 4 triangles (sum of 5 including previous state),
    the third state has 16 triangles (sum of 21 including previous states),
    and so on.

    We can write out what each state has for the number of triangles as:
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <mn>1</mn>
      <mo>+</mo>
      <mn>4</mn>
      <mo>+</mo>
      <mn>16</mn>
      <mo>+</mo>
      <mn>64</mn>
      <mo>+</mo>
      <mn>256</mn>
      <mo>+</mo>
      <mn>1024</mn>
      <mo>+ ...</mo>
    </math>
    Now we can have some fun with this infinite series.

    This series could be rewritten as:
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <mn>1</mn>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>8</mn>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>16</mn>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>32</mn>
        <mn>2</mn>
      </msup>
      <mo>+ ...</mo>
    </math>
    <math  display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <mn>1</mn>
      <mo>+</mo>
      <mrow>
        <mn>1</mn>
        <mo>(</mo>
        <mn>4</mn>
        <mo>)</mo>
      </mrow>
      <mo>+</mo>
      <mrow>
        <mn>4</mn>
        <mo>(</mo>
        <mn>4</mn>
        <mo>)</mo>
      </mrow>
      <mo>+</mo>
      <mrow>
        <mn>16</mn>
        <mo>(</mo>
        <mn>4</mn>
        <mo>)</mo>
      </mrow>
      <mo>+</mo>
      <mrow>
        <mn>64</mn>
        <mo>(</mo>
        <mn>4</mn>
        <mo>)</mo>
      </mrow>
      <mo>+</mo>
      <mrow>
        <mn>256</mn>
        <mo>(</mo>
        <mn>4</mn>
        <mo>)</mo>
      </mrow>
      <mo>+ ...</mo>
    </math>
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mn>4</mn>
        <mn>0</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>1</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>3</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>4</mn>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>4</mn>
        <mn>5</mn>
      </msup>
      <mo>+ ...</mo>
    </math>
    <math xmls="http://www.w3.org/1998/Math/MathML" display="block">
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>0</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>1</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>2</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>3</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>4</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mo>(</mo>
          <mrow>
            <mn>5</mn>
          </mrow>
          <mo>)</mo>
        </mrow>
      </msup>
      <mo>+ ...</mo>
    </math>

    These can be rewritten with summation notations as:
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
        <mrow>
          <mo>∞</mo>
        </mrow>
      </munderover>
      <msup>
        <mn>4</mn>
        <mi>n</mi>
      </msup>
      <mo>=</mo>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
        <mrow>
          <mo>∞</mo>
        </mrow>
      </munderover>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mi>n</mi>
        </mrow>
      </msup>
    </math>
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mn>4</mn>
        <mi>n</mi>
      </msup>
      <mo>=</mo>
      <msup>
        <mrow>
          <mo>(</mo>
          <msup>
            <mn>2</mn>
            <mn>2</mn>
          </msup>
          <mo>)</mo>
        </mrow>
        <mi>n</mi>
      </msup>
      <mo>=</mo>
      <msup>
        <mn>2</mn>
        <mrow>
          <mn>2</mn>
          <mi>n</mi>
        </mrow>
      </msup>
      </math>
    </math>
    The sum of a Geometric Series is well known to be:
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mi>S</mi>
        <mi>n</mi>
      </msub>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mi>a</mi>
          <mrow>
            <mo>(</mo>
            <msup>
              <mi>r</mi>
              <mi>n</mi>
            </msup>
            <mo>-</mo>
            <mn>1</mn>
            <mo>)</mo>
          </mrow>
        </mrow>
        <mrow>
          <mi>r</mi>
          <mo>-</mo>
          <mn>1</mn>
        </mrow>
      </mfrac>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mi>a</mi>
          <mrow>
            <mo>(</mo>
            <mn>1</mn>
            <mo>-</mo>
            <msup>
              <mi>r</mi>
              <mi>n</mi>
            </msup>
            <mo>)</mo>
          </mrow>
        </mrow>
        <mrow>
          <mn>1</mn>
          <mo>-</mo>
          <mi>r</mi>
        </mrow>
      </mfrac>
    </math>
    when a is the first term and r is the common ratio.

    In our case, a = 1 and r = 4.

    I prefer to use the left side. Inputting our equation we get:
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
      <mfrac>
        <mrow>
          <msup>
            <mn>4</mn>
            <mi>n</mi>
          </msup>
          <mo>-</mo>
          <mn>1</mn>
        </mrow>
        <mn>3</mn>
      </mfrac>
    </math>
    And this is exactly what I use in the code.
  </pre>
</body>

</html>