Vanilla Extract

Presented by Ivan Chwalik

    Welcome!
    I wanted to create a small space where I could enjoy the fun that are HTML Canvases.

    There will be no libraries here.
    Nothing but clean cut Javascript doing its thing to draw bits on maps.

    Link to code:
    https://github.com/ivan-the-terrible/ivan-the-terrible.github.io
  

Color Venn Diagrams

      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 Paul Bourke's proof.
      When 3 circles overlap, it creates a subset of the Reuleaux Triangle that you'll see as white.
    

DISCLAIMER: Moving the circles to intersect at certain angles break how the colors work, but for the most part this works.

RGB Color Input of Active Circle

NOTE: Resizing window will reset the canvas.

Triangle Fractals

    This visualization is the classic Sierpinski triangle, but I wanted to take it a step further and make it more
    interactive.

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

    The total number of triangles currently calculated is as if you also fractaled the interior black triangles.

    I also wanted to be able to determine how many triangles there are at any given level of recursion WITHOUT counting from a loop.

    I want an equation, which would be so much faster than a recursive loop. This requires leveraging Geometric Series.
  

    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,
    the third state has 16 triangles,
    and so on.

    We can write out what each state has for the number of triangles as:
    $$1+4+16+64+256+1024+\; ...$$
    Now we can have some fun with this infinite series.

    This series could be rewritten as:
    $$1+2^2+4^2+8^2+{16}^2+{32}^2+\; ...$$
    $$1+1\left(4\right)+4\left(4\right)+16\left(4\right)+64\left(4\right)+256\left(4\right)+\; ...$$
    $$4^0+4^1+4^2+4^3+4^4+4^5+\; ...$$
    $$2^{2\left(0\right)}+2^{2\left(1\right)}+2^{2\left(2\right)}+2^{2\left(3\right)}+2^{2\left(4\right)}+2^{2\left(5\right)}+\; ...$$

    These can be rewritten with summation notations as:
    $$\sum _{n=0}^{\infty }{4}^n=\sum _{n=0}^{\infty }{2}^{2n}$$
    $$4^n={\left(2^2\right)}^n=2^{2n}$$
    
    The sum of a Geometric Series is well known to be:
    $$S_n=\frac{a(r^n-1)}{r-1}=\frac{a(1-r^n)}{1-r}$$
    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:
    $$\frac{4^n-1}{3}$$
    And this is exactly what I use in the code.