Click here to Skip to main content
13,295,472 members (28,292 online)
Click here to Skip to main content


27 bookmarked
Posted 16 Oct 2012

JavaScript Machine Learning and Neural Networks with Encog

, 16 Oct 2012
Use Encog genetic algorithms, simulated annealing, neural networks and more with HTML5 Javascript.
<!DOCTYPE html>

<style type="text/css"><!--
    border: 1px solid #000;
    background: #c0c0c0;
    width: 500px;
    height: 560px;
    position: relative;

    border: 1px solid #000;
    background: white;
    position: absolute;
    display: inline;

    border: 1px solid #000;
    position: absolute;
    display: inline;
    width: 500px;

.test { color: red }
--></style><div id="example-holder">
    <div id="drawing-area"></div><div id="example-btn1"><input id="btnStart" type="button" value="Start" /><input id="btnStop" type="button" value="Stop" /><input id="btnSingle" type="button" value="Single" /><input id="btnClear" type="button" value="Clear" /><input id="btnBigBang" type="button" value="Big Bang" /><input id="btnShowAff" type="checkbox" checked="checked" /> Show Affinity<br />Separation: <input id="txtSeparation" type="text" size="5" value="0.25" />, Alignment: <input id="txtAlignment" type="text" size="5" value="0.5" />, Cohesion: <input id="txtCohesion" type="text" size="5" value="0.01" /><input id="btnSet" type="button" value="Set" /></div>

<script src="../encog.js"></script>
<script src="../encog-widget.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--

"use strict";
if(window.addEventListener) {
    window.addEventListener('load', function () {

        var backgroundTimer,universe;
        var btnStart, btnStop, btnClear, btnSingle, btnSet, btnBigBang;
        var txtSeparation,txtAlignment,txtCohesion;
        var constSeparation,constAlignment,constCohesion;
        var repelSpot = new Array(0,0);
        var shouldRepel = false;
        var btnShowAff;
        var COUNT = 50;
        var PARTICLE_SIZE = 10;
        var PARTICLE_SPEED = 5;
        var flock;

        function init () {
            'use strict';
            // Find the canvas element.
            universe = ENCOG.GUI.Agents2D.create('drawing-area',500,500);

            // repel
            universe.pointerDown = function(x,y) {
                'use strict';
                var repelSpot = [x,y];
                var repulse = ENCOG.MathUtil.kNearest(repelSpot,universe.agents,COUNT,100,0,2);
                for(var i=0;i<repulse.length;i++)
                    var dx = repelSpot[0] - repulse[i][0];
                    var dy = repelSpot[1] - repulse[i][1];
                    var repulseAngle = ((Math.atan2(dx, dy) * 180 / Math.PI))+180;

            flock = ENCOG.Swarm.create(universe.agents);
            flock.callbackNeighbors = function(i,neighbors) {
                if( btnShowAff.checked ) {

            // Attach the mousedown, mousemove and mouseup event listeners.
            btnStart = document.getElementById('btnStart');
            btnStop = document.getElementById('btnStop');
            btnClear = document.getElementById('btnClear');
            btnSingle = document.getElementById('btnSingle');
            btnBigBang = document.getElementById('btnBigBang');
            btnShowAff = document.getElementById('btnShowAff');
            btnSet = document.getElementById('btnSet');

            txtSeparation = document.getElementById('txtSeparation');
            txtAlignment = document.getElementById('txtAlignment');
            txtCohesion = document.getElementById('txtCohesion');

            btnStart.addEventListener('click', ev_start, false);
            btnStop.addEventListener('click', ev_stop, false);
            btnClear.addEventListener('click', ev_clear, false);
            btnSingle.addEventListener('click', ev_single, false);
            btnSet.addEventListener('click', ev_set, false);
            btnBigBang.addEventListener('click', ev_bigBang, false);


        // Event functions

        // The user has started dragging (or touching), this will begin to repel
        // particles that are too close to the event location.
        function ev_start(ev)
            'use strict';
            backgroundTimer = self.setInterval(ev_animate,50);
            btnStart.disabled = true;
            btnStop.disabled = false;
            btnSingle.disabled = true;

        // The user has stopped dragging (or touching), this will stop repeling particles.
        function ev_stop(ev)
            'use strict';
            btnStart.disabled = false;
            btnStop.disabled = true;
            btnSingle.disabled = false;

        // Set the three flocking constants.
        function ev_set(ev)
            'use strict';
            constSeparation = parseFloat(txtSeparation.value);
            constAlignment = parseFloat(txtAlignment.value);
            constCohesion = parseFloat(txtCohesion.value);

        // Clear the universe to a "random" state.
        function ev_clear(ev)
            'use strict';
            flock.agents = universe.agents;

        // Clear the universe by moving every particle to the center, with common
        // angles.  This creates a 100% deterministic (the same result each time),
        // yet seemingly random universe.
        function ev_bigBang(ev)
            'use strict';
            universe.agents = [];
            flock.agents = universe.agents;
            for(var i=0;i<COUNT;i++) {
                universe.agents[i] = [ universe.canvas.width/2,universe.canvas.height/2,0];


        // Move forward by a single time slice.
        function ev_single(ev)
            'use strict';

        // If we are repeling, find everything that is within a 100 unit radius of the
        // repel spot, repel it.  The repel occurs by calculating the ideal angle
        // to take us to the repel spot, and then use the 180deg opposit of that angle.
        function performRepel()


        // This is the main loop of the program.  It is called by a timer and drives
        // the animation.  This method loops over all of the particles and performs
        // the following.
        function ev_animate()
            'use strict';

        // Downsampling functions

        // Drawing functions

        // cause the init function to be called.

    }, false); }



By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


About the Author

United States United States
Jeff Heaton, Ph.D., is a data scientist, an adjunct instructor for the Sever Institute at Washington University, and the author of several books about artificial intelligence. Jeff holds a Master of Information Management (MIM) from Washington University and a PhD in computer science from Nova Southeastern University. Over twenty years of experience in all aspects of software development allows Jeff to bridge the gap between complex data science problems and proven software development. Working primarily with the Python, R, Java/C#, and JavaScript programming languages he leverages frameworks such as TensorFlow, Scikit-Learn, Numpy, and Theano to implement deep learning, random forests, gradient boosting machines, support vector machines, T-SNE, and generalized linear models (GLM). Jeff holds numerous certifications and credentials, such as the Johns Hopkins Data Science certification, Fellow of the Life Management Institute (FLMI), ACM Upsilon Pi Epsilon (UPE), a senior membership with IEEE. He has published his research through peer reviewed papers with the Journal of Machine Learning Research and IEEE.

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 16 Oct 2012
Article Copyright 2012 by JeffHeaton
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid