index.html

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

<head>
    <title>Visualize It | Home Page</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="View Scientific Concepts at work. Anytime. Anywhere">
    <meta name="keywords" content="interactive, visualization, simulation, science, education">
    <meta name="google-site-verification" content="9GighFXREm-tIw0hymUa7X3tHRb1OR31qdV__bw2bwc" />

    <!-- Materialize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Field toggle Script -->
    <script src="index.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
</head>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-M95CKRP8HB"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { window.dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-M95CKRP8HB');
</script>

<body>
    <nav class="nav-extended" style="background: black; margin-top: 0mm">
        <div class="nav-wrapper">
            <h1 id="main-heading">Visualize It</h1>
        </div>
        <div class="nav-content">
            <ul class="tabs tabs-transparent tabs-fixed-width">
                <li class="tab"><a class="active" href="#" style="font-size:larger;">Home</a></li>
                <li class="tab"><a href="about.html" style="font-size:larger;">About</a></li>
            </ul>
        </div>
    </nav>

    <br>

    <div class="text">
        <div class="container" style="width:90%">
            <center>
                <b class="flow-text">View scientific concepts at work. Anytime. Anywhere.</b>
                <br>
                <em>For comments, feedback and topic suggestions, please send a mail to <a
                        href="mailto:chanrt.visualize@gmail.com">chanrt.visualize@gmail.com</a> or tweet me <a
                        href="https://twitter.com/_chanrt_">@_chanrt_</a></em>

                <br> <br>
                <b>Filter by Subject:</b>
                <br>
                <div class="row">
                    <div class="col s12 l3">
                        <label>
                            <input id="physics-check" type="checkbox" class="filled-in" checked="checked"
                                onchange="toggle('physics')" />
                            <span class="filter-type">Physics</span>
                            <!--
                                12 pages:
                                Ising Model
                                Special Relativity
                                Spring Motion
                                Lorenz System
                                Nuclear Fusion
                                Double Pendulum
                                Quantum Computing
                                Simple Fluid
                                Projectile Motion
                                Stroboscopic Effect
                                Linear Momentum
                                Planetary Motion
                            -->
                        </label>
                    </div>
                    <div class="col s12 l3">
                        <label>
                            <input id="math-check" type="checkbox" class="filled-in" checked="checked"
                                onchange="toggle('math')" />
                            <span class="filter-type">Mathematics</span>
                            <!--
                                8 pages:
                                Trigonometric Functions
                                Mandelbrot Fractal
                                Bernoulli Percolation
                                Fourier Series
                                Hilbert Curve
                                Linear Transforms
                                Porous Percolation
                                Random Walks
                            -->
                        </label>
                    </div>
                    <div class="col s12 l3">
                        <label>
                            <input id="computer-check" type="checkbox" class="filled-in" checked="checked"
                                onchange="toggle('computer')" />
                            <span class="filter-type">Computer Science</span>
                            <!--
                                13 pages:
                                Ant Colony Optimization
                                Sorting Algorithms
                                Hopfield Networks
                                Gradient Descent
                                Image Filters
                                Polynomial Regression
                                Clustering
                                Genetic Algorithm
                                Maze Generation
                                Monte-Carlo
                                Bezier Curve
                                Lexical Analysis
                                Travelling Salesman
                            -->
                        </label>
                    </div>
                    <div class="col s12 l3">
                        <label>
                            <input id="complex-check" type="checkbox" class="filled-in" checked="checked"
                                onchange="toggle('complex')" />
                            <span class="filter-type">Complex Systems</span>
                            <!--
                                12 pages:
                                Firefly Synchronization
                                Game of Life
                                Schelling's Model
                                Lotka Volterra
                                Small-World Networks
                                Collective Behaviour
                                Public Goods
                                Reaction Diffusion
                                Pedestrian Dynamics
                                Contact Process
                                Directed Percolation
                                Vicsek Model
                            -->
                        </label>
                    </div>
                </div>
            </center>

            <hr>
            <br>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/ising_model.webp" alt="ising model">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Ising Model</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        Explore the Ising Model of Ferromagnetism. Tweak parameters like temperature and interaction
                        strength, and see how the system evolves in real-time! Learn how the simulation works.
                    </p>
                    <center>
                        <a href="ising_model/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>


            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/trig_functions.webp" alt="trigonometric functions">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Trigonometric Functions</h2>
                    <center>
                        <span>#mathematics #visualization</span>
                    </center>
                    <p class="flow-text">
                        Does trigonometry still bring in the sweats? Or do you want to intuitively understand it?
                        Whatever be the case, this interactive visualization provides a highly intuitive and visual
                        understanding of all six Trigonometric functions, their properties and identities.
                    </p>
                    <center>
                        <a href="trig_functions/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/ant_colony.webp" alt="ant colony optimization">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Ant Colony</h2>
                    <center>
                        <span>#computer-science #simulation</span>
                    </center>
                    <p class="flow-text">
                        Ant Colony Optimization (ACO) is an interesting way to obtain near-optimum solutions to the
                        Travelling
                        Salesman Problem (TSP). This simulation allows you to change the optimization parameters in
                        real-time to notice their effects
                    </p>
                    <center>
                        <a href="ant_colony_optimization/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/firefly_sync.webp" alt="firefly synchronization">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Firefly Sync</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        Fireflies have an internal clock on the basis of which they emit light periodically. However,
                        they manage to sync up their cycles by observing their neighbours and nudging their phase
                        accordingly. See this mechanism in action!
                    </p>
                    <center>
                        <a href="firefly_synchronization/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/special_relativity.webp" alt="special relativity">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Special Relativity</h2>
                    <center>
                        <span>#physics #visualization</span>
                    </center>
                    <p class="flow-text">
                        Find out what Einstein's 1905 brain-child is about. Make your vehicle move as fast as you want
                        (but within physical limits) and view Time dilation, Length contraction and Relativistic Doppler
                        Effect in action.
                    </p>
                    <center>
                        <a href="special_relativity/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/sorting_algos.webp" alt="sorting algorithms">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Sorting Algorithms</h2>
                    <center>
                        <span>#computer-science #visualization</span>
                    </center>
                    <p class="flow-text">
                        View the working of 7 sorting algorithms, step by step, alongside some juicy info! This
                        simulation also shows you operational parameters like number of array accesses and comparisons.
                    </p>
                    <center>
                        <a href="sorting_algos/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/collective_behaviour.webp" alt="collective behaviour">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Collective Behaviour</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        Simple interactions like repulsion, orientation and attraction, can operate to different extents
                        adn give rise to a variety of collective behaviours. Learn about swarms, swirls and flocks!
                    </p>
                    <center>
                        <a href="collective_behaviour/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/conways_game.webp" alt="conway's game of life">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Game of Life</h2>
                    <center>
                        <span>#automaton #simulation</span>
                    </center>
                    <p class="flow-text">
                        Can a simple set of rules give rise to complex behaviour? Conway's Game of Life is also based on
                        a simple set of rules, put forth by John Conway in 1960s. From simple patterns like Gliders, to
                        self replicating entities and Turing complete computers have been devised in Conway's universe.
                    </p>
                    <center>
                        <a href="conway_game/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/hopfield.webp" alt="hopfield">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Hopfield Networks</h2>
                    <center>
                        <span>#computer-science #visualization</span>
                    </center>
                    <p class="flow-text">
                        Hopfield networks are simple constructs that are capable of learning and recalling patterns
                        dynamically. Learn about how these processes are implemented, alongside an actual Hopfield
                        network!
                    </p>
                    <center>
                        <a href="hopfield_networks/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/schelling_model.webp" alt="schelling's model">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Schelling's Model</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        Schelling's Model is a simple agent-based model that replicates the segregation that takes place
                        in populations with different backgrounds or opinions. This interactive simulation allows you to
                        vary different parameters!
                    </p>
                    <center>
                        <a href="schelling_model/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/gradient_descent.webp" alt="gradient descent">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Gradient Descent</h2>
                    <center>
                        <span>#computer-science #machine-learning</span>
                    </center>
                    <p class="flow-text">
                        The Gradient Descent algorithm is the powerhouse of machine learning. Regression models as well
                        as neural networks use this algorithm to optimize their working according to the training
                        examples. Experience it first-hand!
                    </p>
                    <center>
                        <a href="gradient_descent/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/mandelbrot_fractal.webp" alt="mandelbrot fractal">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Mandelbrot Fractal</h2>
                    <center>
                        <span>#mathematics</span>
                    </center>
                    <p class="flow-text">
                        The Mandelbrot Fractal ought to erase any doubts about the beauty of Math. It is amazing how a
                        simple iteration (f(z) = z<sup>2</sup> + c) can give rise to such complex, intricate,
                        self-repeating patterns. Zoom in and explore the beautiful sights!
                    </p>
                    <center>
                        <a href="mandelbrot_fractal/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/lotka_volterra.webp" alt="Lotka Volterra">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Lotka Volterra</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        The Lotka Volterra Model is a simple predator-prey model that can be used to study the
                        interactions between two species. This simulation is a spatial version of the same model. Vary
                        the model parameters and see how the populations of the species change over time.
                    </p>
                    <center>
                        <a href="lotka_volterra/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/spring_motion.webp" alt="spring motion">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Spring Motion</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        Springs: the simplest non-linear physical system whose working is intuituvely obvious. Vary all
                        parameters, from spring constant to dispersion! View damped oscillations in action!
                    </p>
                    <center>
                        <a href="spring_motion/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/bernoulli_percolation.webp"
                        alt="bernoulli percolation">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Bernoulli Percolation</h2>
                    <center>
                        <span>#mathematics #visualization</span>
                    </center>
                    <p class="flow-text">
                        Bernoulli percolation is the simplest model that features a phase transition. This interactive
                        simulation allows you to witness this phase transition in real time.
                    </p>
                    <center>
                        <a href="bernoulli_percolation/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/small_world_networks.webp" alt="small-world networks">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Small-World Networks</h2>
                    <center>
                        <span>#complex-systems #visualization</span>
                    </center>
                    <p class="flow-text">
                        Small-world networks represent the middle-ground between regular lattices and random graphs.
                        They have many interesting properties, and a lot of real-world interactions resemble small-world
                        networks. Explore this topic in an interactive manner!
                    </p>
                    <center>
                        <a href="small_world_networks/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/fourier.webp" alt="fourier series">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Fourier Series</h2>
                    <center>
                        <span>#mathematics #visualization</span>
                    </center>
                    <p class="flow-text">
                        The concept of Fourier Transforms and Series are pervasive in the fields of science and
                        technology, yet its understanding is impeded due to its cryptic nature. This visualization
                        attempts to rectify that, by providing a framework to better understand this topic.
                    </p>
                    <center>
                        <a href="fourier_series/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/image_filters.webp" alt="image filters">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Image Filters</h2>
                    <center>
                        <span>#computer-science</span>
                    </center>
                    <p class="flow-text">
                        Simple matrix operations on RGB values of an image can transform various aspects of the image or
                        yield useful information. this interactive visualization allows you to apply your own kernels to
                        a collection of images.
                    </p>
                    <center>
                        <a href="image_filters/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/lorenz_system.webp" alt="lorenz system">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Lorenz System</h2>
                    <center>
                        <span>#mathematics #simulation</span>
                    </center>
                    <p class="flow-text">
                        Ever come across the term "Butterfly Effect" in the context of chaos? It is generated by the
                        Lorenz system of equations. Vary the parameters a little and see the trajectory change a lot!
                        Come across the set of equations that generate these patterns.
                    </p>
                    <center>
                        <a href="lorenz_system/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/nuclear_fusion.webp" alt="nuclear fusion">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Nuclear Fusion</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        This simulation attempts to recreate the conditions under which Nuclear fusion takes place.
                        Efficient and sustainable nuclear fusion will be revolutionary to our energy sector and change
                        the future of our species!
                    </p>
                    <center>
                        <a href="nuclear_fusion/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/vicsek_model.webp" alt="Vicsek Model">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Vicsek Model</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        Vicsek model is a simple agent-based model that describes the behaviour of self-propelled
                        entities. This model is also known to show a phase transition from disordered has to ordered
                        fluid. Fiddle around with this interactive simulation.
                    </p>
                    <center>
                        <a href="vicsek_model/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/double_pendulum.webp" alt="double pendulum">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Double Pendulum</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        Double pendulum is a simple system that exhibits deterministic chaos. This simulation showcases
                        why it is meaningless to predict long-term behaviour of chaotic systems.
                    </p>
                    <center>
                        <a href="double_pendulum/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/public_goods.webp" alt="public goods">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Public Goods</h2>
                    <center>
                        <span></span>
                    </center>
                    <p class="flow-text">
                        A public good (eg: lighthouse) is any service that is non-excludable and non-exhaustible. Yet,
                        one requires resources for their establishment and maintenance. This simulation explores a
                        circumstance when public goods can be maintained even when free-riders are untraceable
                    </p>
                    <center>
                        <a href="public_goods/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/polynomial_regression.webp"
                        alt="polynomial regression">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Polynomial Regression</h2>
                    <center>
                        <span>#computer-science #machine-learning</span>
                    </center>
                    <p class="flow-text">
                        Polynomial Regression is the process of fitting a bunch of points to a polynomial of a given
                        order. It forms the basis for several Machine Learning algorithms. This simulation allows you to
                        define your own points and find the best fit using the polynomial of the given degree.
                    </p>
                    <center>
                        <a href="polynomial_regression/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/reaction_diffusion.webp" alt="reaction diffusion">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Reaction Diffusion</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        A complex spatio-temporal model known to generate beautiful and intricate patterns! Reaction
                        Diffusion systems have various uses in chemistry, physics, biology and ecology. This simulation
                        allows you to draw on the canvas and watch both reaction and diffusion in action!
                    </p>
                    <center>
                        <a href="reaction_diffusion/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/hilbert_curve.webp" alt="hilbert curve">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Hilbert Curve</h2>
                    <center>
                        <span>#mathematics</span>
                    </center>
                    <p class="flow-text">
                        Is it possible to traverse through entire space with a line that doesn't cross itself? Hilbert
                        curve is a 2D space filling curve that does the job. Increase the order to see the curve
                        progressively fill up the entire space.
                    </p>
                    <center>
                        <a href="hilbert_curve/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/pedestrian_dynamics.webp" alt="pedestrian dynamics">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Pedestrian Dynamics</h2>
                    <center>
                        <span>#complex-systems #simulation</span>
                    </center>
                    <p class="flow-text">
                        This simulation showcases how lane formation as well as phantom traffic james happen in a crowd
                        of pedestrians who merely want to avoid crashing into each other. Explore how bias in direction
                        and variance in speed affects the flow of the crowd.
                    </p>
                    <center>
                        <a href="pedestrian_dynamics/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/quantum_computing.webp" alt="quantum computing">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Quantum Computing</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        Quantum Computers are expected to beat classical computers at solving certain classes of
                        problems. They can easily simulate quantum systems too. In this simulation, play with the
                        building blocks of Quantum Circuits!
                    </p>
                    <center>
                        <a href="quantum_logic/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/clustering.webp" alt="k-means clustering">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Clustering</h2>
                    <center>
                        <span>#computer-science #machine-learning</span>
                    </center>
                    <p class="flow-text">
                        Explore the working of k-means clustering algorithm, with a hands-on simulation. This algorithm
                        is widely used in unsupervised machine learning.
                    </p>
                    <center>
                        <a href="clustering/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/contact_process.webp" alt="contact process">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Contact Process</h2>
                    <center>
                        <span>#automaton #simulation</span>
                    </center>
                    <p class="flow-text">
                        A randomized cellular automaton that is widely used in percolation theory and extinction theory,
                        to approximate mean-field models in various fields of science.
                    </p>
                    <center>
                        <a href="contact_process/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/genetic_algo.webp" alt="genetic algorithm">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Genetic Algorithm</h2>
                    <center>
                        <span>#computer-science #simulation</span>
                    </center>
                    <p class="flow-text">
                        View the process behind the diversity of lifeforms we see today! This simulation utilizes an
                        Evolutionary Algorithm to select the boid with the best genes. Change the positions of the
                        source, target and the obstacles to build your own custom worlds!
                    </p>
                    <center>
                        <a href="natural_selection/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/simple_fluid.webp" alt="simple fluid">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Simple Fluid</h2>
                    <center>
                        <span>#physics #visualization</span>
                    </center>
                    <p class="flow-text">
                        This is an attempt to simulate fluids for educational and aesthetic purposes. Obtain a
                        simplified understanding of the Navier-Stokes equation!
                    </p>
                    <center>
                        <a href="simple_fluid/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/linear_transformations.webp"
                        alt="linear transformations">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Linear Transforms</h2>
                    <center>
                        <span>#mathematics</span>
                    </center>
                    <p class="flow-text">
                        Play around with the operation that is central to linear algebra. The coordinate system is your
                        playground. Scale, rotate and skew! Encounter rotation matrices and inverses. See what a matrix
                        with zero determinant does to the linear space.
                    </p>
                    <center>
                        <a href="linear_transformations/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/projectile_motion.webp" alt="projectile motion">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Projectile Motion</h2>
                    <center>
                        <span>#physics #simulation #game</span>
                    </center>
                    <p class="flow-text">
                        An everyday example of 2D motion. Explore projectile motion through the lens of a game. Try to
                        hit the blue target with the correct initial velocity and angle!
                    </p>
                    <center>
                        <a href="projectile_motion/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/maze_generation.webp" alt="maze generation">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Maze Generation</h2>
                    <center>
                        <span>#computer-science #visualization</span>
                    </center>
                    <p class="flow-text">
                        Ever wondered how maze generation algorithms work? This simulation encompasses three maze
                        generation algorithms (as of now). Also found brief description of the step-by-step working of
                        these algorithm, along with their pros and cons.
                    </p>
                    <center>
                        <a href="maze_generation/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/stroboscopic_effect.webp" alt="stroboscopic effect">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Stroboscopic Effect</h2>
                    <center>
                        <span>#illusion</span>
                    </center>
                    <p class="flow-text">
                        Haven't you observed weird stuff happening with rotating objects? A reversal of direction?
                        Spokes rotating slower than they ought to? Or a flying helicopter with stationary rotors? This
                        simulation explains and showcases this illusion.
                    </p>
                    <center>
                        <a href="stroboscopic_effect/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/monte_carlo.webp" alt="monte carlo simulation">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Monte Carlo</h2>
                    <center>
                        <span>#simulation</span>
                    </center>
                    <p class="flow-text">
                        Gain the intution behind Monte Carlo simulations by using it to quickly estimate the value of pi
                        using nothing except random numbers! Monte Carlo simulations allow us to obtain numerical
                        results from randomness.
                    </p>
                    <center>
                        <a href="monte_carlo/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/linear_momentum.webp" alt="linear momentum">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Linear Momentum</h2>
                    <center>
                        <span>#physics #game</span>
                    </center>
                    <p class="flow-text">
                        The conservation of linear momentum is a central topic in all avenues of Physics. Observe the
                        computer AI crush you repeatedly at Pong by using this concept!
                    </p>
                    <center>
                        <a href="linear_momentum/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/porous_percolation.webp" alt="porous percolation">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Porous Percolation</h2>
                    <center>
                        <span>#mathematics #visualization</span>
                    </center>
                    <p class="flow-text">
                        This simulation visualizes the percolation of fluid through a porous medium. Change the porosity
                        of the medium, and witness a sharp transition that takes place at 0.59!
                    </p>
                    <center>
                        <a href="porous_percolation/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/bezier_curves.webp" alt="bezier curves">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Bezier Curve</h2>
                    <center>
                        <span>#computer-science</span>
                    </center>
                    <p class="flow-text">
                        Computers use Bezier curve to render all text based elements. Further, they are widely used in
                        designing and computer graphics. Design your own curves using this simulation! Use as many
                        control points as you wish!
                    </p>
                    <center>
                        <a href="bezier_curves/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row math">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/random_walks.webp" alt="random walks">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Random Walks</h2>
                    <center>
                        <span>#simulation</span>
                    </center>
                    <p class="flow-text">
                        Explore the subtle relationship between unbiased random walks, binomial distribution, central
                        limit theorem, Pascal's triangle and normal distribution. Simulate thousands of animals walking
                        any distance you want and analyse their distribution!
                    </p>
                    <center>
                        <a href="random_walk/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row physics">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/planetary_motion.webp" alt="planetary motion">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Planetary Motion</h2>
                    <center>
                        <span>#physics #simulation</span>
                    </center>
                    <p class="flow-text">
                        The Law of Universal Gravitation is aptly named. Put forth by Isaac Newton in 1687, it describes
                        the motion of every massive particle in the universe. Play around this framework with as many
                        bodies as you like!
                    </p>
                    <center>
                        <a href="planetary_motion/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row complex">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/tdp.webp" alt="directed percolation">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Directed Percolation</h2>
                    <center>
                        <span>#complex-systems #automaton</span>
                    </center>
                    <p class="flow-text">
                        Tricritical Directed Percolation (TDP) is a simple probabilistic model that can be used to study
                        vegetation dynamics. This model features continuous and abrupt transitions. Witness them in
                        real-time.
                    </p>
                    <center>
                        <a href="tdp/simulation.html">
                            <button class="btn purple darken-4">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/lexical_analysis.webp" alt="lexical analysis">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Lexical Analysis</h2>
                    <center>
                        <span>#computer-science</span>
                    </center>
                    <p class="flow-text">
                        Lexical Analysers convert user-written programs into tokens, before being passed on to the
                        compiler. Explore the working of a simple lexical analyser!
                    </p>
                    <center>
                        <a href="lexical_analysis/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <div class="row computer">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/travelling_salesman.webp" alt="travelling salesman">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0">Travelling Salesman</h2>
                    <center>
                        <span>#computer-science</span>
                    </center>
                    <p class="flow-text">
                        A salesman wants to cover all places of interest through the shortest path possible and without
                        visiting the same place twice. What path should he follow? This deceptively simple looking
                        problem becomes extremely diffucult to solve as the number of places increases!
                    </p>
                    <center>
                        <a href="travelling_salesman/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div>

            <!-- template -->
            <!-- <div class="row">
                <div class="col s12 l5">
                    <img class="responsive-img" src="images_webp/" alt="image">
                </div>
                <div class="col s12 l7">
                    <h2 style="margin:0"></h2>
                    <center>
                        <span></span>
                    </center>
                    <p class="flow-text">

                    </p>
                    <center>
                        <a href="/simulation.html">
                            <button class="btn purple darken-4 visit-button">Visit</button>
                        </a>
                    </center>
                </div>
                <br>
                <hr>
                <br>
            </div> -->

            <a rel="me" href="https://ecoevo.social/@chandan" style="display:none">Mastodon</a>

            <center>
                <p>Developed by Chandan Relekar | Fork me at <a href="https://www.github.com/chanrt">GitHub</a></p>
            </center>
        </div>
    </div>

</body>

</html>