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

    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.
  

    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:
    $$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.