index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>McCulloch & Pitts Neural Net Simulator</title>

        <style>
        body {
            background-color: white;
            font-family: Lucida Console, Courier, monospace;
        }

        img.center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        #content {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
        }

        #main-canvas {
            border: 1px solid black;
        }

        .context-menu {
            display: none;
            position: absolute;
            z-index: 10;

            background-color: white;
            border: 1px solid black;

            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .context-menu ul {
            list-style: none;  
            padding: 8px;
            margin: 0;
        }

        .context-menu ul li {
            cursor: pointer;
        }
        
        .context-menu ul li:hover {
            background-color: rgb(200, 200, 200);
        }

        .context-menu.active {
            display: block;
        }

        .controls {
            margin-bottom: 0.5rem;
        }

        #storage-controls input {
            width: 100%;
            margin-top: 0.25rem;
        }


    </style>
    </head>

    <body>
        <div id="content">
            <h2>McCulloch &amp; Pitts Neural Net Simulator</h2>
            <canvas id="main-canvas" width="800" height="600"></canvas>

            <div id='new-menu' class="context-menu"> 
                <ul>
                    <li data-action="new-cell">New Neuron</li>
                    <li data-action="new-label">New Label</li>
                </ul>
            </div>

            <div id="cell-menu" class="context-menu">
                <ul>
                    <li data-action="delete">Delete</li>
                    <li data-action="flip">Flip</li>
                </ul>
            </div>

            <div id="label-menu" class="context-menu">
                <ul>
                    <li data-action="delete">Delete</li>
                    <li data-action="edit">Edit</li>
                </ul>
            </div>

            <div id="fiber-menu" class="context-menu">
                <ul>
                    <li data-action="delete">Delete</li>
                    <li data-action="toggle">Toggle</li>
                </ul>
            </div>

            <div id="playback-controls" class="controls">
                <span id="time"></span>
                <button id="play-btn">Pause</button>
                <button id="step-btn" accesskey="s">Step</button>
                <button id="restart-btn">Restart</button>
            </div>

            <div id="storage-controls" class="controls">
                <button id="load-btn">Load</button>
                <button id="save-btn">Save</button>
                <span>Use copy and paste here</span>
                <input id="storage-input" type="text"/>
            </div>

            <h2>How does this work?</h2>

            <p> 
               Each <b>neuron</b> has input <b>fibers</b> and output fibers which connect it to other neurons.
               A neuron fires after it receives a number of signals from its input fibers, greater or equal to its threshold (the number written on it.)
               Fibers which have a circle at the end are called <b>inhibitory</b> fibers. If a neuron receives an inhibitory signal, it will not fire, regardless of how many signals it receives.
            </p>


            <h2>Examples</h2>

            <ul>
                <li>
                    <a href="?">Instructions (startup screen)</a>
                </li>
                <li>
                    <a href="?d=examples/memory_gate.net">Memory Gate</a>
                </li>

                <li>
                    <a href="?d=examples/unary_scaler.net">Unary Scaler</a>
                </li>
                <li><a href="?d=examples/binary_scaler.net">Binary Scaler</a>
                </li>
                 <li><a href="?d=examples/chained_scaler.net">Chained Scaler</a>
                </li> 
                <li>
                    <a href="?d=examples/binary_adder.net">Binary Adder</a>
                </li>
            </ul>

            You can share your own neural nets too! Copy the saved text to an online location (like a Gist)
            and append it to the end of the URL like so: <code>?d={YOUR URL}</code>.

            Contribute yours to the <a href="https://github.com/justinmeiners/neural-nets-sim">list</a>!

            <h2>What are McCulloch &amp; Pitts Neural Nets?</h2>

            <p>
            <a href="https://en.wikipedia.org/wiki/Warren_Sturgis_McCulloch">McCulloch</a> and 
            <a href="https://en.wikipedia.org/wiki/Walter_Pitts">Pitts</a> 
            were researchers in neuroscience who became <a href="https://www.dlsi.ua.es//~mlf/nnafmc/pbook/node10.html">pioneers in artificial intelligence.</a>
            In 1943 they created a <a href="papers/mcp.pdf">computation model</a> of how neurons fire in our brains.
            This project is a simulator of that model.
            </p>


            <img alt="neuron" class="center" src="img/mcp.gif">

            <p>
                Even though these neural nets are inspired by biology, they aren't an accurate representation of their physical properties. They are a simplification for computational purposes.
                Marvin Minsky says:
            </p>

            <blockquote>
                It should be understood clearly that neither McCulloch, Pitts, nor the present writer considers these devices and machines to serve as accurate physiological models of nerve cells and tissues. They were not designed with that purpose in mind. They are designed for the representation and analysis of the logic of situations that arise in any discrete process, be it in brain, computer, or anywhere else. In theories which are more seriously intended to be brain models, the "neurons" have to be much more complicated. The real biological neuron is much more complex than our simple
                logical units for the evolution of nerve cells has led to very intricate and specialized organs.
            </blockquote>

            <p>
                Their work later became important in the Theory of Computation. In 1951, <a href="https://en.wikipedia.org/wiki/Stephen_Cole_Kleene">Kleene</a> proved that the
                patterns which are recognizable by the neural nets are precisely the <a href="papers/kleene.pdf">Regular Expressions</a>. This is commonly known as <a href="https://www.cs.odu.edu/~toida/nerzic/390teched/regular/fa/kleene-1.html">Kleene's Theorem</a>. Finite state machines and neural nets are computationally equivalent.
            </p>

            <p>
                If you want to learn more, I recommend Marvin Minsky's book: <a href="https://dl.acm.org/citation.cfm?id=1095587">Computation: Finite &amp; Infinite</a>.
                Also see <a href="http://www.alanturing.net/ace/index.html#section3figs">Turing's</a> diagrams
                which use similar nets.
            </p>
        </div>

        <a href="https://github.com/justinmeiners/neural-nets-sim" class="github-corner" aria-label="View source on GitHub">
            <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
        </a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
      
        <script src="neural_nets.js"></script>
    </body>
</html>