[ { "path": "Readme.md", "content": "\n# Neural Slime Volleyball\n\nHTML5-JS Slime Volleyball clone. AI agent is a trained recurrent neural network, trained using basic conventional neuroevolution techniques. Neural network implemented using the [convnetjs](http://cs.stanford.edu/people/karpathy/convnetjs/) library. It is very difficult to win!\n\nSee my blog post at [blog.otoro.net](http://blog.otoro.net/2015/03/28/neural-slime-volleyball/) for more information, or [otoro.net](http://otoro.net/slimevolley/) to actually play the game.\n\n## online demo\n- [Neural Slime Volleyball](http://otoro.net/slimevolley)\n\n## Training\n\nIf you wish to experiment with adding extra AI modules, or just to see how the learning works, please edit both pro.html and the slimevolley_pro.js. They are the versions I will use in the future.\n\nInside pro.html, you can switch on/off the training mode by changing trainingVersion = true/false\n\nIf it is running on training version, the most capable neural net, in the form of a JSON array is dumped to nn_gene on the screen every 50 training generations. You can copy and paste that blob back into initGeneJSON as a quoted text inside slimevolley_pro.js to incorporate back into the game, and switching training mode back to false to play with the new trained network.\n\nHave fun-\n\n## License\nGNU GPL v3\n" }, { "path": "index.html", "content": "\n\n neural slime volleyball\n \n \n \n \n \n \n \n\n \n \n\n \n \n\n\n\n\n\nneural slime volleyball\n© ōtoro.net\n

\n\n
\n
\n\n\n\n \"\"\n\n \n \n \n \n \n \n \n\n\n\n\n\n\n\n\n\n\n" }, { "path": "lib/box2d-camera.js", "content": "\n// -----------------------------------------------------------------------------\n// Scale Methods\n// -----------------------------------------------------------------------------\n\n// supposed to translate (x_b2, y_b2) -> (x_pixel, y_pixel). everything else scaled by a factor of scaleFactor\nvar b2Camera = { \n scaleFactor : 10,\n x_b2: 0,\n y_b2: 0,\n x_pixel: 0,\n y_pixel: 0\n};\n\nvar gravity;\nvar gravityStrength = 20;\n\nvar scaleToWorld = function(a,b) {\n var newv;\n if (a instanceof box2d.b2Vec2) {\n newv = new box2d.b2Vec2();\n newv.x = (a.x-b2Camera.x_pixel)/b2Camera.scaleFactor+b2Camera.x_b2;\n newv.y = (a.y-b2Camera.y_pixel)/b2Camera.scaleFactor+b2Camera.y_b2;\n return newv;\n } else if (\"undefined\"!=typeof b) {\n newv = new box2d.b2Vec2();\n newv.x = (a-b2Camera.x_pixel)/b2Camera.scaleFactor+b2Camera.x_b2;\n newv.y = (b-b2Camera.y_pixel)/b2Camera.scaleFactor+b2Camera.y_b2;\n return newv;\n } else {\n return a/b2Camera.scaleFactor;\n }\n};\n\n\nvar makeB2Vec2 = function(a,b) {\n var newv;\n newv = new box2d.b2Vec2();\n newv.x = (a)/1;\n newv.y = (b)/1;\n return newv;\n};\n\nvar scaleToPixels = function(a,b) {\n var newv;\n if (a instanceof box2d.b2Vec2) {\n newv = new box2d.b2Vec2();\n newv.x = (a.x-b2Camera.x_b2)*b2Camera.scaleFactor+b2Camera.x_pixel;\n newv.y = (a.y-b2Camera.y_b2)*b2Camera.scaleFactor+b2Camera.y_pixel;\n return newv;\n } else if (\"undefined\"!=typeof b) {\n newv = new box2d.b2Vec2();\n newv.x = (a-b2Camera.x_b2)*b2Camera.scaleFactor+b2Camera.x_pixel;\n newv.y = (b-b2Camera.y_b2)*b2Camera.scaleFactor+b2Camera.y_pixel;\n return newv;\n } else {\n return a*b2Camera.scaleFactor;\n }\n};\n\n// -----------------------------------------------------------------------------\n// Create Methods\n// -----------------------------------------------------------------------------\n\nvar createWorld = function() {\n\n\tvar worldAABB = new box2d.b2AABB();\n\tworldAABB.lowerBound.SetXY(-this.bounds, -this.bounds);\n\tworldAABB.upperBound.SetXY(this.bounds, this.bounds);\n\tgravity = new box2d.b2Vec2(0,gravityStrength);\n\tvar doSleep = true;\n\n\treturn new box2d.b2World(gravity, doSleep);\n};\n\n// -----------------------------------------------------------------------------\n// Draw Methods\n// -----------------------------------------------------------------------------\n\nvar debugDraw = function(canvas, scale, world) {\n\n\tvar context = canvas.getContext('2d');\n var j, b, f;\n context.fillStyle = '#DDD';\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n\t// Draw joints\n\tfor( j=world.m_jointList; j; j=j.m_next) {\n context.lineWidth = 0.25;\n context.strokeStyle = '#00F';\n drawJoint(context, scale, world, j);\n }\n\n\t// Draw body shapes\n\tfor( b=world.m_bodyList; b; b=b.m_next) {\n\t\tfor( f = b.GetFixtureList(); f!==null; f=f.GetNext()) { \n context.lineWidth = 0.5;\n\t\t\tcontext.strokeStyle = '#F00';\n drawShape(context, scale, world, b, f);\n }\n }\n};\n\nvar drawJoint = function(context, scale, world, joint) {\n\tcontext.save();\n context.scale(scale,scale);\n context.lineWidth /= scale;\n\n var b1 = joint.m_bodyA;\n var b2 = joint.m_bodyB;\n var x1 = b1.GetPosition();\n var x2 = b2.GetPosition();\n var p1 = joint.GetAnchorA();\n var p2 = joint.GetAnchorB();\n\n context.beginPath();\n switch (joint.m_type) {\n case box2d.b2Joint.e_distanceJoint:\n context.moveTo(p1.x, p1.y);\n context.lineTo(p2.x, p2.y);\n break;\n default: {\n if (b1 == world.m_groundBody) {\n context.moveTo(p1.x, p1.y);\n context.lineTo(x2.x, x2.y);\n }\n else if (b2 == world.m_groundBody) {\n context.moveTo(p1.x, p1.y);\n context.lineTo(x1.x, x1.y);\n }\n else {\n context.moveTo(x1.x, x1.y);\n context.lineTo(p1.x, p1.y);\n context.lineTo(x2.x, x2.y);\n context.lineTo(p2.x, p2.y);\n }\n } break;\n }\n context.closePath();\n context.stroke();\n context.restore();\n};\n\nvar drawShape = function(context, scale, world, body, fixture) {\n\n context.save();\n context.scale(scale,scale);\n\n var bPos = body.GetPosition();\n context.translate(bPos.x, bPos.y);\n context.rotate(body.GetAngleRadians());\n \n context.beginPath();\n context.lineWidth /= scale;\n\n\tvar shape = fixture.m_shape;\n var i;\n switch(shape.m_type) {\n case box2d.b2ShapeType.e_circleShape: {\n var r = shape.m_radius;\n var segments = 16.0;\n var theta = 0.0;\n var dtheta = 2.0 * Math.PI / segments;\n\n context.moveTo(r, 0);\n for (i = 0; i < segments; i++) {\n context.lineTo(r + r * Math.cos(theta), r * Math.sin(theta));\n theta += dtheta;\n }\n context.lineTo(r, 0);\n } break;\n\n case box2d.b2ShapeType.e_polygonShape:\n case box2d.b2ShapeType.e_chainShape: {\n\n var vertices = shape.m_vertices;\n var vertexCount = shape.m_count;\n if (!vertexCount) return;\n\n context.moveTo(vertices[0].x, vertices[0].y);\n for (i = 0; i < vertexCount; i++)\n context.lineTo(vertices[i].x, vertices[i].y);\n } break;\n }\n\n context.closePath();\n context.stroke();\n context.restore();\n};" }, { "path": "lib/box2d-helper.js", "content": "\n// -----------------------------------------------------------------------------\n// Scale Methods\n// -----------------------------------------------------------------------------\n\nvar scaleFactor;\n\nvar scaleToWorld = function(a,b) {\n var newv;\n if (a instanceof box2d.b2Vec2) {\n newv = new box2d.b2Vec2();\n newv.x = (a.x)/scaleFactor;\n newv.y = (a.y)/scaleFactor;\n return newv;\n } else if (\"undefined\"!=typeof b) {\n newv = new box2d.b2Vec2();\n newv.x = (a)/scaleFactor;\n newv.y = (b)/scaleFactor;\n return newv;\n } else {\n return a/scaleFactor;\n }\n};\n\nvar scaleToPixels = function(a,b) {\n var newv;\n if (a instanceof box2d.b2Vec2) {\n newv = new box2d.b2Vec2();\n newv.x = a.x*scaleFactor;\n newv.y = a.y*scaleFactor;\n return newv;\n } else if (\"undefined\"!=typeof b) {\n newv = new box2d.b2Vec2();\n newv.x = a*scaleFactor;\n newv.y = b*scaleFactor;\n return newv;\n } else {\n return a*scaleFactor;\n }\n};\n\n// -----------------------------------------------------------------------------\n// Create Methods\n// -----------------------------------------------------------------------------\n\nvar createWorld = function() {\n\n\tvar worldAABB = new box2d.b2AABB();\n\tworldAABB.lowerBound.SetXY(-this.bounds, -this.bounds);\n\tworldAABB.upperBound.SetXY(this.bounds, this.bounds);\n\tvar gravity = new box2d.b2Vec2(0,20);\n\tvar doSleep = true;\n\n scaleFactor = 10;\n\n\treturn new box2d.b2World(gravity, doSleep);\n};\n\n// -----------------------------------------------------------------------------\n// Draw Methods\n// -----------------------------------------------------------------------------\n\nvar debugDraw = function(canvas, scale, world) {\n\n\tvar context = canvas.getContext('2d');\n var j, b, f;\n context.fillStyle = '#DDD';\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n\t// Draw joints\n\tfor( j=world.m_jointList; j; j=j.m_next) {\n context.lineWidth = 0.25;\n context.strokeStyle = '#00F';\n drawJoint(context, scale, world, j);\n }\n\n\t// Draw body shapes\n\tfor( b=world.m_bodyList; b; b=b.m_next) {\n\t\tfor( f = b.GetFixtureList(); f!==null; f=f.GetNext()) { \n context.lineWidth = 0.5;\n\t\t\tcontext.strokeStyle = '#F00';\n drawShape(context, scale, world, b, f);\n }\n }\n};\n\nvar drawJoint = function(context, scale, world, joint) {\n\tcontext.save();\n context.scale(scale,scale);\n context.lineWidth /= scale;\n\n var b1 = joint.m_bodyA;\n var b2 = joint.m_bodyB;\n var x1 = b1.GetPosition();\n var x2 = b2.GetPosition();\n var p1 = joint.GetAnchorA();\n var p2 = joint.GetAnchorB();\n\n context.beginPath();\n switch (joint.m_type) {\n case box2d.b2Joint.e_distanceJoint:\n context.moveTo(p1.x, p1.y);\n context.lineTo(p2.x, p2.y);\n break;\n default: {\n if (b1 == world.m_groundBody) {\n context.moveTo(p1.x, p1.y);\n context.lineTo(x2.x, x2.y);\n }\n else if (b2 == world.m_groundBody) {\n context.moveTo(p1.x, p1.y);\n context.lineTo(x1.x, x1.y);\n }\n else {\n context.moveTo(x1.x, x1.y);\n context.lineTo(p1.x, p1.y);\n context.lineTo(x2.x, x2.y);\n context.lineTo(p2.x, p2.y);\n }\n } break;\n }\n context.closePath();\n context.stroke();\n context.restore();\n};\n\nvar drawShape = function(context, scale, world, body, fixture) {\n\n context.save();\n context.scale(scale,scale);\n\n var bPos = body.GetPosition();\n context.translate(bPos.x, bPos.y);\n context.rotate(body.GetAngleRadians());\n \n context.beginPath();\n context.lineWidth /= scale;\n\n\tvar shape = fixture.m_shape;\n var i;\n switch(shape.m_type) {\n case box2d.b2ShapeType.e_circleShape: {\n var r = shape.m_radius;\n var segments = 16.0;\n var theta = 0.0;\n var dtheta = 2.0 * Math.PI / segments;\n\n context.moveTo(r, 0);\n for (i = 0; i < segments; i++) {\n context.lineTo(r + r * Math.cos(theta), r * Math.sin(theta));\n theta += dtheta;\n }\n context.lineTo(r, 0);\n } break;\n\n case box2d.b2ShapeType.e_polygonShape:\n case box2d.b2ShapeType.e_chainShape: {\n\n var vertices = shape.m_vertices;\n var vertexCount = shape.m_count;\n if (!vertexCount) return;\n\n context.moveTo(vertices[0].x, vertices[0].y);\n for (i = 0; i < vertexCount; i++)\n context.lineTo(vertices[i].x, vertices[i].y);\n } break;\n }\n\n context.closePath();\n context.stroke();\n context.restore();\n};" }, { "path": "lib/box2d-html5.js", "content": "var COMPILED=!0,goog=goog||{};goog.global=this;goog.DEBUG=!1;goog.LOCALE=\"en\";goog.TRUSTED_SITE=!0;goog.provide=function(a){if(!COMPILED){if(goog.isProvided_(a))throw Error('Namespace \"'+a+'\" already declared.');delete goog.implicitNamespaces_[a];for(var b=a;(b=b.substring(0,b.lastIndexOf(\".\")))&&!goog.getObjectByName(b);)goog.implicitNamespaces_[b]=!0}goog.exportPath_(a)};\ngoog.setTestOnly=function(a){if(COMPILED&&!goog.DEBUG)throw a=a||\"\",Error(\"Importing test-only code into non-debug environment\"+a?\": \"+a:\".\");};COMPILED||(goog.isProvided_=function(a){return!goog.implicitNamespaces_[a]&&!!goog.getObjectByName(a)},goog.implicitNamespaces_={});goog.exportPath_=function(a,b,c){a=a.split(\".\");c=c||goog.global;a[0]in c||!c.execScript||c.execScript(\"var \"+a[0]);for(var e;a.length&&(e=a.shift());)!a.length&&goog.isDef(b)?c[e]=b:c=c[e]?c[e]:c[e]={}};\ngoog.getObjectByName=function(a,b){for(var c=a.split(\".\"),e=b||goog.global,d;d=c.shift();)if(goog.isDefAndNotNull(e[d]))e=e[d];else return null;return e};goog.globalize=function(a,b){var c=b||goog.global,e;for(e in a)c[e]=a[e]};\ngoog.addDependency=function(a,b,c){if(!COMPILED){var e;a=a.replace(/\\\\/g,\"/\");for(var d=goog.dependencies_,f=0;e=b[f];f++)d.nameToPath[e]=a,a in d.pathToNames||(d.pathToNames[a]={}),d.pathToNames[a][e]=!0;for(e=0;b=c[e];e++)a in d.requires||(d.requires[a]={}),d.requires[a][b]=!0}};goog.ENABLE_DEBUG_LOADER=!0;\ngoog.require=function(a){if(!COMPILED&&!goog.isProvided_(a)){if(goog.ENABLE_DEBUG_LOADER){var b=goog.getPathFromDeps_(a);if(b){goog.included_[b]=!0;goog.writeScripts_();return}}a=\"goog.require could not find: \"+a;goog.global.console&&goog.global.console.error(a);throw Error(a);}};goog.basePath=\"\";goog.nullFunction=function(){};goog.identityFunction=function(a,b){return a};goog.abstractMethod=function(){throw Error(\"unimplemented abstract method\");};\ngoog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];\n!COMPILED&&goog.ENABLE_DEBUG_LOADER&&(goog.included_={},goog.dependencies_={pathToNames:{},nameToPath:{},requires:{},visited:{},written:{}},goog.inHtmlDocument_=function(){var a=goog.global.document;return\"undefined\"!=typeof a&&\"write\"in a},goog.findBasePath_=function(){if(goog.global.CLOSURE_BASE_PATH)goog.basePath=goog.global.CLOSURE_BASE_PATH;else if(goog.inHtmlDocument_())for(var a=goog.global.document.getElementsByTagName(\"script\"),b=a.length-1;0<=b;--b){var c=a[b].src,e=c.lastIndexOf(\"?\"),e=\n-1==e?c.length:e;if(\"base.js\"==c.substr(e-7,7)){goog.basePath=c.substr(0,e-7);break}}},goog.importScript_=function(a){var b=goog.global.CLOSURE_IMPORT_SCRIPT||goog.writeScriptTag_;!goog.dependencies_.written[a]&&b(a)&&(goog.dependencies_.written[a]=!0)},goog.writeScriptTag_=function(a){if(goog.inHtmlDocument_()){var b=goog.global.document;if(\"complete\"==b.readyState){if(/\\bdeps.js$/.test(a))return!1;throw Error('Cannot write \"'+a+'\" after document load');}b.write('\n Neural Slime Volleyball Pro Redirection\n \n \n \n If you are not redirected automatically, follow the link to pro version.\n \n\n" }, { "path": "pro.html", "content": "\n\n neural slime volleyball\n \n \n \n \n \n \n \n\n \n \n\n \n \n\n\n\n\n\nneural slime volleyball\n© ōtoro.net\n

\n\n\n\n
\n
\n\n\n\n \"\"\n

\n \n \n \n \n \n \n \n\n\n\n\n\n\n\n\n\n\n" }, { "path": "slimevolley.js", "content": "\n\n/* \n\np5.js implementation of slime volleyball, with evolved neural networks to be the ai.\n\n@licstart The following is the entire license notice for the \nJavaScript code in this page.\n\nCopyright (C) 2015 david ha, otoro.net, otoro labs\n\nThe JavaScript code in this page is free software: you can\nredistribute it and/or modify it under the terms of the GNU\nGeneral Public License (GNU GPL) as published by the Free Software\nFoundation, either version 3 of the License, or (at your option)\nany later version. The code is distributed WITHOUT ANY WARRANTY;\nwithout even the implied warranty of MERCHANTABILITY or FITNESS\nFOR A PARTICULAR PURPOSE. See the GNU GPL for more details.\n\nAs additional permission under GNU GPL version 3 section 7, you\nmay distribute non-source (e.g., minimized or compacted) forms of\nthat code without the copy of the GNU GPL normally required by\nsection 4, provided you include this license notice and a URL\nthrough which recipients can access the Corresponding Source. \n\n\n@licend The above is the entire license notice\nfor the JavaScript code in this page.\n*/\n\n// game settings:\nvar showArrowKeys = true;\nvar ref_w = 24;\nvar ref_h = ref_w;\nvar ref_u = 1.5; // ground height\nvar ref_wallwidth = 1.0; // wall width\nvar ref_wallheight = 3.5;\nvar factor = 1;\nvar playerSpeedX = 10;\nvar playerSpeedY = 10;\nvar maxBallSpeed = 15;\nvar gravity;\nvar timeStep = 1/30;\nvar theFrameRate = 60*1;\nvar nudge = 0.1;\nvar friction = 1.0; // 1 means no friction, less means friction\nvar windDrag = 1.0;\nvar initDelayFrames = 30*2*1;\nvar trainingFrames = 30*20; // assume each match is 7 seconds. (vs 30fps)\nvar theGravity = -9.8*2;\nvar trainingMode = false;\nvar human1 = false; // if this is true, then player 1 is controlled by keyboard\nvar human2 = false; // same as above\nvar humanHasControlled = false;\nvar trainer = null;\nvar generationCounter = 0;\nvar baseScoreFontSize = 64;\nvar traningVersion = false;\n\nvar initGeneJSON1 = '{\"fitness\":1.5,\"nTrial\":0,\"gene\":{\"0\":5.8365,\"1\":1.4432,\"2\":3.1023,\"3\":0.2617,\"4\":-3.5896,\"5\":-1.0675,\"6\":-5.3384,\"7\":0.8505,\"8\":-3.1851,\"9\":-5.6325,\"10\":-3.2459,\"11\":0.7676,\"12\":1.321,\"13\":-1.4931,\"14\":-1.1353,\"15\":-0.2911,\"16\":1.164,\"17\":0.8755,\"18\":-1.1329,\"19\":0.3585,\"20\":-3.9182,\"21\":0.325,\"22\":-0.3397,\"23\":-0.2513,\"24\":0.5678,\"25\":1.9984,\"26\":0.7691,\"27\":2.6176,\"28\":1.791,\"29\":-0.9755,\"30\":1.8437,\"31\":0.4196,\"32\":0.5471,\"33\":-2.6769,\"34\":1.6382,\"35\":1.1442,\"36\":7.1792,\"37\":2.4046,\"38\":0.5512,\"39\":2.8792,\"40\":0.6744,\"41\":3.8023,\"42\":-2.704,\"43\":2.872,\"44\":-3.7659,\"45\":-1.7561,\"46\":-1.5691,\"47\":-5.0168,\"48\":-3.1482,\"49\":0.4531,\"50\":6.3125,\"51\":0.2956,\"52\":2.5486,\"53\":-0.3944,\"54\":-2.7155,\"55\":-5.5154,\"56\":-1.1787,\"57\":-3.8094,\"58\":-2.0738,\"59\":-4.0264,\"60\":3.3217,\"61\":11.0153,\"62\":2.8341,\"63\":-0.2914,\"64\":4.8417,\"65\":-0.9244,\"66\":-3.2621,\"67\":-0.2639,\"68\":-1.3825,\"69\":-1.1969,\"70\":0.7021,\"71\":-4.1637,\"72\":-1.5203,\"73\":-3.1297,\"74\":-1.7193,\"75\":-2.1526,\"76\":4.2902,\"77\":1.4272,\"78\":-0.6137,\"79\":1.1164,\"80\":-0.0067,\"81\":1.0377,\"82\":-0.2344,\"83\":-0.3008,\"84\":-2.3273,\"85\":2.4405,\"86\":-2.3012,\"87\":-1.9193,\"88\":-3.7453,\"89\":1.44,\"90\":-4.5812,\"91\":-1.9701,\"92\":2.3101,\"93\":-4.2018,\"94\":-3.0907,\"95\":1.7332,\"96\":-3.311,\"97\":-2.2417,\"98\":-1.9073,\"99\":5.5644,\"100\":2.5601,\"101\":3.2058,\"102\":0.7374,\"103\":-3.6406,\"104\":-0.6569,\"105\":2.5963,\"106\":3.074,\"107\":-4.7564,\"108\":1.0644,\"109\":-0.7439,\"110\":-0.2318,\"111\":1.1902,\"112\":-2.2391,\"113\":1.5935,\"114\":-4.6269,\"115\":-2.0589,\"116\":-2.2949,\"117\":-0.4391,\"118\":7.0848,\"119\":4.902,\"120\":-0.929,\"121\":3.1709,\"122\":0.163,\"123\":-1.6548,\"124\":-0.0521,\"125\":0.3726,\"126\":-1.3681,\"127\":-0.2623,\"128\":-1.4581,\"129\":0.3422,\"130\":1.1412,\"131\":-0.2376,\"132\":0.7743,\"133\":3.0866,\"134\":-3.6638,\"135\":-0.9372,\"136\":2.5364,\"137\":-1.3026,\"138\":-1.7666,\"139\":-0.1401}}';\n\nvar initGeneJSON2 = '{\"fitness\":1.2,\"nTrial\":0,\"gene\":{\"0\":6.5097,\"1\":2.3385,\"2\":0.1029,\"3\":0.5598,\"4\":-6.3998,\"5\":-1.2678,\"6\":-4.4426,\"7\":0.8709,\"8\":-4.4122,\"9\":-7.7086,\"10\":0.769,\"11\":2.1251,\"12\":0.8503,\"13\":-0.8715,\"14\":-0.9924,\"15\":0.0656,\"16\":1.0124,\"17\":0.1899,\"18\":-2.8846,\"19\":0.3021,\"20\":-6.7481,\"21\":0.3985,\"22\":-4.174,\"23\":1.1515,\"24\":-1.4622,\"25\":-0.5959,\"26\":0.5139,\"27\":2.9706,\"28\":2.043,\"29\":0.189,\"30\":1.3854,\"31\":-4.0551,\"32\":-2.7276,\"33\":-5.0728,\"34\":4.6398,\"35\":4.0611,\"36\":9.7766,\"37\":0.7044,\"38\":0.8835,\"39\":4.2447,\"40\":0.4375,\"41\":1.0766,\"42\":-1.8893,\"43\":-0.6249,\"44\":-3.2812,\"45\":-0.7335,\"46\":-3.1081,\"47\":-4.3488,\"48\":-2.7436,\"49\":0.7618,\"50\":8.131,\"51\":-0.967,\"52\":3.6646,\"53\":2.5841,\"54\":-2.7902,\"55\":-6.0235,\"56\":-3.595,\"57\":-1.7922,\"58\":-3.8774,\"59\":-2.701,\"60\":3.674,\"61\":13.4126,\"62\":3.4967,\"63\":-0.7306,\"64\":2.8581,\"65\":-1.6179,\"66\":-5.6636,\"67\":-0.8102,\"68\":-2.6126,\"69\":-1.5072,\"70\":1.3759,\"71\":-4.8595,\"72\":0.3855,\"73\":-3.3951,\"74\":-3.4629,\"75\":1.0211,\"76\":3.0887,\"77\":-1.372,\"78\":0.7817,\"79\":-1.4717,\"80\":1.3833,\"81\":1.4233,\"82\":-1.5142,\"83\":-1.7674,\"84\":-2.4652,\"85\":1.913,\"86\":-2.3676,\"87\":-1.0603,\"88\":-6.4953,\"89\":0.4749,\"90\":-5.6628,\"91\":-1.6198,\"92\":-0.4882,\"93\":-4.4501,\"94\":-5.0181,\"95\":1.9535,\"96\":-3.4906,\"97\":0.1522,\"98\":-0.4891,\"99\":6.3273,\"100\":2.2241,\"101\":2.1854,\"102\":6.0501,\"103\":-0.2328,\"104\":-0.542,\"105\":4.1188,\"106\":2.343,\"107\":-4.705,\"108\":1.4819,\"109\":-2.1852,\"110\":-0.2348,\"111\":-0.6274,\"112\":0.7755,\"113\":3.2003,\"114\":-6.7855,\"115\":-3.9196,\"116\":-3.1513,\"117\":-1.4553,\"118\":6.7805,\"119\":5.0117,\"120\":-0.4204,\"121\":2.3323,\"122\":-2.7064,\"123\":-1.9625,\"124\":-3.5944,\"125\":2.7761,\"126\":-1.4873,\"127\":-0.477,\"128\":-1.4658,\"129\":0.2057,\"130\":0.4323,\"131\":-0.8676,\"132\":-0.9874,\"133\":2.4903,\"134\":-3.1455,\"135\":-2.6227,\"136\":5.2044,\"137\":-0.6598,\"138\":1.6745,\"139\":1.5329}}';\n\nvar initGeneRaw = JSON.parse(initGeneJSON2);\n\nvar initGene = convnetjs.zeros(Object.keys(initGeneRaw.gene).length); // Float64 faster.\nfor (var i = 0; i < initGene.length; i++) {\n initGene[i] = initGeneRaw.gene[i];\n}\n\n//initGene = null;\n\n// html elements\nvar myCanvas;\n\nvar handSymbolDisplayed = true;\nfunction moveHandSymbol(x, y) {\n $(\"#theHand\").css({ \n \"position\": \"absolute\",\n \"top\": (y) + \"px\",\n \"left\": (x-32) + \"px\",\n \"font-size\": 3.5 +\"em\",\n \"color\": \"#459AD3\"\n });\n}\n\nfunction hideHandSymbol() {\n if (handSymbolDisplayed) {\n $(\"#theHand\").hide();\n }\n handSymbolDisplayed = false;\n}\n\nfunction showHandSymbol() {\n $(\"#theHand\").fadeIn(500);\n}\n/*\nvar intro = {\n text: null,\n};\n*/\n\n// declare objects\nvar game = {\n ball: null,\n deadball: null,\n ground: null,\n fence: null,\n fenceStub: null,\n agent1: null,\n agent2: null\n};\n\n// deal with mobile device nuances\nvar mobileMode = false;\nvar md = null;\n\n// conversion to pixels\nfunction toX(x) {\n return (x+ref_w/2)*factor;\n}\nfunction toP(x) {\n return (x)*factor;\n}\nfunction toY(y) {\n return height-y*factor;\n}\n\nvar delayScreen = {\n life: initDelayFrames,\n init: function(life) {\n this.life = life;\n },\n status: function() {\n if (this.life === 0) {\n return true;\n }\n this.life -= 1;\n return false;\n }\n};\n\n// objects\nfunction Particle(loc, v, r, c) { // location p5.Vector, velocity p5.Vector, r float, color\n \"use strict\";\n this.loc = loc || createVector(random(-ref_w*1/4, ref_w*1/4), random(ref_w/4, ref_w*3/4));\n //console.log(this.loc);\n this.prevLoc = this.loc.copy();\n this.v = v || createVector(random(-20, 20), random(10, 25));\n this.r = r || random(0.5, 1.5);\n this.c = c || getRandomColor(128);\n}\nParticle.prototype.move = function() {\n this.prevLoc = this.loc.copy();\n this.loc.add(p5.Vector.mult(this.v, timeStep));\n this.v.mult(1-(1-windDrag)*timeStep);\n};\nParticle.prototype.applyAcceleration = function(acceleration) {\n this.v.add(p5.Vector.mult(acceleration, timeStep));\n};\nParticle.prototype.checkEdges = function() {\n if (this.loc.x<=this.r-ref_w/2) {\n this.v.x *= -friction;\n this.loc.x = this.r-ref_w/2+nudge*timeStep;\n }\n if (this.loc.x >= (ref_w/2-this.r)) {\n this.v.x *= -friction;\n this.loc.x = ref_w/2-this.r-nudge*timeStep;\n }\n if (this.loc.y<=this.r+ref_u) {\n this.v.y *= -friction;\n this.loc.y = this.r+ref_u+nudge*timeStep;\n if (this.loc.x <= 0) {\n return -1;\n } else {\n return 1;\n }\n }\n if (this.loc.y >= (ref_h-this.r)) {\n this.v.y *= -friction;\n this.loc.y = ref_h-this.r-nudge*timeStep;\n }\n // fence:\n if ((this.loc.x <= (ref_wallwidth/2+this.r)) && (this.prevLoc.x > (ref_wallwidth/2+this.r)) && (this.loc.y <= ref_wallheight)) {\n this.v.x *= -friction;\n this.loc.x = ref_wallwidth/2+this.r+nudge*timeStep;\n }\n if ((this.loc.x >= (-ref_wallwidth/2-this.r)) && (this.prevLoc.x < (-ref_wallwidth/2-this.r)) && (this.loc.y <= ref_wallheight)) {\n this.v.x *= -friction;\n this.loc.x = -ref_wallwidth/2-this.r-nudge*timeStep;\n }\n return 0;\n};\nParticle.prototype.getDist2 = function(p) { // returns distance squared from p\n var dy = p.loc.y - this.loc.y;\n var dx = p.loc.x - this.loc.x;\n return (dx*dx+dy*dy);\n};\nParticle.prototype.isColliding = function(p) { // returns true if it is colliding w/ p\n var r = this.r + p.r;\n return (r*r > this.getDist2(p)); // if distance is less than total radius, then colliding.\n};\nParticle.prototype.bounce = function(p) { // bounce two balls that have collided (this and that)\n var ab = createVector();\n //debugger;\n ab.set(this.loc);\n ab.sub(p.loc);\n ab.normalize();\n ab.mult(nudge);\n while(this.isColliding(p)) {\n this.loc.add(ab);\n }\n var n = p5.Vector.sub(this.loc, p.loc);\n n.normalize();\n var u = p5.Vector.sub(this.v, p.v);\n var un = p5.Vector.mult(n, u.dot(n)*2); // added factor of 2\n u.sub(un);\n //u.mult(0.5);\n this.v = p5.Vector.add(u, p.v);\n\n //p.v = p5.Vector.add(un, p.v); // don't move the agent.\n};\nParticle.prototype.limitSpeed = function(minSpeed, maxSpeed) {\n var mag2 = this.v.magSq();\n if (mag2 > (maxSpeed*maxSpeed) ) {\n this.v.normalize();\n this.v.mult(maxSpeed);\n }\n if (mag2 < (minSpeed*minSpeed) ) {\n this.v.normalize();\n this.v.mult(minSpeed);\n }\n return;\n};\nParticle.prototype.display = function() {\n \"use strict\";\n noStroke();\n fill(this.c);\n ellipse(toX(this.loc.x), toY(this.loc.y), toP(this.r)*2, toP(this.r)*2);\n};\n\n// design agent's brain using neural network\nfunction Brain() {\n \"use strict\";\n this.nGameInput = 12; // 8 states for agent, plus 4 state for opponent\n this.nGameOutput = 3; // 3 buttons (forward, backward, jump)\n this.nRecurrentState = 4; // extra recurrent states for feedback.\n this.nOutput = this.nGameOutput+this.nRecurrentState;\n this.nInput = this.nGameInput+this.nOutput;\n\n // store current inputs and outputs\n this.inputState = convnetjs.zeros(this.nInput);\n this.convInputState = new convnetjs.Vol(1, 1, this.nInput); // compatible with convnetjs lib input.\n this.outputState = convnetjs.zeros(this.nOutput);\n this.prevOutputState = convnetjs.zeros(this.nOutput);\n\n // setup neural network:\n this.layer_defs = [];\n this.layer_defs.push({\n type: 'input',\n out_sx: 1,\n out_sy: 1,\n out_depth: this.nInput\n });\n this.layer_defs.push({\n type: 'fc',\n num_neurons: this.nOutput,\n activation: 'tanh'\n });\n\n this.net = new convnetjs.Net();\n this.net.makeLayers(this.layer_defs);\n\n var chromosome = new convnetjs.Chromosome(initGene);\n\n chromosome.pushToNetwork(this.net);\n\n //convnetjs.randomizeNetwork(this.net); // set init settings to be random.\n}\nBrain.prototype.populate = function (chromosome) { // populate network with a given chromosome.\n chromosome.pushToNetwork(this.net);\n};\nBrain.prototype.arrayToString = function(x, precision) {\n \"use strict\";\n var result = \"[\";\n for (var i = 0; i < x.length; i++) {\n result += Math.round(precision*x[i])/precision;\n if (i < x.length-1) {\n result += \",\";\n }\n }\n result += \"]\";\n return result;\n};\nBrain.prototype.getInputStateString = function() {\n \"use strict\";\n return this.arrayToString(this.inputState, 100);\n};\nBrain.prototype.getOutputStateString = function() {\n \"use strict\";\n return this.arrayToString(this.outputState, 100);\n};\n// get current input for nn\nBrain.prototype.setCurrentInputState = function (agent, opponent) {\n \"use strict\";\n var i;\n var scaleFactor = 10; // scale inputs to be in the order of magnitude of 10.\n var scaleFeedback = 1; // to scale back up the feedback.\n this.inputState[0] = agent.state.x/scaleFactor;\n this.inputState[1] = agent.state.y/scaleFactor;\n this.inputState[2] = agent.state.vx/scaleFactor;\n this.inputState[3] = agent.state.vy/scaleFactor;\n this.inputState[4] = agent.state.bx/scaleFactor;\n this.inputState[5] = agent.state.by/scaleFactor;\n this.inputState[6] = agent.state.bvx/scaleFactor;\n this.inputState[7] = agent.state.bvy/scaleFactor;\n this.inputState[8] = 0*opponent.state.x/scaleFactor;\n this.inputState[9] = 0*opponent.state.y/scaleFactor;\n this.inputState[10] = 0*opponent.state.vx/scaleFactor;\n this.inputState[11] = 0*opponent.state.vy/scaleFactor;\n for (i = 0; i < this.nOutput; i++) { // feeds back output to input\n this.inputState[i+this.nGameInput] = this.outputState[i]*scaleFeedback;\n }\n\n for (i = 0; i < this.nInput; i++) { // copies input state into convnet cube object format to be used later.\n this.convInputState.w[i] = this.inputState[i];\n }\n\n};\nBrain.prototype.forward = function () {\n \"use strict\";\n // get output from neural network:\n var a = this.net.forward(this.convInputState);\n for (var i = 0; i < this.nOutput; i++) {\n this.prevOutputState[i] = this.outputState[i]; // backs up previous value.\n this.outputState[i] = a.w[i];\n }\n};\n\nfunction matchFunction(chromosome1, chromosome2) { // this function is passed to trainer.\n var result = 0;\n var oldInitDelayFrames = initDelayFrames;\n initDelayFrames = 1;\n trainingMode = true;\n initGame();\n // put chromosomes into brains before getting them to duel it out.\n game.agent1.brain.populate(chromosome1);\n game.agent2.brain.populate(chromosome2);\n result = update(trainingFrames); // the dual\n trainingMode = false;\n initDelayFrames = oldInitDelayFrames;\n return result; // -1 means chromosome1 beat chromosome2, 1 means vice versa, 0 means tie.\n}\n\nfunction Trainer(brain, initialGene) {\n // trainer for neural network interface. must pass in an initial brain so it knows the net topology.\n // the constructor won't modify the brain object passed in.\n\n this.net = new convnetjs.Net();\n this.net.makeLayers(brain.layer_defs);\n\n this.trainer = new convnetjs.GATrainer(this.net, {\n population_size: 50*1,\n mutation_size: 0.1,\n mutation_rate: 0.05,\n num_match: 4*2,\n elite_percentage: 0.20\n }, initialGene);\n\n}\nTrainer.prototype.train = function() {\n this.trainer.matchTrain(matchFunction);\n};\nTrainer.prototype.getChromosome = function(n) {\n // returns a copy of the nth best chromosome (if not provided, returns first one, which is the best one)\n n = n || 0;\n return this.trainer.chromosomes[n].clone();\n};\n\nfunction Agent(dir, loc, c) {\n \"use strict\";\n this.dir = dir; // -1 means left, 1 means right player for symmetry.\n this.loc = loc || createVector(ref_w/4, 1.5);\n this.v = createVector(0, 0);\n this.desiredVelocity = createVector(0, 0);\n this.r = 1.5;\n this.c = c;\n this.opponent = null;\n this.score = 0;\n this.emotion = \"happy\"; // hehe...\n this.scoreSize = baseScoreFontSize; // font size for score.\n this.action = { // the current set of actions the agent wants to take \n forward : false, // this set of actions can be set either by neural net, or keyboard\n backward : false,\n jump : false\n };\n this.actionIntensity = [0, 0, 0];\n this.state = { // complete game state for this agent. used by neural network.\n x: 0, // normalized to side, appears different for each agent's perspective\n y: 0,\n vx: 0,\n vy: 0,\n bx: 0, \n by: 0,\n bvx: 0,\n bvy: 0\n };\n this.brain = new Brain();\n}\nAgent.prototype.setOpponent = function(opponent) { // sets the opponent into this agent\n \"use strict\";\n this.opponent = opponent;\n};\nAgent.prototype.setAction = function(forward, backward, jump) {\n \"use strict\";\n this.action.forward = forward;\n this.action.backward = backward;\n this.action.jump = jump;\n};\nAgent.prototype.setBrainAction = function() {\n \"use strict\"; // this function converts the brain's output layer into actions to move forward, backward, or jump\n var forward = this.brain.outputState[0] > 0.75; // sigmoid decision.\n var backward = this.brain.outputState[1] > 0.75; // sigmoid decision.\n var jump = this.brain.outputState[2] > 0.75; // sigmoid decision.\n this.setAction(forward, backward, jump);\n};\nAgent.prototype.processAction = function() { // convert action into real movement\n \"use strict\";\n var forward = this.action.forward;\n var backward = this.action.backward;\n var jump = this.action.jump;\n this.desiredVelocity.x = 0;\n this.desiredVelocity.y = 0;\n\n if (forward && !backward) {\n this.desiredVelocity.x = -playerSpeedX;\n }\n if (backward && !forward) {\n this.desiredVelocity.x = playerSpeedX;\n }\n\n if (jump) {\n this.desiredVelocity.y = playerSpeedY;\n }\n};\nAgent.prototype.move = function() {\n \"use strict\";\n this.loc.add(p5.Vector.mult(this.v, timeStep));\n};\nAgent.prototype.getState = function() { // returns game state for this agent\n \"use strict\";\n this.state = { // complete game state for this agent. used by neural network.\n x: this.loc.x*this.dir, // normalized to side, appears different for each agent's perspective\n y: this.loc.y,\n vx: this.v.x*this.dir,\n vy: this.v.y,\n bx: game.ball.loc.x*this.dir, \n by: game.ball.loc.y,\n bvx: game.ball.v.x*this.dir,\n bvy: game.ball.v.y\n };\n return this.state;\n};\nAgent.prototype.printState = function() {\n // prints the state of the agent on the side of the screen the agent is on\n // uses p5.js text functions\n \"use strict\";\n // print fps\n var r = 10;\n var stateText = '';\n var state = this.getState();\n stateText += 'X: '+Math.round(state.x*r)/r+'\\n';\n stateText += 'Y: '+Math.round(state.y*r)/r+'\\n';\n stateText += 'vx: '+Math.round(state.vx*r)/r+'\\n';\n stateText += 'vy: '+Math.round(state.vy*r)/r+'\\n';\n stateText += 'bx: '+Math.round(state.bx*r)/r+'\\n';\n stateText += 'by: '+Math.round(state.by*r)/r+'\\n';\n stateText += 'bvx: '+Math.round(state.bvx*r)/r+'\\n';\n stateText += 'bvy: '+Math.round(state.bvy*r)/r+'\\n';\n fill(this.c);\n stroke(this.c);\n textFont(\"Courier New\");\n textSize(16);\n text(stateText, toX(this.dir*ref_w/4), toP(ref_u));\n};\nAgent.prototype.drawState = function(human) { // illustrates inputState and output actions on p5 canvas\n \"use strict\";\n var brain = this.brain;\n var r = red(this.c);\n var g = green(this.c);\n var b = blue(this.c);\n var i, j = 0;\n var temp;\n var radius = ref_w/2/((brain.nGameInput-4)+4);\n var factor = 3/4;\n var startX = ref_w/4 - radius*((brain.nGameInput-4)/2);\n var ballFactor = 1.0;\n var startX2 = ref_w/4 - ballFactor*radius*(brain.nGameOutput/2);\n var secondLayerY = Math.max(height*1/8+toP(radius)+0.5*toP(radius), height*3/16);\n\n this.actionIntensity[0] += (this.action.forward ? 16 : 0);\n this.actionIntensity[1] += (this.action.jump ? 16 : 0);\n this.actionIntensity[2] += (this.action.backward ? 16 : 0);\n\n if (!human) {\n for (i = 0; i < (brain.nGameInput-4); i++) {\n\n noStroke();\n fill(r, g, b, brain.inputState[i]*32+8);\n ellipse(toX((startX+i*radius)*this.dir), height*1/8+toP(radius), toP(radius*factor), toP(radius*factor));\n\n for (j = 0; j < brain.nGameOutput; j++) {\n\n if (this.actionIntensity[j] > 64) {\n stroke(r, g, b, brain.inputState[i]*32);\n line(toX((startX+i*radius)*this.dir), height*1/8+toP(radius), toX((startX2+ballFactor*j*radius)*this.dir), secondLayerY+(ballFactor+0)*toP(radius));\n }\n }\n\n }\n }\n\n for (j = 0; j < brain.nGameOutput; j++) {\n\n this.actionIntensity[j] -= 4;\n this.actionIntensity[j] = Math.min(this.actionIntensity[j], 128);\n this.actionIntensity[j] = Math.max(this.actionIntensity[j], 16);\n\n noStroke();\n fill(r, g, b, (this.actionIntensity[j]));\n ellipse(toX((startX2+ballFactor*j*radius)*this.dir), secondLayerY+(ballFactor+0)*toP(radius), toP(radius*factor)*ballFactor, toP(radius*factor)*ballFactor);\n\n }\n\n\n};\nAgent.prototype.update = function() {\n \"use strict\";\n this.v.add(p5.Vector.mult(gravity, timeStep));\n if (this.loc.y <= ref_u + nudge*timeStep) {\n this.v.y = this.desiredVelocity.y;\n }\n this.v.x = this.desiredVelocity.x*this.dir;\n this.move();\n if (this.loc.y <= ref_u) {\n this.loc.y = ref_u;\n this.v.y = 0;\n }\n\n // stay in their own half:\n if (this.loc.x*this.dir <= (ref_wallwidth/2+this.r) ) {\n this.v.x = 0;\n this.loc.x = this.dir*(ref_wallwidth/2+this.r);\n }\n if (this.loc.x*this.dir >= (ref_w/2-this.r) ) {\n this.v.x = 0;\n this.loc.x = this.dir*(ref_w/2-this.r);\n }\n};\nAgent.prototype.display = function() {\n \"use strict\";\n var x = this.loc.x;\n var y = this.loc.y;\n var r = this.r;\n var angle = 60;\n var eyeX = 0;\n var eyeY = 0;\n\n if (this.dir === 1) angle = 135;\n noStroke();\n fill(this.c);\n //ellipse(toX(x), toY(y), toP(r)*2, toP(r)*2);\n arc(toX(x), toY(y), toP(r)*2, toP(r)*2, Math.PI, 2*Math.PI);\n /*\n fill(255);\n rect(toX(x-r), toY(y), 2*r*factor, r*factor);\n */\n\n // track ball with eyes (replace with observed info later):\n var ballX = game.ball.loc.x-(x+(0.6)*r*fastCos(angle));\n var ballY = game.ball.loc.y-(y+(0.6)*r*fastSin(angle));\n if (this.emotion === \"sad\") {\n ballX = -this.dir;\n ballY = -2;\n }\n var dist = Math.sqrt(ballX*ballX+ballY*ballY);\n eyeX = ballX/dist;\n eyeY = ballY/dist;\n\n fill(255);\n ellipse(toX(x+(0.6)*r*fastCos(angle)), toY(y+(0.6)*r*fastSin(angle)), toP(r)*0.6, toP(r)*0.6);\n fill(0);\n ellipse(toX(x+(0.6)*r*fastCos(angle)+eyeX*0.15*r), toY(y+(0.6)*r*fastSin(angle)+eyeY*0.15*r), toP(r)*0.2, toP(r)*0.2);\n\n};\nAgent.prototype.drawScore = function() {\n \"use strict\";\n var r = red(this.c);\n var g = green(this.c);\n var b = blue(this.c);\n var size = this.scoreSize;\n var factor = 0.95;\n this.scoreSize = baseScoreFontSize + (this.scoreSize-baseScoreFontSize) * factor;\n\n if (this.score > 0) {\n textFont(\"Courier New\");\n textSize(size);\n //stroke(255);\n stroke(r, g, b, 128*(baseScoreFontSize/this.scoreSize));\n fill(r, g, b, 64*(baseScoreFontSize/this.scoreSize));\n textAlign(this.dir === -1? LEFT:RIGHT);\n text(this.score, this.dir === -1? size*3/4 : width-size/4, size/2+height/3);\n }\n\n};\n\nfunction Wall(x, y, w, h) {\n \"use strict\";\n this.x = x;\n this.y = y;\n this.w = w;\n this.h = h;\n this.c = color(0, 200, 50, 128);\n}\n\nWall.prototype.display = function() {\n \"use strict\";\n noStroke();\n fill(255);\n rect(toX(this.x-this.w/2), toY(this.y+this.h/2), toP(this.w), toP(this.h));\n fill(this.c);\n rect(toX(this.x-this.w/2), toY(this.y+this.h/2), toP(this.w), toP(this.h));\n};\n\nfunction initGame() {\n game.ball = new Particle(createVector(0, ref_w/4));\n game.ball.r = 0.25;\n\n game.agent1 = game.agent1 || new Agent(-1, createVector(-ref_w/4, 1.5), color(240, 75, 0, 255));\n game.agent2 = game.agent2 || new Agent(1, createVector(ref_w/4, 1.5), color(0, 150, 255, 255));\n\n game.agent1.setOpponent(game.agent2); // point agent to the other agent as an opponent.\n game.agent2.setOpponent(game.agent1);\n\n human1 = false;\n human2 = false;\n\n delayScreen.init(initDelayFrames);\n}\n\nfunction setup() {\n \"use strict\";\n\n // deal with mobile device nuances\n md = new MobileDetect(window.navigator.userAgent);\n if (md.mobile()) {\n mobileMode = true;\n console.log('mobile: '+md.mobile());\n } else {\n theFrameRate /= 2;\n console.log('not mobile');\n }\n\n myCanvas = createCanvas(windowWidth,windowHeight);\n factor = windowWidth / ref_w;\n ref_h = ref_w;\n myCanvas.parent('p5Container');\n frameRate(theFrameRate);\n\n // create html elements\n //http://otoro.net/slimevolley/\n\n //intro.text = createA(\"http://blog.otoro.net/2015/03/28/neural-slime-volleyball/\", \"neural slime volleyball\", \"_blank\");\n //intro.text.position(32+width/32, height/32);\n\n gravity = createVector(0, theGravity);\n\n // setup game objects\n game.ground = new Wall(0, 0.75, ref_w, ref_u);\n game.fence = new Wall(0, 0.75 + ref_wallheight/2, ref_wallwidth, (ref_wallheight-1.5));\n game.fence.c = color(240, 210, 130, 255);\n game.fenceStub = new Particle(createVector(0, ref_wallheight), createVector(0, 0), ref_wallwidth/2, color(240, 210, 130, 255));\n\n initGame();\n\n trainer = new Trainer(game.agent1.brain, initGene);\n game.agent1.brain.populate(trainer.getChromosome()); // best one\n game.agent2.brain.populate(trainer.getChromosome()); // best one\n}\n\n// updates game element according to physics\nfunction update(nStep) {\n \"use strict\";\n\n var result = 0;\n\n for (var step = 0; step < nStep; step++) {\n\n // ai here\n // update internal states\n game.agent1.getState();\n game.agent2.getState();\n // push states to brain\n game.agent1.brain.setCurrentInputState(game.agent1, game.agent2);\n game.agent2.brain.setCurrentInputState(game.agent2, game.agent1);\n // make a decision\n game.agent1.brain.forward();\n game.agent2.brain.forward();\n // convert brain's output signals into game actions\n game.agent1.setBrainAction();\n game.agent2.setBrainAction();\n\n // get human keyboard control\n if (!trainingMode) {\n keyboardControl(); // may want to disable this for speed.\n touchControl(); // mobile device\n betweenGameControl();\n }\n\n // process actions\n game.agent1.processAction();\n game.agent2.processAction();\n game.agent1.update();\n game.agent2.update();\n\n if (delayScreen.status() === true) {\n game.ball.applyAcceleration(gravity);\n game.ball.limitSpeed(0, maxBallSpeed);\n game.ball.move();\n }\n\n if (game.ball.isColliding(game.agent1)) {\n game.ball.bounce(game.agent1);\n }\n if (game.ball.isColliding(game.agent2)) {\n game.ball.bounce(game.agent2);\n }\n if (game.ball.isColliding(game.fenceStub)) {\n game.ball.bounce(game.fenceStub);\n }\n\n result = game.ball.checkEdges();\n if (Math.abs(result) > 0) {\n // make graphics for dead ball\n if (!trainingMode) {\n game.deadball = new Particle(game.ball.loc.copy());\n game.deadball.r = 0.25;\n game.deadball.life = initDelayFrames;\n }\n initGame();\n if (!trainingMode) {\n console.log('player '+(result > 0? '1' : '2')+' won.');\n if (result > 0) {\n game.agent1.score += 1;\n game.agent1.scoreSize *= 4;\n game.agent1.emotion = \"happy\";\n game.agent2.emotion = \"sad\";\n } else {\n game.agent2.score += 1;\n game.agent2.scoreSize *= 4;\n game.agent2.emotion = \"happy\";\n game.agent1.emotion = \"sad\";\n }\n }\n return result;\n }\n\n }\n\n return result; // 0 means tie, -1 means landed on left side, 1 means landed on right side.\n}\n\nfunction drawScenery() {\n // draws the scenery\n for (var i = 0; i < 24; i++) {\n noStroke();\n fill(50, 100, 240, 16*(24-i)/24);\n rect(0, i*height/24/3, width, height/24/3);\n }\n fill(255, 240, 0, 64);\n noStroke();\n ellipse(toX(-ref_w/4), 1*height/2, 2*factor, 2*factor);\n fill(50, 255, 50, 16);\n ellipse(toX(ref_w/8), toY(-1.5), 12*factor, 20*factor);\n fill(50, 255, 50, 16);\n ellipse(toX(-ref_w/8), toY(-1.5), 8*factor, 12*factor);\n fill(50, 255, 50, 16);\n ellipse(toX(ref_w/3), toY(-1.5), 6*factor, 24*factor);\n}\n\nfunction keyboardControl() {\n // player 1:\n var a1_forward = 68; // 'd' key\n var a1_backward = 65; // 'a' key\n var a1_jump = 87; // 'w' key\n // player 2:\n var a2_forward = LEFT_ARROW;\n var a2_backward = RIGHT_ARROW;\n var a2_jump = UP_ARROW;\n\n if (keyIsDown(a1_forward) || keyIsDown(a1_backward) || keyIsDown(a1_jump)) {\n human1 = true;\n humanHasControlled = true;\n }\n if (human1) {\n game.agent1.setAction(keyIsDown(a1_forward), keyIsDown(a1_backward), keyIsDown(a1_jump));\n }\n\n if (keyIsDown(a2_forward) || keyIsDown(a2_backward) || keyIsDown(a2_jump)) {\n human2 = true;\n humanHasControlled = true;\n }\n if (human2) {\n game.agent2.setAction(keyIsDown(a2_forward), keyIsDown(a2_backward), keyIsDown(a2_jump));\n }\n\n}\n\nfunction touchControl() {\n \"use strict\";\n var paddingY = height/64;\n var paddingX = width/64;\n var dx = 0;\n var dy = 0;\n var x = 0;\n var y = 0;\n var agentX = toX(game.agent2.loc.x);\n var agentY = toY(game.agent2.loc.y);\n var jumpY = toY(ref_wallheight*2);\n var gestureEvent = false;\n\n if (touchIsDown) {\n x = touchX;\n y = touchY;\n dx = touchX-ptouchX;\n dy = touchY-ptouchY;\n gestureEvent = true;\n }\n\n if (mouseIsPressed) {\n x = mouseX;\n y = mouseY;\n dx = mouseX-pmouseX;\n dy = mouseY-pmouseY;\n gestureEvent = true;\n }\n\n if (gestureEvent) {\n human2 = true;\n humanHasControlled = true;\n game.agent2.setAction((x - agentX) < -paddingX, (x - agentX) > paddingX, dy < -paddingY);\n }\n\n}\n\n// between end of this match to the next match. guy wins jumps, guy who loses regrets...\nfunction betweenGameControl() {\n \"use strict\";\n var agent = [game.agent1, game.agent2];\n if (delayScreen.life > 0) {\n for (var i = 0; i < 2; i++) {\n if (agent[i].emotion === \"happy\") {\n agent[i].action.jump = true;\n } else {\n agent[i].action.jump = false;\n }\n }\n } else {\n agent[0].emotion = \"happy\";\n agent[1].emotion = \"happy\";\n }\n}\n\nfunction getNNDebugString() {\n \"use strict\";\n var result = \"\";\n result += \"agent1:\\n\";\n result += \"input1: \"+JSON.stringify(game.agent1.brain.getInputStateString())+\"\\n\";\n result += \"output1: \"+JSON.stringify(game.agent1.brain.getOutputStateString())+\"\\n\";\n result += \"agent2:\\n\";\n result += \"input2: \"+JSON.stringify(game.agent2.brain.getInputStateString())+\"\\n\";\n result += \"output2: \"+JSON.stringify(game.agent2.brain.getOutputStateString())+\"\\n\";\n return result;\n}\n\nfunction arrayToString(x, precision) {\n \"use strict\";\n precision = precision || 1000;\n var result = \"[\";\n for (var i = 0; i < x.length; i++) {\n result += Math.round(precision*x[i])/precision;\n if (i < x.length-1) {\n result += \",\";\n }\n }\n result += \"]\";\n return result;\n}\n\n// cool p5.js functions to draw p-noise bouncy keyboard control graphics.\nvar pNoiseSeed = 0;\nfunction drawArrowKeyboard(x, y, s1, c, intensity, theColor) {\n \"use strict\";\n\n var rc = red(theColor);\n var gc = green(theColor);\n var bc = blue(theColor);\n\n function nextNoise() {\n var pFactor = 10;\n var f = 5;\n pNoiseSeed = pNoiseSeed || 0;\n pNoiseSeed += 1;\n return (noise(pNoiseSeed / pFactor)-0.5)*f;\n }\n\n function drawArrowKey(x, y, s, r) {\n\n\n var f = 5;\n //console.log(nextNoise());\n stroke(rc, gc, bc, intensity);\n noFill();\n beginShape();\n var x1offset = nextNoise();\n var y1offset = nextNoise();\n var x2offset = nextNoise();\n var y2offset = nextNoise();\n var x3offset = nextNoise();\n var y3offset = nextNoise();\n curveVertex(x-s+x1offset, y+s-r+y1offset);\n curveVertex(x-s+x2offset, y-s+r+y2offset);\n curveVertex(x-s+r+x3offset, y-s+y3offset);\n curveVertex(x+s-r+nextNoise(), y-s+nextNoise());\n curveVertex(x+s+nextNoise(), y-s+r+nextNoise());\n curveVertex(x+s+nextNoise(), y+s-r+nextNoise());\n curveVertex(x+s-r+nextNoise(), y+s+nextNoise());\n curveVertex(x-s+r+nextNoise(), y+s+nextNoise());\n curveVertex(x-s+x1offset, y+s-r+y1offset);\n curveVertex(x-s+x2offset, y-s+r+y2offset);\n curveVertex(x-s+r+x3offset, y-s+y3offset);\n endShape();\n noStroke();\n }\n\n var s2 = s1 * 0.8;\n var r1 = s1 * 0.2;\n var r2 = s2 * 0.2;\n var fontSize = 32;\n\n function drawFullKey(x, y, c) {\n drawArrowKey(x, y, s1/2, r1);\n drawArrowKey(x, y, s2/2, r2);\n\n stroke(rc, gc, bc, intensity);\n fill(rc, gc, bc, intensity);\n\n text(c, x+nextNoise()/1-fontSize/2, y+nextNoise()/1+fontSize/4);\n }\n\n textFont(\"monospace\");\n textSize(fontSize);\n drawFullKey(x-s1, y, c[0]);\n drawFullKey(x, y-s1, c[1]);\n drawFullKey(x+s1, y, c[2]);\n\n}\n\n// n = 1, first agent, n = 2, second agent.\nfunction drawAgentKeyboard(x, y, s, n, intensity, theColor) {\n var c = ['ａ', 'ｗ', 'ｄ'];\n if (n == 2) c = ['◀', '▲', '▶'];\n drawArrowKeyboard(x, y, s, c, intensity, theColor);\n}\n\nfunction draw() {\n \"use strict\";\n var result = 0;\n\n background(255);\n\n // draw box around frame\n\n result = update(1);\n\n if (result !== 0 && traningVersion) { // someone has lost\n var genStep = 50;\n console.log('training generation #'+(generationCounter+genStep));\n for (var i = 0; i < genStep; i++) {\n trainer.train();\n }\n // print results\n for (i = 0; i < 4; i++) {\n console.log('#'+i+':'+Math.round(100*trainer.getChromosome(i).fitness)/100);\n }\n var N = trainer.trainer.population_size;\n for (i = N-4; i < N; i++) {\n console.log('#'+i+':'+Math.round(100*trainer.getChromosome(i).fitness)/100);\n }\n if (traningVersion) {\n $(\"#nn_gene\").text(JSON.stringify(trainer.getChromosome()));\n }\n generationCounter += genStep;\n initGame();\n game.agent1.brain.populate(trainer.getChromosome(0)); // best one\n game.agent2.brain.populate(trainer.getChromosome(1)); // second best one\n }\n\n // draw the game objects\n drawScenery();\n game.agent1.display();\n game.agent2.display();\n\n if (!mobileMode && showArrowKeys & !humanHasControlled) {\n var intensity = 64*Math.min(16*(delayScreen.life/initDelayFrames)*(initDelayFrames-delayScreen.life)/initDelayFrames, 64);\n drawAgentKeyboard(width/4, toY(ref_wallheight*1), width/12, 1, intensity, game.agent1.c);\n drawAgentKeyboard(3*width/4, toY(ref_wallheight*1), width/12, 2, intensity, game.agent2.c);\n }\n if (!humanHasControlled && handSymbolDisplayed ) {\n moveHandSymbol(toX(game.agent2.loc.x), toY(game.agent2.loc.y)-height/2.5);\n } else {\n hideHandSymbol();\n }\n\n game.ball.c = color(255, 200, 20, 255*Math.max((initDelayFrames-delayScreen.life)/initDelayFrames, 0));\n game.ball.display();\n game.ground.display();\n game.fence.display();\n game.fenceStub.display();\n\n // prints agent states (used for nn input)\n //game.agent1.printState();\n //game.agent2.printState();\n\n game.agent1.drawState(human1);\n game.agent2.drawState(human2);\n\n game.agent1.drawScore();\n game.agent2.drawScore();\n\n // draw dead ball\n if (game.deadball) {\n game.deadball.life -= 1;\n game.deadball.c = color(250, 0, 0, 128*(game.deadball.life/initDelayFrames));\n game.deadball.display();\n if (game.deadball.life <= 0) {\n game.deadball = null;\n }\n }\n\n //$(\"#nn_weights\").text(getNNDebugString());\n\n}\n\nfunction windowResized() {\n \"use strict\";\n resizeCanvas(windowWidth, windowHeight);\n myCanvas.size(windowWidth, windowHeight);\n factor = windowWidth / ref_w;\n}\n\n// When the mouse is released \nvar deviceReleased = function() {\n \"use strict\";\n};\n\n// When the mouse is pressed we. . .\nvar devicePressed = function(x, y) {\n \"use strict\";\n};\n\nvar deviceDragged = function(x, y) {\n \"use strict\";\n};\n\nvar mousePressed = function() {\n \"use strict\";\n devicePressed(mouseX, mouseY);\n return false;\n};\n\nvar touchStarted = function() {\n \"use strict\";\n devicePressed(touchX, touchY);\n return false;\n};\n\n// interaction with touchpad and mosue:\n\nvar mouseDragged = function() {\n \"use strict\";\n deviceDragged(mouseX, mouseY);\n return false;\n};\n\nvar touchMoved = function() {\n \"use strict\";\n return false;\n};\n\nvar mouseReleased = function() {\n \"use strict\";\n return false;\n};\n\nvar touchEnded = function() {\n \"use strict\";\n return false;\n};\n\n\n\n" }, { "path": "slimevolley_pro.js", "content": "\n\n/* \n\np5.js implementation of slime volleyball, with evolved neural networks to be the ai.\n\n@licstart The following is the entire license notice for the \nJavaScript code in this page.\n\nCopyright (C) 2015 david ha, otoro.net, otoro labs\n\nThe JavaScript code in this page is free software: you can\nredistribute it and/or modify it under the terms of the GNU\nGeneral Public License (GNU GPL) as published by the Free Software\nFoundation, either version 3 of the License, or (at your option)\nany later version. The code is distributed WITHOUT ANY WARRANTY;\nwithout even the implied warranty of MERCHANTABILITY or FITNESS\nFOR A PARTICULAR PURPOSE. See the GNU GPL for more details.\n\nAs additional permission under GNU GPL version 3 section 7, you\nmay distribute non-source (e.g., minimized or compacted) forms of\nthat code without the copy of the GNU GPL normally required by\nsection 4, provided you include this license notice and a URL\nthrough which recipients can access the Corresponding Source. \n\n\n@licend The above is the entire license notice\nfor the JavaScript code in this page.\n*/\n\n// game settings:\nvar showArrowKeys = true;\nvar ref_w = 24*2;\nvar ref_h = ref_w;\nvar ref_u = 1.5; // ground height\nvar ref_wallwidth = 1.0; // wall width\nvar ref_wallheight = 3.5;\nvar factor = 1;\nvar playerSpeedX = 10*1.75;\nvar playerSpeedY = 10*1.35;\nvar maxBallSpeed = 15*1.5;\nvar gravity;\nvar timeStep = 1/30;\nvar theFrameRate = 60*1;\nvar nudge = 0.1;\nvar friction = 1.0; // 1 means no friction, less means friction\nvar windDrag = 1.0;\nvar initDelayFrames = 30*2*1;\nvar trainingFrames = 30*20; // assume each match is 7 seconds. (vs 30fps)\nvar theGravity = -9.8*2*1.5;\nvar trainingMode = false;\nvar human1 = false; // if this is true, then player 1 is controlled by keyboard\nvar human2 = false; // same as above\nvar humanHasControlled = false;\nvar trainer = null;\nvar generationCounter = 0;\nvar baseScoreFontSize = 64;\n//var trainingVersion = false; // this variable is stored on html file pro.html\n\nvar initGeneJSON = '{\"fitness\":1.3846153846153846,\"nTrial\":0,\"gene\":{\"0\":7.5555,\"1\":4.5121,\"2\":2.357,\"3\":0.139,\"4\":-8.3413,\"5\":-2.36,\"6\":-3.3343,\"7\":0.0262,\"8\":-7.4142,\"9\":-8.0999,\"10\":2.1553,\"11\":2.4759,\"12\":1.5587,\"13\":-0.7062,\"14\":0.2747,\"15\":0.1406,\"16\":0.8988,\"17\":0.4121,\"18\":-2.082,\"19\":1.4061,\"20\":-12.1837,\"21\":1.2683,\"22\":-0.3427,\"23\":-6.1471,\"24\":5.064,\"25\":1.2345,\"26\":0.3956,\"27\":-2.5808,\"28\":0.665,\"29\":-0.0652,\"30\":0.1629,\"31\":-2.3924,\"32\":-3.9673,\"33\":-6.1155,\"34\":5.97,\"35\":2.9588,\"36\":6.6727,\"37\":-2.2779,\"38\":2.0302,\"39\":13.094,\"40\":2.7659,\"41\":-1.3683,\"42\":2.5079,\"43\":-2.6932,\"44\":-2.0672,\"45\":-4.2688,\"46\":-4.9919,\"47\":-1.1571,\"48\":-2.0693,\"49\":2.9565,\"50\":9.6875,\"51\":-0.7638,\"52\":-1.5896,\"53\":2.4563,\"54\":-2.5956,\"55\":-9.8478,\"56\":-4.9463,\"57\":-3.4502,\"58\":-3.0604,\"59\":-1.158,\"60\":6.3533,\"61\":16.0047,\"62\":1.4911,\"63\":7.9886,\"64\":2.3879,\"65\":-4.5006,\"66\":-1.8171,\"67\":0.9859,\"68\":-2.414,\"69\":-1.5698,\"70\":2.5173,\"71\":-8.6187,\"72\":-0.3068,\"73\":-3.6185,\"74\":-5.202,\"75\":-0.05,\"76\":7.2617,\"77\":-3.1099,\"78\":0.9881,\"79\":-0.5022,\"80\":1.6499,\"81\":2.1346,\"82\":2.8479,\"83\":2.1166,\"84\":-6.177,\"85\":0.2584,\"86\":-3.7623,\"87\":-4.8107,\"88\":-9.1331,\"89\":-2.9681,\"90\":-7.1177,\"91\":-1.4894,\"92\":-1.1885,\"93\":-4.1906,\"94\":-5.821,\"95\":-4.3202,\"96\":-1.4603,\"97\":2.3514,\"98\":-4.8101,\"99\":3.6935,\"100\":1.388,\"101\":3.2504,\"102\":6.6364,\"103\":-3.7216,\"104\":1.6191,\"105\":6.4388,\"106\":0.4765,\"107\":-4.4931,\"108\":-1.1007,\"109\":-4.3594,\"110\":-2.9777,\"111\":-0.3744,\"112\":3.5822,\"113\":3.9402,\"114\":-9.2382,\"115\":-4.3392,\"116\":0.2103,\"117\":-1.3699,\"118\":9.2494,\"119\":10.8483,\"120\":0.2389,\"121\":2.6535,\"122\":-8.2731,\"123\":-3.5133,\"124\":-5.0808,\"125\":3.0846,\"126\":-0.4851,\"127\":0.3938,\"128\":0.2459,\"129\":-0.3466,\"130\":-0.1684,\"131\":-0.7868,\"132\":-0.6009,\"133\":2.5491,\"134\":-3.2234,\"135\":-3.3352,\"136\":4.7229,\"137\":-4.1547,\"138\":3.6065,\"139\":-0.1261}}';\n\nvar initGeneRaw = JSON.parse(initGeneJSON);\n\nvar initGene = convnetjs.zeros(Object.keys(initGeneRaw.gene).length); // Float64 faster.\nfor (var i = 0; i < initGene.length; i++) {\n initGene[i] = initGeneRaw.gene[i];\n}\n\n//initGene = null;\n\n// html elements\nvar myCanvas;\n\nvar handSymbolDisplayed = true;\nfunction moveHandSymbol(x, y) {\n $(\"#theHand\").css({ \n \"position\": \"absolute\",\n \"top\": (y) + \"px\",\n \"left\": (x-32) + \"px\",\n \"font-size\": 3.5 +\"em\",\n \"color\": \"#459AD3\"\n });\n}\n\nfunction hideHandSymbol() {\n if (handSymbolDisplayed) {\n $(\"#theHand\").hide();\n }\n handSymbolDisplayed = false;\n}\n\nfunction showHandSymbol() {\n $(\"#theHand\").fadeIn(500);\n}\n/*\nvar intro = {\n text: null,\n};\n*/\n\n// declare objects\nvar game = {\n ball: null,\n deadball: null,\n ground: null,\n fence: null,\n fenceStub: null,\n agent1: null,\n agent2: null\n};\n\n// deal with mobile device nuances\nvar mobileMode = false;\nvar md = null;\n\n// conversion to pixels\nfunction toX(x) {\n return (x+ref_w/2)*factor;\n}\nfunction toP(x) {\n return (x)*factor;\n}\nfunction toY(y) {\n return height-y*factor;\n}\n\nvar delayScreen = {\n life: initDelayFrames,\n init: function(life) {\n this.life = life;\n },\n status: function() {\n if (this.life === 0) {\n return true;\n }\n this.life -= 1;\n return false;\n }\n};\n\n// objects\nfunction Particle(loc, v, r, c) { // location p5.Vector, velocity p5.Vector, r float, color\n \"use strict\";\n this.loc = loc || createVector(random(-ref_w*1/4, ref_w*1/4), random(ref_w/4, ref_w*3/4));\n //console.log(this.loc);\n this.prevLoc = this.loc.copy();\n this.v = v || createVector(random(-20, 20), random(10, 25));\n this.r = r || random(0.5, 1.5);\n this.c = c || getRandomColor(128);\n}\nParticle.prototype.move = function() {\n this.prevLoc = this.loc.copy();\n this.loc.add(p5.Vector.mult(this.v, timeStep));\n this.v.mult(1-(1-windDrag)*timeStep);\n};\nParticle.prototype.applyAcceleration = function(acceleration) {\n this.v.add(p5.Vector.mult(acceleration, timeStep));\n};\nParticle.prototype.checkEdges = function() {\n if (this.loc.x<=this.r-ref_w/2) {\n this.v.x *= -friction;\n this.loc.x = this.r-ref_w/2+nudge*timeStep;\n }\n if (this.loc.x >= (ref_w/2-this.r)) {\n this.v.x *= -friction;\n this.loc.x = ref_w/2-this.r-nudge*timeStep;\n }\n if (this.loc.y<=this.r+ref_u) {\n this.v.y *= -friction;\n this.loc.y = this.r+ref_u+nudge*timeStep;\n if (this.loc.x <= 0) {\n return -1;\n } else {\n return 1;\n }\n }\n if (this.loc.y >= (ref_h-this.r)) {\n this.v.y *= -friction;\n this.loc.y = ref_h-this.r-nudge*timeStep;\n }\n // fence:\n if ((this.loc.x <= (ref_wallwidth/2+this.r)) && (this.prevLoc.x > (ref_wallwidth/2+this.r)) && (this.loc.y <= ref_wallheight)) {\n this.v.x *= -friction;\n this.loc.x = ref_wallwidth/2+this.r+nudge*timeStep;\n }\n if ((this.loc.x >= (-ref_wallwidth/2-this.r)) && (this.prevLoc.x < (-ref_wallwidth/2-this.r)) && (this.loc.y <= ref_wallheight)) {\n this.v.x *= -friction;\n this.loc.x = -ref_wallwidth/2-this.r-nudge*timeStep;\n }\n return 0;\n};\nParticle.prototype.getDist2 = function(p) { // returns distance squared from p\n var dy = p.loc.y - this.loc.y;\n var dx = p.loc.x - this.loc.x;\n return (dx*dx+dy*dy);\n};\nParticle.prototype.isColliding = function(p) { // returns true if it is colliding w/ p\n var r = this.r + p.r;\n return (r*r > this.getDist2(p)); // if distance is less than total radius, then colliding.\n};\nParticle.prototype.bounce = function(p) { // bounce two balls that have collided (this and that)\n var ab = createVector();\n //debugger;\n ab.set(this.loc);\n ab.sub(p.loc);\n ab.normalize();\n ab.mult(nudge);\n while(this.isColliding(p)) {\n this.loc.add(ab);\n }\n var n = p5.Vector.sub(this.loc, p.loc);\n n.normalize();\n var u = p5.Vector.sub(this.v, p.v);\n var un = p5.Vector.mult(n, u.dot(n)*2); // added factor of 2\n u.sub(un);\n //u.mult(0.5);\n this.v = p5.Vector.add(u, p.v);\n\n //p.v = p5.Vector.add(un, p.v); // don't move the agent.\n};\nParticle.prototype.limitSpeed = function(minSpeed, maxSpeed) {\n var mag2 = this.v.magSq();\n if (mag2 > (maxSpeed*maxSpeed) ) {\n this.v.normalize();\n this.v.mult(maxSpeed);\n }\n if (mag2 < (minSpeed*minSpeed) ) {\n this.v.normalize();\n this.v.mult(minSpeed);\n }\n return;\n};\nParticle.prototype.display = function() {\n \"use strict\";\n noStroke();\n fill(this.c);\n ellipse(toX(this.loc.x), toY(this.loc.y), toP(this.r)*2, toP(this.r)*2);\n};\n\n// design agent's brain using neural network\nfunction Brain() {\n \"use strict\";\n this.nGameInput = 12; // 8 states for agent, plus 4 state for opponent\n this.nGameOutput = 3; // 3 buttons (forward, backward, jump)\n this.nRecurrentState = 4; // extra recurrent states for feedback.\n this.nOutput = this.nGameOutput+this.nRecurrentState;\n this.nInput = this.nGameInput+this.nOutput;\n\n // store current inputs and outputs\n this.inputState = convnetjs.zeros(this.nInput);\n this.convInputState = new convnetjs.Vol(1, 1, this.nInput); // compatible with convnetjs lib input.\n this.outputState = convnetjs.zeros(this.nOutput);\n this.prevOutputState = convnetjs.zeros(this.nOutput);\n\n // setup neural network:\n this.layer_defs = [];\n this.layer_defs.push({\n type: 'input',\n out_sx: 1,\n out_sy: 1,\n out_depth: this.nInput\n });\n this.layer_defs.push({\n type: 'fc',\n num_neurons: this.nOutput,\n activation: 'tanh'\n });\n\n this.net = new convnetjs.Net();\n this.net.makeLayers(this.layer_defs);\n\n var chromosome = new convnetjs.Chromosome(initGene);\n\n chromosome.pushToNetwork(this.net);\n\n //convnetjs.randomizeNetwork(this.net); // set init settings to be random.\n}\nBrain.prototype.populate = function (chromosome) { // populate network with a given chromosome.\n chromosome.pushToNetwork(this.net);\n};\nBrain.prototype.arrayToString = function(x, precision) {\n \"use strict\";\n var result = \"[\";\n for (var i = 0; i < x.length; i++) {\n result += Math.round(precision*x[i])/precision;\n if (i < x.length-1) {\n result += \",\";\n }\n }\n result += \"]\";\n return result;\n};\nBrain.prototype.getInputStateString = function() {\n \"use strict\";\n return this.arrayToString(this.inputState, 100);\n};\nBrain.prototype.getOutputStateString = function() {\n \"use strict\";\n return this.arrayToString(this.outputState, 100);\n};\n// get current input for nn\nBrain.prototype.setCurrentInputState = function (agent, opponent) {\n \"use strict\";\n var i;\n var scaleFactor = 10; // scale inputs to be in the order of magnitude of 10.\n var scaleFeedback = 1; // to scale back up the feedback.\n this.inputState[0] = agent.state.x/scaleFactor;\n this.inputState[1] = agent.state.y/scaleFactor;\n this.inputState[2] = agent.state.vx/scaleFactor;\n this.inputState[3] = agent.state.vy/scaleFactor;\n this.inputState[4] = agent.state.bx/scaleFactor;\n this.inputState[5] = agent.state.by/scaleFactor;\n this.inputState[6] = agent.state.bvx/scaleFactor;\n this.inputState[7] = agent.state.bvy/scaleFactor;\n this.inputState[8] = 0*opponent.state.x/scaleFactor;\n this.inputState[9] = 0*opponent.state.y/scaleFactor;\n this.inputState[10] = 0*opponent.state.vx/scaleFactor;\n this.inputState[11] = 0*opponent.state.vy/scaleFactor;\n for (i = 0; i < this.nOutput; i++) { // feeds back output to input\n this.inputState[i+this.nGameInput] = this.outputState[i]*scaleFeedback*1; \n }\n\n for (i = 0; i < this.nInput; i++) { // copies input state into convnet cube object format to be used later.\n this.convInputState.w[i] = this.inputState[i];\n }\n\n};\nBrain.prototype.forward = function () {\n \"use strict\";\n // get output from neural network:\n var a = this.net.forward(this.convInputState);\n for (var i = 0; i < this.nOutput; i++) {\n this.prevOutputState[i] = this.outputState[i]; // backs up previous value.\n this.outputState[i] = a.w[i];\n }\n};\n\nfunction matchFunction(chromosome1, chromosome2) { // this function is passed to trainer.\n var result = 0;\n var oldInitDelayFrames = initDelayFrames;\n initDelayFrames = 1;\n trainingMode = true;\n initGame();\n // put chromosomes into brains before getting them to duel it out.\n game.agent1.brain.populate(chromosome1);\n game.agent2.brain.populate(chromosome2);\n result = update(trainingFrames); // the dual\n trainingMode = false;\n initDelayFrames = oldInitDelayFrames;\n return result; // -1 means chromosome1 beat chromosome2, 1 means vice versa, 0 means tie.\n}\n\nfunction Trainer(brain, initialGene) {\n // trainer for neural network interface. must pass in an initial brain so it knows the net topology.\n // the constructor won't modify the brain object passed in.\n\n this.net = new convnetjs.Net();\n this.net.makeLayers(brain.layer_defs);\n\n this.trainer = new convnetjs.GATrainer(this.net, {\n population_size: 100*1,\n mutation_size: 0.3,\n mutation_rate: 0.05,\n num_match: 4*2,\n elite_percentage: 0.20\n }, initialGene);\n\n}\nTrainer.prototype.train = function() {\n this.trainer.matchTrain(matchFunction);\n};\nTrainer.prototype.getChromosome = function(n) {\n // returns a copy of the nth best chromosome (if not provided, returns first one, which is the best one)\n n = n || 0;\n return this.trainer.chromosomes[n].clone();\n};\n\nfunction Agent(dir, loc, c) {\n \"use strict\";\n this.dir = dir; // -1 means left, 1 means right player for symmetry.\n this.loc = loc || createVector(ref_w/4, 1.5);\n this.v = createVector(0, 0);\n this.desiredVelocity = createVector(0, 0);\n this.r = 1.5;\n this.c = c;\n this.opponent = null;\n this.score = 0;\n this.emotion = \"happy\"; // hehe...\n this.scoreSize = baseScoreFontSize; // font size for score.\n this.action = { // the current set of actions the agent wants to take \n forward : false, // this set of actions can be set either by neural net, or keyboard\n backward : false,\n jump : false\n };\n this.actionIntensity = [0, 0, 0];\n this.state = { // complete game state for this agent. used by neural network.\n x: 0, // normalized to side, appears different for each agent's perspective\n y: 0,\n vx: 0,\n vy: 0,\n bx: 0, \n by: 0,\n bvx: 0,\n bvy: 0\n };\n this.brain = new Brain();\n}\nAgent.prototype.setOpponent = function(opponent) { // sets the opponent into this agent\n \"use strict\";\n this.opponent = opponent;\n};\nAgent.prototype.setAction = function(forward, backward, jump) {\n \"use strict\";\n this.action.forward = forward;\n this.action.backward = backward;\n this.action.jump = jump;\n};\nAgent.prototype.setBrainAction = function() {\n \"use strict\"; // this function converts the brain's output layer into actions to move forward, backward, or jump\n var forward = this.brain.outputState[0] > 0.75; // sigmoid decision.\n var backward = this.brain.outputState[1] > 0.75; // sigmoid decision.\n var jump = this.brain.outputState[2] > 0.75; // sigmoid decision.\n this.setAction(forward, backward, jump);\n};\nAgent.prototype.processAction = function() { // convert action into real movement\n \"use strict\";\n var forward = this.action.forward;\n var backward = this.action.backward;\n var jump = this.action.jump;\n this.desiredVelocity.x = 0;\n this.desiredVelocity.y = 0;\n\n if (forward && !backward) {\n this.desiredVelocity.x = -playerSpeedX;\n }\n if (backward && !forward) {\n this.desiredVelocity.x = playerSpeedX;\n }\n\n if (jump) {\n this.desiredVelocity.y = playerSpeedY;\n }\n};\nAgent.prototype.move = function() {\n \"use strict\";\n this.loc.add(p5.Vector.mult(this.v, timeStep));\n};\nAgent.prototype.getState = function() { // returns game state for this agent\n \"use strict\";\n this.state = { // complete game state for this agent. used by neural network.\n x: this.loc.x*this.dir, // normalized to side, appears different for each agent's perspective\n y: this.loc.y,\n vx: this.v.x*this.dir,\n vy: this.v.y,\n bx: game.ball.loc.x*this.dir, \n by: game.ball.loc.y,\n bvx: game.ball.v.x*this.dir,\n bvy: game.ball.v.y\n };\n return this.state;\n};\nAgent.prototype.printState = function() {\n // prints the state of the agent on the side of the screen the agent is on\n // uses p5.js text functions\n \"use strict\";\n // print fps\n var r = 10;\n var stateText = '';\n var state = this.getState();\n stateText += 'X: '+Math.round(state.x*r)/r+'\\n';\n stateText += 'Y: '+Math.round(state.y*r)/r+'\\n';\n stateText += 'vx: '+Math.round(state.vx*r)/r+'\\n';\n stateText += 'vy: '+Math.round(state.vy*r)/r+'\\n';\n stateText += 'bx: '+Math.round(state.bx*r)/r+'\\n';\n stateText += 'by: '+Math.round(state.by*r)/r+'\\n';\n stateText += 'bvx: '+Math.round(state.bvx*r)/r+'\\n';\n stateText += 'bvy: '+Math.round(state.bvy*r)/r+'\\n';\n fill(this.c);\n stroke(this.c);\n textFont(\"Courier New\");\n textSize(16);\n text(stateText, toX(this.dir*ref_w/4), toP(ref_u));\n};\nAgent.prototype.drawState = function(human) { // illustrates inputState and output actions on p5 canvas\n \"use strict\";\n var brain = this.brain;\n var r = red(this.c);\n var g = green(this.c);\n var b = blue(this.c);\n var i, j = 0;\n var temp;\n var radius = ref_w/2/((brain.nGameInput-4)+4);\n var factor = 3/4;\n var startX = ref_w/4 - radius*((brain.nGameInput-4)/2);\n var ballFactor = 1.0;\n var startX2 = ref_w/4 - ballFactor*radius*(brain.nGameOutput/2);\n var secondLayerY = Math.max(height*1/8+toP(radius)+0.5*toP(radius), height*3/16);\n\n this.actionIntensity[0] += (this.action.forward ? 16 : 0);\n this.actionIntensity[1] += (this.action.jump ? 16 : 0);\n this.actionIntensity[2] += (this.action.backward ? 16 : 0);\n\n if (!human) {\n for (i = 0; i < (brain.nGameInput-4); i++) {\n\n noStroke();\n fill(r, g, b, brain.inputState[i]*32+8);\n ellipse(toX((startX+i*radius)*this.dir), height*1/8+toP(radius), toP(radius*factor), toP(radius*factor));\n\n for (j = 0; j < brain.nGameOutput; j++) {\n\n if (this.actionIntensity[j] > 64) {\n stroke(r, g, b, brain.inputState[i]*32);\n line(toX((startX+i*radius)*this.dir), height*1/8+toP(radius), toX((startX2+ballFactor*j*radius)*this.dir), secondLayerY+(ballFactor+0)*toP(radius));\n }\n }\n\n }\n }\n\n for (j = 0; j < brain.nGameOutput; j++) {\n\n this.actionIntensity[j] -= 4;\n this.actionIntensity[j] = Math.min(this.actionIntensity[j], 128);\n this.actionIntensity[j] = Math.max(this.actionIntensity[j], 16);\n\n noStroke();\n fill(r, g, b, (this.actionIntensity[j]));\n ellipse(toX((startX2+ballFactor*j*radius)*this.dir), secondLayerY+(ballFactor+0)*toP(radius), toP(radius*factor)*ballFactor, toP(radius*factor)*ballFactor);\n\n }\n\n\n};\nAgent.prototype.update = function() {\n \"use strict\";\n this.v.add(p5.Vector.mult(gravity, timeStep));\n if (this.loc.y <= ref_u + nudge*timeStep) {\n this.v.y = this.desiredVelocity.y;\n }\n this.v.x = this.desiredVelocity.x*this.dir;\n this.move();\n if (this.loc.y <= ref_u) {\n this.loc.y = ref_u;\n this.v.y = 0;\n }\n\n // stay in their own half:\n if (this.loc.x*this.dir <= (ref_wallwidth/2+this.r) ) {\n this.v.x = 0;\n this.loc.x = this.dir*(ref_wallwidth/2+this.r);\n }\n if (this.loc.x*this.dir >= (ref_w/2-this.r) ) {\n this.v.x = 0;\n this.loc.x = this.dir*(ref_w/2-this.r);\n }\n};\nAgent.prototype.display = function() {\n \"use strict\";\n var x = this.loc.x;\n var y = this.loc.y;\n var r = this.r;\n var angle = 60;\n var eyeX = 0;\n var eyeY = 0;\n\n if (this.dir === 1) angle = 135;\n noStroke();\n fill(this.c);\n //ellipse(toX(x), toY(y), toP(r)*2, toP(r)*2);\n arc(toX(x), toY(y), toP(r)*2, toP(r)*2, Math.PI, 2*Math.PI);\n /*\n fill(255);\n rect(toX(x-r), toY(y), 2*r*factor, r*factor);\n */\n\n // track ball with eyes (replace with observed info later):\n var ballX = game.ball.loc.x-(x+(0.6)*r*fastCos(angle));\n var ballY = game.ball.loc.y-(y+(0.6)*r*fastSin(angle));\n if (this.emotion === \"sad\") {\n ballX = -this.dir;\n ballY = -3;\n }\n var dist = Math.sqrt(ballX*ballX+ballY*ballY);\n eyeX = ballX/dist;\n eyeY = ballY/dist;\n\n fill(255);\n ellipse(toX(x+(0.6)*r*fastCos(angle)), toY(y+(0.6)*r*fastSin(angle)), toP(r)*0.6, toP(r)*0.6);\n fill(0);\n ellipse(toX(x+(0.6)*r*fastCos(angle)+eyeX*0.15*r), toY(y+(0.6)*r*fastSin(angle)+eyeY*0.15*r), toP(r)*0.2, toP(r)*0.2);\n\n};\nAgent.prototype.drawScore = function() {\n \"use strict\";\n var r = red(this.c);\n var g = green(this.c);\n var b = blue(this.c);\n var size = this.scoreSize;\n var factor = 0.95;\n this.scoreSize = baseScoreFontSize + (this.scoreSize-baseScoreFontSize) * factor;\n\n if (this.score > 0) {\n textFont(\"Courier New\");\n textSize(size);\n //stroke(255);\n stroke(r, g, b, 128*(baseScoreFontSize/this.scoreSize));\n fill(r, g, b, 64*(baseScoreFontSize/this.scoreSize));\n textAlign(this.dir === -1? LEFT:RIGHT);\n text(this.score, this.dir === -1? size*3/4 : width-size/4, size/2+height/3);\n }\n\n};\n\nfunction Wall(x, y, w, h) {\n \"use strict\";\n this.x = x;\n this.y = y;\n this.w = w;\n this.h = h;\n this.c = color(0, 200, 50, 128);\n}\n\nWall.prototype.display = function() {\n \"use strict\";\n noStroke();\n fill(255);\n rect(toX(this.x-this.w/2), toY(this.y+this.h/2), toP(this.w), toP(this.h));\n fill(this.c);\n rect(toX(this.x-this.w/2), toY(this.y+this.h/2), toP(this.w), toP(this.h));\n};\n\nfunction initGame() {\n game.ball = new Particle(createVector(0, ref_w/4));\n game.ball.r = 0.5;\n\n game.agent1 = game.agent1 || new Agent(-1, createVector(-ref_w/4, 1.5), color(240, 75, 0, 255));\n game.agent2 = game.agent2 || new Agent(1, createVector(ref_w/4, 1.5), color(0, 150, 255, 255));\n\n game.agent1.setOpponent(game.agent2); // point agent to the other agent as an opponent.\n game.agent2.setOpponent(game.agent1);\n\n human1 = false;\n human2 = false;\n\n delayScreen.init(initDelayFrames);\n}\n\nfunction setup() {\n \"use strict\";\n\n // deal with mobile device nuances\n md = new MobileDetect(window.navigator.userAgent);\n if (md.mobile()) {\n mobileMode = true;\n console.log('mobile: '+md.mobile());\n } else {\n theFrameRate /= 2;\n console.log('not mobile');\n }\n\n myCanvas = createCanvas(windowWidth,windowHeight);\n factor = windowWidth / ref_w;\n ref_h = ref_w;\n myCanvas.parent('p5Container');\n frameRate(theFrameRate);\n\n // create html elements\n //http://otoro.net/slimevolley/\n\n //intro.text = createA(\"http://blog.otoro.net/2015/03/28/neural-slime-volleyball/\", \"neural slime volleyball\", \"_blank\");\n //intro.text.position(32+width/32, height/32);\n\n gravity = createVector(0, theGravity);\n\n // setup game objects\n game.ground = new Wall(0, 0.75, ref_w, ref_u);\n game.fence = new Wall(0, 0.75 + ref_wallheight/2, ref_wallwidth, (ref_wallheight-1.5));\n game.fence.c = color(240, 210, 130, 255);\n game.fenceStub = new Particle(createVector(0, ref_wallheight), createVector(0, 0), ref_wallwidth/2, color(240, 210, 130, 255));\n\n initGame();\n\n trainer = new Trainer(game.agent1.brain, initGene);\n game.agent1.brain.populate(trainer.getChromosome()); // best one\n game.agent2.brain.populate(trainer.getChromosome()); // best one\n}\n\n// updates game element according to physics\nfunction update(nStep) {\n \"use strict\";\n\n var result = 0;\n\n for (var step = 0; step < nStep; step++) {\n\n // ai here\n // update internal states\n game.agent1.getState();\n game.agent2.getState();\n // push states to brain\n game.agent1.brain.setCurrentInputState(game.agent1, game.agent2);\n game.agent2.brain.setCurrentInputState(game.agent2, game.agent1);\n // make a decision\n game.agent1.brain.forward();\n game.agent2.brain.forward();\n // convert brain's output signals into game actions\n game.agent1.setBrainAction();\n game.agent2.setBrainAction();\n\n // get human keyboard control\n if (!trainingMode) {\n if (!trainingVersion) {\n keyboardControl(); // may want to disable this for speed.\n touchControl(); // mobile device\n }\n betweenGameControl();\n }\n\n // process actions\n game.agent1.processAction();\n game.agent2.processAction();\n game.agent1.update();\n game.agent2.update();\n\n if (delayScreen.status() === true) {\n game.ball.applyAcceleration(gravity);\n game.ball.limitSpeed(0, maxBallSpeed);\n game.ball.move();\n }\n\n if (game.ball.isColliding(game.agent1)) {\n game.ball.bounce(game.agent1);\n }\n if (game.ball.isColliding(game.agent2)) {\n game.ball.bounce(game.agent2);\n }\n if (game.ball.isColliding(game.fenceStub)) {\n game.ball.bounce(game.fenceStub);\n }\n\n result = game.ball.checkEdges();\n if (Math.abs(result) > 0) {\n // make graphics for dead ball\n if (!trainingMode) {\n game.deadball = new Particle(game.ball.loc.copy());\n game.deadball.r = 0.5;\n game.deadball.life = initDelayFrames;\n }\n initGame();\n if (!trainingMode) {\n console.log('player '+(result > 0? '1' : '2')+' won.');\n if (result > 0) {\n game.agent1.score += 1;\n game.agent1.scoreSize *= 4;\n game.agent1.emotion = \"happy\";\n game.agent2.emotion = \"sad\";\n } else {\n game.agent2.score += 1;\n game.agent2.scoreSize *= 4;\n game.agent2.emotion = \"happy\";\n game.agent1.emotion = \"sad\";\n }\n }\n return result;\n }\n\n }\n\n return result; // 0 means tie, -1 means landed on left side, 1 means landed on right side.\n}\n\nfunction drawScenery() {\n // draws the scenery\n for (var i = 0; i < 24; i++) {\n noStroke();\n fill(50, 100, 240, 16*(24-i)/24);\n rect(0, i*height/24/3, width, height/24/3);\n }\n fill(255, 240, 0, 64);\n noStroke();\n ellipse(toX(-ref_w/4), 1*height/2, 2*factor*2, 2*factor*2);\n fill(50, 255, 50, 16);\n ellipse(toX(ref_w/8), toY(-1.5), 12*factor*2, 20*factor*2);\n fill(50, 255, 50, 16);\n ellipse(toX(-ref_w/8), toY(-1.5), 8*factor*2, 12*factor*2);\n fill(50, 255, 50, 16);\n ellipse(toX(ref_w/3), toY(-1.5), 6*factor*2, 24*factor*2);\n}\n\nfunction keyboardControl() {\n // player 1:\n var a1_forward = 68; // 'd' key\n var a1_backward = 65; // 'a' key\n var a1_jump = 87; // 'w' key\n // player 2:\n var a2_forward = LEFT_ARROW;\n var a2_backward = RIGHT_ARROW;\n var a2_jump = UP_ARROW;\n\n if (keyIsDown(a1_forward) || keyIsDown(a1_backward) || keyIsDown(a1_jump)) {\n human1 = true;\n humanHasControlled = true;\n }\n if (human1) {\n game.agent1.setAction(keyIsDown(a1_forward), keyIsDown(a1_backward), keyIsDown(a1_jump));\n }\n\n if (keyIsDown(a2_forward) || keyIsDown(a2_backward) || keyIsDown(a2_jump)) {\n human2 = true;\n humanHasControlled = true;\n }\n if (human2) {\n game.agent2.setAction(keyIsDown(a2_forward), keyIsDown(a2_backward), keyIsDown(a2_jump));\n }\n\n}\n\nfunction touchControl() {\n \"use strict\";\n var paddingY = height/64;\n var paddingX = width/64;\n var dx = 0;\n var dy = 0;\n var x = 0;\n var y = 0;\n var agentX = toX(game.agent2.loc.x);\n var agentY = toY(game.agent2.loc.y);\n var jumpY = toY(ref_wallheight*2);\n var gestureEvent = false;\n\n if (touchIsDown) {\n x = touchX;\n y = touchY;\n dx = touchX-ptouchX;\n dy = touchY-ptouchY;\n gestureEvent = true;\n }\n\n if (mouseIsPressed) {\n x = mouseX;\n y = mouseY;\n dx = mouseX-pmouseX;\n dy = mouseY-pmouseY;\n gestureEvent = true;\n }\n\n if (gestureEvent) {\n human2 = true;\n humanHasControlled = true;\n game.agent2.setAction((x - agentX) < -paddingX, (x - agentX) > paddingX, dy < -paddingY);\n }\n\n}\n\n// between end of this match to the next match. guy wins jumps, guy who loses regrets...\nfunction betweenGameControl() {\n \"use strict\";\n var agent = [game.agent1, game.agent2];\n if (delayScreen.life > 0) {\n for (var i = 0; i < 2; i++) {\n if (agent[i].emotion === \"happy\") {\n agent[i].action.jump = true;\n } else {\n agent[i].action.jump = false;\n }\n }\n } else {\n agent[0].emotion = \"happy\";\n agent[1].emotion = \"happy\";\n }\n}\n\nfunction getNNDebugString() {\n \"use strict\";\n var result = \"\";\n result += \"agent1:\\n\";\n result += \"input1: \"+JSON.stringify(game.agent1.brain.getInputStateString())+\"\\n\";\n result += \"output1: \"+JSON.stringify(game.agent1.brain.getOutputStateString())+\"\\n\";\n result += \"agent2:\\n\";\n result += \"input2: \"+JSON.stringify(game.agent2.brain.getInputStateString())+\"\\n\";\n result += \"output2: \"+JSON.stringify(game.agent2.brain.getOutputStateString())+\"\\n\";\n return result;\n}\n\nfunction arrayToString(x, precision) {\n \"use strict\";\n precision = precision || 1000;\n var result = \"[\";\n for (var i = 0; i < x.length; i++) {\n result += Math.round(precision*x[i])/precision;\n if (i < x.length-1) {\n result += \",\";\n }\n }\n result += \"]\";\n return result;\n}\n\n// cool p5.js functions to draw p-noise bouncy keyboard control graphics.\nvar pNoiseSeed = 0;\nfunction drawArrowKeyboard(x, y, s1, c, intensity, theColor) {\n \"use strict\";\n\n var rc = red(theColor);\n var gc = green(theColor);\n var bc = blue(theColor);\n\n function nextNoise() {\n var pFactor = 10;\n var f = 5;\n pNoiseSeed = pNoiseSeed || 0;\n pNoiseSeed += 1;\n return (noise(pNoiseSeed / pFactor)-0.5)*f;\n }\n\n function drawArrowKey(x, y, s, r) {\n\n\n var f = 5;\n //console.log(nextNoise());\n stroke(rc, gc, bc, intensity);\n noFill();\n beginShape();\n var x1offset = nextNoise();\n var y1offset = nextNoise();\n var x2offset = nextNoise();\n var y2offset = nextNoise();\n var x3offset = nextNoise();\n var y3offset = nextNoise();\n curveVertex(x-s+x1offset, y+s-r+y1offset);\n curveVertex(x-s+x2offset, y-s+r+y2offset);\n curveVertex(x-s+r+x3offset, y-s+y3offset);\n curveVertex(x+s-r+nextNoise(), y-s+nextNoise());\n curveVertex(x+s+nextNoise(), y-s+r+nextNoise());\n curveVertex(x+s+nextNoise(), y+s-r+nextNoise());\n curveVertex(x+s-r+nextNoise(), y+s+nextNoise());\n curveVertex(x-s+r+nextNoise(), y+s+nextNoise());\n curveVertex(x-s+x1offset, y+s-r+y1offset);\n curveVertex(x-s+x2offset, y-s+r+y2offset);\n curveVertex(x-s+r+x3offset, y-s+y3offset);\n endShape();\n noStroke();\n }\n\n var s2 = s1 * 0.8;\n var r1 = s1 * 0.2;\n var r2 = s2 * 0.2;\n var fontSize = 32;\n\n function drawFullKey(x, y, c) {\n drawArrowKey(x, y, s1/2, r1);\n drawArrowKey(x, y, s2/2, r2);\n\n stroke(rc, gc, bc, intensity);\n fill(rc, gc, bc, intensity);\n\n text(c, x+nextNoise()/1-fontSize/2, y+nextNoise()/1+fontSize/4);\n }\n\n textFont(\"monospace\");\n textSize(fontSize);\n drawFullKey(x-s1, y, c[0]);\n drawFullKey(x, y-s1, c[1]);\n drawFullKey(x+s1, y, c[2]);\n\n}\n\n// n = 1, first agent, n = 2, second agent.\nfunction drawAgentKeyboard(x, y, s, n, intensity, theColor) {\n var c = ['ａ', 'ｗ', 'ｄ'];\n if (n == 2) c = ['◀', '▲', '▶'];\n drawArrowKeyboard(x, y, s, c, intensity, theColor);\n}\n\nfunction draw() {\n \"use strict\";\n var result = 0;\n\n background(255);\n\n // draw box around frame\n\n result = update(1);\n\n if (result !== 0 && trainingVersion) { // someone has lost\n var genStep = 50;\n console.log('training generation #'+(generationCounter+genStep));\n for (var i = 0; i < genStep; i++) {\n trainer.train();\n }\n // print results\n for (i = 0; i < 4; i++) {\n console.log('#'+i+':'+Math.round(100*trainer.getChromosome(i).fitness)/100);\n }\n var N = trainer.trainer.population_size;\n for (i = N-4; i < N; i++) {\n console.log('#'+i+':'+Math.round(100*trainer.getChromosome(i).fitness)/100);\n }\n if (trainingVersion) {\n $(\"#nn_gene\").text(JSON.stringify(trainer.getChromosome()));\n console.log('--- start trained gene ---');\n console.log(JSON.stringify(trainer.getChromosome()));\n console.log('--- end of trained gene---');\n }\n generationCounter += genStep;\n initGame();\n game.agent1.brain.populate(trainer.getChromosome(0)); // best one\n game.agent2.brain.populate(trainer.getChromosome(1)); // second best one\n }\n\n // draw the game objects\n drawScenery();\n game.agent1.display();\n game.agent2.display();\n\n if (!mobileMode && showArrowKeys & !humanHasControlled) {\n var intensity = 64*Math.min(16*(delayScreen.life/initDelayFrames)*(initDelayFrames-delayScreen.life)/initDelayFrames, 64);\n drawAgentKeyboard(width/4, toY(ref_wallheight*1), width/12, 1, intensity, game.agent1.c);\n drawAgentKeyboard(3*width/4, toY(ref_wallheight*1), width/12, 2, intensity, game.agent2.c);\n }\n if (!humanHasControlled && handSymbolDisplayed ) {\n moveHandSymbol(toX(game.agent2.loc.x), toY(game.agent2.loc.y)-height/2.5);\n } else {\n hideHandSymbol();\n }\n\n game.ball.c = color(255, 200, 20, 255*Math.max((initDelayFrames-delayScreen.life)/initDelayFrames, 0));\n game.ball.display();\n game.ground.display();\n game.fence.display();\n game.fenceStub.display();\n\n // prints agent states (used for nn input)\n if (trainingVersion) {\n game.agent1.printState();\n game.agent2.printState();\n }\n\n game.agent1.drawState(human1);\n game.agent2.drawState(human2);\n\n game.agent1.drawScore();\n game.agent2.drawScore();\n\n // draw dead ball\n if (game.deadball) {\n game.deadball.life -= 1;\n game.deadball.c = color(250, 0, 0, 128*(game.deadball.life/initDelayFrames));\n game.deadball.display();\n if (game.deadball.life <= 0) {\n game.deadball = null;\n }\n }\n\n //$(\"#nn_weights\").text(getNNDebugString());\n\n}\n\nfunction windowResized() {\n \"use strict\";\n resizeCanvas(windowWidth, windowHeight);\n myCanvas.size(windowWidth, windowHeight);\n factor = windowWidth / ref_w;\n}\n\n// When the mouse is released \nvar deviceReleased = function() {\n \"use strict\";\n};\n\n// When the mouse is pressed we. . .\nvar devicePressed = function(x, y) {\n \"use strict\";\n};\n\nvar deviceDragged = function(x, y) {\n \"use strict\";\n};\n\nvar mousePressed = function() {\n \"use strict\";\n devicePressed(mouseX, mouseY);\n return false;\n};\n\nvar touchStarted = function() {\n \"use strict\";\n devicePressed(touchX, touchY);\n return false;\n};\n\n// interaction with touchpad and mosue:\n\nvar mouseDragged = function() {\n \"use strict\";\n deviceDragged(mouseX, mouseY);\n return false;\n};\n\nvar touchMoved = function() {\n \"use strict\";\n return false;\n};\n\nvar mouseReleased = function() {\n \"use strict\";\n return false;\n};\n\nvar touchEnded = function() {\n \"use strict\";\n return false;\n};\n\n\n\n" }, { "path": "useful.js", "content": "// useful simple math functions\n\nsign = Math.sign || function sign(x) {\n x = +x; // convert to a number\n if (x === 0 || isNaN(x)) {\n return x;\n }\n return x > 0 ? 1 : -1;\n};\n\nfunction rectify(x, minValue, maxValue) {\n if (x > maxValue) return maxValue;\n if (x < minValue) return minValue;\n return x;\n}\n\nfunction getWidth() {\n return $(window).width()-20*0;\n}\n\nfunction getHeight() {\n return $(window).height()-20*0;\n}\n\n// useful helper functions\nvar getRandom = function (min, max) {\n return Math.random() * (max - min) + min;\n};\n\nvar getRandomInt = function (min, max) {\n return Math.floor(Math.random() * (max - min)) + min;\n};\n\nvar getRandomColor = function(alpha) {\n var c = color(getRandomInt(127, 255), getRandomInt(127, 255), getRandomInt(127, 255), alpha? alpha : 0);\n return c;\n};\n\nvar cosTable = new Array(360);\nvar sinTable = new Array(360);\nvar PI = Math.PI;\n\n// pre compute sine and cosine values to the nearest degree\nfor (i = 0; i < 360; i++) {\n cosTable[i] = Math.cos((i / 360) * 2 * PI);\n sinTable[i] = Math.sin((i / 360) * 2 * PI);\n}\n\nvar fastSin = function (xDeg) {\n var deg = Math.round(xDeg);\n if (deg >= 0) {\n return sinTable[(deg % 360)];\n }\n return -sinTable[((-deg) % 360)];\n};\n\nvar fastCos = function (xDeg) {\n var deg = Math.round(Math.abs(xDeg));\n return cosTable[deg % 360];\n};\n" } ]