diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100755 index 0000000..a47091f --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,226 @@ +module.exports = { + env: { + browser: true, + node: true + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020 + }, + rules: { + 'no-var': 'warn', + + 'accessor-pairs': ['error', { setWithoutGet: true, enforceForClassMembers: true }], + 'array-bracket-spacing': ['error', 'never'], + 'array-callback-return': ['error', { + allowImplicit: false, + checkForEach: false + }], + 'arrow-spacing': ['error', { before: true, after: true }], + 'block-spacing': ['error', 'always'], + 'brace-style': ['error', '1tbs', { allowSingleLine: true }], + camelcase: ['error', { + allow: ['^UNSAFE_'], + properties: 'never', + ignoreGlobals: true + }], + 'comma-dangle': ['error', { + arrays: 'never', + objects: 'never', + imports: 'never', + exports: 'never', + functions: 'never' + }], + 'comma-spacing': ['error', { before: false, after: true }], + 'comma-style': ['error', 'last'], + 'computed-property-spacing': ['error', 'never', { enforceForClassMembers: true }], + 'constructor-super': 'error', + curly: ['error', 'multi-line'], + 'default-case-last': 'error', + 'dot-location': ['error', 'property'], + 'dot-notation': ['error', { allowKeywords: true }], + 'eol-last': 'error', + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'func-call-spacing': ['error', 'never'], + 'generator-star-spacing': ['error', { before: true, after: true }], + indent: ['error', 2, { + SwitchCase: 1, + VariableDeclarator: 1, + outerIIFEBody: 1, + MemberExpression: 1, + FunctionDeclaration: { parameters: 1, body: 1 }, + FunctionExpression: { parameters: 1, body: 1 }, + CallExpression: { arguments: 1 }, + ArrayExpression: 1, + ObjectExpression: 1, + ImportDeclaration: 1, + flatTernaryExpressions: false, + ignoreComments: false, + ignoredNodes: ['TemplateLiteral *', 'JSXElement', 'JSXElement > *', 'JSXAttribute', 'JSXIdentifier', 'JSXNamespacedName', 'JSXMemberExpression', 'JSXSpreadAttribute', 'JSXExpressionContainer', 'JSXOpeningElement', 'JSXClosingElement', 'JSXFragment', 'JSXOpeningFragment', 'JSXClosingFragment', 'JSXText', 'JSXEmptyExpression', 'JSXSpreadChild'], + offsetTernaryExpressions: true + }], + 'key-spacing': ['error', { beforeColon: false, afterColon: true }], + 'keyword-spacing': ['error', { before: true, after: true }], + 'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }], + 'multiline-ternary': ['error', 'always-multiline'], + 'new-cap': ['error', { newIsCap: true, capIsNew: false, properties: true }], + 'new-parens': 'error', + 'no-array-constructor': 'error', + 'no-async-promise-executor': 'error', + 'no-caller': 'error', + 'no-case-declarations': 'error', + 'no-class-assign': 'error', + 'no-compare-neg-zero': 'error', + 'no-cond-assign': 'error', + 'no-const-assign': 'error', + 'no-constant-condition': ['error', { checkLoops: false }], + 'no-control-regex': 'error', + 'no-debugger': 'error', + 'no-delete-var': 'error', + 'no-dupe-args': 'error', + 'no-dupe-class-members': 'error', + 'no-dupe-keys': 'error', + 'no-duplicate-case': 'error', + 'no-useless-backreference': 'error', + 'no-empty': ['error', { allowEmptyCatch: true }], + 'no-empty-character-class': 'error', + 'no-empty-pattern': 'error', + 'no-eval': 'error', + 'no-ex-assign': 'error', + 'no-extend-native': 'error', + 'no-extra-bind': 'error', + 'no-extra-boolean-cast': 'error', + 'no-extra-parens': ['error', 'functions'], + 'no-fallthrough': 'error', + 'no-floating-decimal': 'error', + 'no-func-assign': 'error', + 'no-global-assign': 'error', + 'no-implied-eval': 'error', + 'no-import-assign': 'error', + 'no-invalid-regexp': 'error', + 'no-irregular-whitespace': 'error', + 'no-iterator': 'error', + 'no-labels': ['error', { allowLoop: false, allowSwitch: false }], + 'no-lone-blocks': 'error', + 'no-loss-of-precision': 'error', + 'no-misleading-character-class': 'error', + 'no-prototype-builtins': 'error', + 'no-useless-catch': 'error', + 'no-mixed-operators': ['error', { + groups: [ + ['==', '!=', '===', '!==', '>', '>=', '<', '<='], + ['&&', '||'], + ['in', 'instanceof'] + ], + allowSamePrecedence: true + }], + 'no-mixed-spaces-and-tabs': 'error', + 'no-multi-spaces': 'error', + 'no-multi-str': 'error', + 'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }], + 'no-new': 'error', + 'no-new-func': 'error', + 'no-new-object': 'error', + 'no-new-symbol': 'error', + 'no-new-wrappers': 'error', + 'no-obj-calls': 'error', + 'no-octal': 'error', + 'no-octal-escape': 'error', + 'no-proto': 'error', + 'no-redeclare': ['error', { builtinGlobals: false }], + 'no-regex-spaces': 'error', + 'no-return-assign': ['error', 'except-parens'], + 'no-self-assign': ['error', { props: true }], + 'no-self-compare': 'error', + 'no-sequences': 'error', + 'no-shadow-restricted-names': 'error', + 'no-sparse-arrays': 'error', + 'no-tabs': 'error', + 'no-template-curly-in-string': 'error', + 'no-this-before-super': 'error', + 'no-throw-literal': 'error', + 'no-trailing-spaces': 'error', + 'no-undef': 'error', + 'no-undef-init': 'error', + 'no-unexpected-multiline': 'error', + 'no-unmodified-loop-condition': 'error', + 'no-unneeded-ternary': ['error', { defaultAssignment: false }], + 'no-unreachable': 'error', + 'no-unreachable-loop': 'error', + 'no-unsafe-finally': 'error', + 'no-unsafe-negation': 'error', + 'no-unused-expressions': ['error', { + allowShortCircuit: true, + allowTernary: true, + allowTaggedTemplates: true + }], + 'no-unused-vars': ['error', { + args: 'none', + caughtErrors: 'none', + ignoreRestSiblings: true, + vars: 'all' + }], + 'no-use-before-define': ['error', { functions: false, classes: false, variables: false }], + 'no-useless-call': 'error', + 'no-useless-computed-key': 'error', + 'no-useless-constructor': 'error', + 'no-useless-escape': 'error', + 'no-useless-rename': 'error', + 'no-useless-return': 'error', + 'no-void': 'error', + 'no-whitespace-before-property': 'error', + 'no-with': 'error', + 'object-curly-newline': ['error', { multiline: true, consistent: true }], + 'object-curly-spacing': ['error', 'always'], + 'object-property-newline': ['error', { allowMultiplePropertiesPerLine: true }], + 'one-var': ['error', { initialized: 'never' }], + 'operator-linebreak': ['error', 'after', { overrides: { '?': 'before', ':': 'before', '|>': 'before' } }], + 'padded-blocks': ['error', { blocks: 'never', switches: 'never', classes: 'never' }], + 'prefer-const': ['error', { destructuring: 'all' }], + 'prefer-promise-reject-errors': 'error', + 'prefer-regex-literals': ['error', { disallowRedundantWrapping: true }], + 'quote-props': ['error', 'as-needed'], + quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: false }], + 'rest-spread-spacing': ['error', 'never'], + semi: ['error', 'never'], + 'semi-spacing': ['error', { before: false, after: true }], + 'space-before-blocks': ['error', 'always'], + 'space-before-function-paren': ['error', 'always'], + 'space-in-parens': ['error', 'never'], + 'space-infix-ops': 'error', + 'space-unary-ops': ['error', { words: true, nonwords: false }], + 'spaced-comment': ['error', 'always', { + line: { markers: ['*package', '!', '/', ',', '='] }, + block: { balanced: true, markers: ['*package', '!', ',', ':', '::', 'flow-include'], exceptions: ['*'] } + }], + 'symbol-description': 'error', + 'template-curly-spacing': ['error', 'never'], + 'template-tag-spacing': ['error', 'never'], + 'unicode-bom': ['error', 'never'], + 'use-isnan': ['error', { + enforceForSwitchCase: true, + enforceForIndexOf: true + }], + 'valid-typeof': ['error', { requireStringLiterals: true }], + 'wrap-iife': ['error', 'any', { functionPrototypeMethods: true }], + 'yield-star-spacing': ['error', 'both'], + yoda: ['error', 'never'] + + // 'import/export': 'error', + // 'import/first': 'error', + // 'import/no-absolute-path': ['error', { esmodule: true, commonjs: true, amd: false }], + // 'import/no-duplicates': 'error', + // 'import/no-named-default': 'error', + // 'import/no-webpack-loader-syntax': 'error', + + // 'node/handle-callback-err': ['error', '^(err|error)$'], + // 'node/no-callback-literal': 'error', + // 'node/no-deprecated-api': 'error', + // 'node/no-exports-assign': 'error', + // 'node/no-new-require': 'error', + // 'node/no-path-concat': 'error', + // 'node/process-exit-as-throw': 'error', + + // 'promise/param-names': 'error' + } +} diff --git a/.gitignore b/.gitignore index 77dde13..16339c2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store -desktop.ini \ No newline at end of file +desktop.ini +node_modules \ No newline at end of file diff --git a/index.html b/index.html index eb1a2d2..23c0554 100755 --- a/index.html +++ b/index.html @@ -17,32 +17,26 @@ -
github
+ -
+
+ +
+
@@ -61,17 +54,12 @@ - - - + new Brain() + //.$mount(document.getElementById('canvas-container')) + diff --git a/js/three-app.js b/js/three-app.js index 7c7286e..141236a 100755 --- a/js/three-app.js +++ b/js/three-app.js @@ -1,668 +1,626 @@ - - -(function main() { "use strict"; - - // Neuron ---------------------------------------------------------------- - - function Neuron(x, y, z) { - - this.connection = []; - this.recievedSignal = false; - this.lastSignalRelease = 0; - this.releaseDelay = 0; - this.fired = false; - this.firedCount = 0; - this.prevReleaseAxon = null; - THREE.Vector3.call(this, x, y, z); - - } - - Neuron.prototype = Object.create(THREE.Vector3.prototype); - - Neuron.prototype.connectNeuronTo = function (neuronB) { - - var neuronA = this; - // create axon and establish connection - var axon = new Axon(neuronA, neuronB); - neuronA.connection.push( new Connection(axon, 'A') ); - neuronB.connection.push( new Connection(axon, 'B') ); - return axon; - - }; - - Neuron.prototype.createSignal = function (particlePool, minSpeed, maxSpeed) { - - this.firedCount += 1; - this.recievedSignal = false; - - var signals = []; - // create signal to all connected axons - for (var i=0; i=1) { - this.t = 1; - this.alive = false; - this.axon.neuronB.recievedSignal = true; - this.axon.neuronB.prevReleaseAxon = this.axon; - } - - } else if (this.startingPoint === 'B') { - this.t -= this.speed; - if (this.t<=0) { - this.t = 0; - this.alive = false; - this.axon.neuronA.recievedSignal = true; - this.axon.neuronA.prevReleaseAxon = this.axon; - } - } - - pos = this.axon.getPoint(this.t); - // pos = this.axon.getPointAt(this.t); // uniform point distribution but slower calculation - - this.particle.set(pos.x, pos.y, pos.z); - - }; - - // Particle Pool --------------------------------------------------------- - - function ParticlePool(poolSize) { - - this.spriteTextureSignal = THREE.ImageUtils.loadTexture( "sprites/electric.png" ); - - this.poolSize = poolSize; - this.pGeom = new THREE.Geometry(); - this.particles = this.pGeom.vertices; - - this.offScreenPos = new THREE.Vector3(9999, 9999, 9999); // #CM0A r68 PointCloud default frustumCull = true(extended from Object3D), so need to set to 'false' for this to work with oppScreenPos, else particles will dissappear - - this.pColor = 0xff4400; - this.pSize = 0.6; - - for (var ii=0; ii n.releaseDelay) && n.firedCount < 8) { // Random mode - // if (n.recievedSignal && !n.fired ) { // Single propagation mode - n.fired = true; - n.lastSignalRelease = currentTime; - n.releaseDelay = THREE.Math.randInt(100, 1000); - this.releaseSignalAt(n); - } - - } - - n.recievedSignal = false; // if neuron recieved signal but still in delay reset it - } - - // reset all neurons and when there is X signal - if (this.allSignals.length <= 0) { - - for (ii=0; ii=0; j--) { - var s = this.allSignals[j]; - s.travel(); - - if (!s.alive) { - s.particle.free(); - for (var k=this.allSignals.length-1; k>=0; k--) { - if (s === this.allSignals[k]) { - this.allSignals.splice(k, 1); - break; - } - } - } - - } - - // update particle pool vertices - this.particlePool.update(); - - // update info for GUI - this.updateInfo(); - - }; - - // add vertices to temp-arrayBuffer, generate temp-indexBuffer and temp-opacityArrayBuffer - NeuralNetwork.prototype.constructAxonArrayBuffer = function (axon) { - this.allAxons.push(axon); - var vertices = axon.geom.vertices; - var numVerts = vertices.length; - - // &&&&&&&&&&&&&&&&&&&&&^^^^^^^^^^^^^^^^^^^^^ - // var opacity = THREE.Math.randFloat(0.001, 0.1); - - for (var i=0; i= 1) { + this.t = 1 + this.alive = false + this.axon.neuronB.recievedSignal = true + this.axon.neuronB.prevReleaseAxon = this.axon + } + } else if (this.startingPoint === 'B') { + this.t -= this.speed + if (this.t <= 0) { + this.t = 0 + this.alive = false + this.axon.neuronA.recievedSignal = true + this.axon.neuronA.prevReleaseAxon = this.axon + } + } + + const pos = this.axon.getPoint(this.t) + // pos = this.axon.getPointAt(this.t); // uniform point distribution but slower calculation + this.particle.set(pos.x, pos.y, pos.z) + } +} + +// Signal.prototype = Object.create(THREE.Vector3.prototype) + +// Particle Pool --------------------------------------------------------- + +class ParticlePool { + constructor (poolSize) { + this.spriteTextureSignal = THREE.ImageUtils.loadTexture('sprites/electric.png') + + this.poolSize = poolSize + this.pGeom = new THREE.Geometry() + this.particles = this.pGeom.vertices + + this.offScreenPos = new THREE.Vector3(9999, 9999, 9999) // #CM0A r68 PointCloud default frustumCull = true(extended from Object3D), so need to set to 'false' for this to work with oppScreenPos, else particles will dissappear + + this.pColor = 0xff4400 + this.pSize = 0.6 + + for (let ii = 0; ii < this.poolSize; ii++) { + this.particles[ii] = new Particle(this) + } + + // inner particle + this.pMat = new THREE.PointCloudMaterial({ + map: this.spriteTextureSignal, + size: this.pSize, + color: this.pColor, + blending: THREE.AdditiveBlending, + depthTest: false, + transparent: true + }) + + this.pMesh = new THREE.PointCloud(this.pGeom, this.pMat) + this.pMesh.frustumCulled = false // ref: #CM0A + + // const scene = new THREE.Object3D() + scene.add(this.pMesh) + + // outer particle glow + this.pMat_outer = new THREE.PointCloudMaterial({ + map: this.spriteTextureSignal, + size: this.pSize * 10, + color: this.pColor, + blending: THREE.AdditiveBlending, + depthTest: false, + transparent: true, + opacity: 0.025 + }) + + this.pMesh_outer = new THREE.PointCloud(this.pGeom, this.pMat_outer) + this.pMesh_outer.frustumCulled = false // ref:#CM0A + + scene.add(this.pMesh_outer) + } + + getParticle () { + for (let ii = 0; ii < this.poolSize; ii++) { + const p = this.particles[ii] + if (p.available) { + p.available = false + return p + } + } + return null + } + + update () { + this.pGeom.verticesNeedUpdate = true + } + + updateSettings () { + // inner particle + this.pMat.color.setHex(this.pColor) + this.pMat.size = this.pSize + // outer particle + this.pMat_outer.color.setHex(this.pColor) + this.pMat_outer.size = this.pSize * 10 + } +} + +// Particle -------------------------------------------------------------- +// Private class for particle pool + +class Particle extends THREE.Vector3 { + constructor (particlePool) { + super() + + this.particlePool = particlePool + this.available = true + THREE.Vector3.call(this, particlePool.offScreenPos.x, particlePool.offScreenPos.y, particlePool.offScreenPos.z) + } + + free () { + this.available = true + this.set(this.particlePool.offScreenPos.x, this.particlePool.offScreenPos.y, this.particlePool.offScreenPos.z) + } +} + +// Particle.prototype = Object.create(THREE.Vector3.prototype) + +// Axon ------------------------------------------------------------------ + +class Axon extends THREE.CubicBezierCurve3 { + constructor (neuronA, neuronB) { + super() + + this.bezierSubdivision = 8 + this.neuronA = neuronA + this.neuronB = neuronB + this.cpLength = neuronA.distanceTo(neuronB) / THREE.Math.randFloat(1.5, 4.0) + this.controlPointA = this.getControlPoint(neuronA, neuronB) + this.controlPointB = this.getControlPoint(neuronB, neuronA) + THREE.CubicBezierCurve3.call(this, this.neuronA, this.controlPointA, this.controlPointB, this.neuronB) + + this.geom = new THREE.Geometry() + this.geom.vertices = this.calculateVertices() + } + + calculateVertices () { + return this.getSpacedPoints(this.bezierSubdivision) + } + + // generate uniformly distribute vector within x-theta cone from arbitrary vector v1, v2 + getControlPoint (v1, v2) { + const dirVec = new THREE.Vector3().copy(v2).sub(v1).normalize() + const northPole = new THREE.Vector3(0, 0, 1) // this is original axis where point get sampled + const axis = new THREE.Vector3().crossVectors(northPole, dirVec).normalize() // get axis of rotation from original axis to dirVec + const axisTheta = dirVec.angleTo(northPole) // get angle + const rotMat = new THREE.Matrix4().makeRotationAxis(axis, axisTheta) // build rotation matrix + + const minz = Math.cos(THREE.Math.degToRad(45)) // cone spread in degrees + const z = THREE.Math.randFloat(minz, 1) + const theta = THREE.Math.randFloat(0, Math.PI * 2) + const r = Math.sqrt(1 - z * z) + const cpPos = new THREE.Vector3(r * Math.cos(theta), r * Math.sin(theta), z) + cpPos.multiplyScalar(this.cpLength) // length of cpPoint + cpPos.applyMatrix4(rotMat) // rotate to dirVec + cpPos.add(v1) // translate to v1 + return cpPos + } +} + +// Axon.prototype = Object.create(THREE.CubicBezierCurve3.prototype) + +// Connection ------------------------------------------------------------ +class Connection { + constructor (axon, startingPoint) { + this.axon = axon + this.startingPoint = startingPoint + } +} + +// Neural Network -------------------------------------------------------- + +class NeuralNetwork { + constructor () { + this.initialized = false + + // settings + this.verticesSkipStep = 2 // 2 + this.maxAxonDist = 8 // 8 + this.maxConnectionPerNeuron = 6 // 6 + + this.currentMaxSignals = 8000 + this.limitSignals = 12000 + this.particlePool = new ParticlePool(this.limitSignals) // *************** ParticlePool must bigger than limit Signal ************ + + this.signalMinSpeed = 0.035 + this.signalMaxSpeed = 0.065 + + // NN component containers + this.allNeurons = [] + this.allSignals = [] + this.allAxons = [] + + // axon + this.axonOpacityMultiplier = 1.0 + this.axonColor = 0x0099ff + this.axonGeom = new THREE.BufferGeometry() + this.axonPositions = [] + this.axonIndices = [] + this.axonNextPositionsIndex = 0 + + this.shaderUniforms = { + color: { type: 'c', value: new THREE.Color(this.axonColor) }, + opacityMultiplier: { type: 'f', value: 1.0 } + } + + this.shaderAttributes = { + opacityAttr: { type: 'f', value: [] } + } + + // neuron + this.neuronSize = 0.7 + this.spriteTextureNeuron = THREE.ImageUtils.loadTexture('sprites/electric.png') + this.neuronColor = 0x00ffff + this.neuronOpacity = 1.0 + this.neuronsGeom = new THREE.Geometry() + this.neuronMaterial = new THREE.PointCloudMaterial({ + map: this.spriteTextureNeuron, + size: this.neuronSize, + color: this.neuronColor, + blending: THREE.AdditiveBlending, + depthTest: false, + transparent: true, + opacity: this.neuronOpacity + }) + + // info api + this.numNeurons = 0 + this.numAxons = 0 + this.numSignals = 0 + + // initialize NN + this.initNeuralNetwork() + } + + initNeuralNetwork () { + // obj loader + const self = this + let loadedMesh, loadedMeshVertices + const loader = new THREE.OBJLoader() + + loader.load('models/brain_vertex_low.obj', function constructNeuralNetwork (loadedObject) { + loadedMesh = loadedObject.children[0] + loadedMeshVertices = loadedMesh.geometry.vertices + + // render loadedMesh + loadedMesh.material = new THREE.MeshBasicMaterial({ + transparent: true, + opacity: 0.05, + depthTest: false, + color: 0x0088ff, + blending: THREE.AdditiveBlending + }) + scene.add(loadedObject) + + self.initNeurons(loadedMeshVertices) + self.initAxons() + + self.initialized = true + + console.log('Neural Network initialized') + document.getElementById('loading').style.display = 'none' // hide loading animation when finish loading model + }) // end of loader + } + + initNeurons (inputVertices) { + for (let i = 0; i < inputVertices.length; i += this.verticesSkipStep) { + const pos = inputVertices[i] + const n = new Neuron(pos.x, pos.y, pos.z) + this.allNeurons.push(n) + this.neuronsGeom.vertices.push(n) + } + + // neuron mesh + this.neuronParticles = new THREE.PointCloud(this.neuronsGeom, this.neuronMaterial) + scene.add(this.neuronParticles) + } + + initAxons () { + const allNeuronsLength = this.allNeurons.length + for (let j = 0; j < allNeuronsLength; j++) { + const n1 = this.allNeurons[j] + for (let k = j + 1; k < allNeuronsLength; k++) { + const n2 = this.allNeurons[k] + // connect neuron if distance ... and limit connection per neuron to not more than x + if (n1 !== n2 && n1.distanceTo(n2) < this.maxAxonDist && + n1.connection.length < this.maxConnectionPerNeuron && + n2.connection.length < this.maxConnectionPerNeuron) { + const connectedAxon = n1.connectNeuronTo(n2) + this.constructAxonArrayBuffer(connectedAxon) + } + } + } + + // *** attirbute size must bigger than its content *** + const axonIndices = new Uint32Array(this.axonIndices.length) + const axonPositions = new Float32Array(this.axonPositions.length) + const axonOpacities = new Float32Array(this.shaderAttributes.opacityAttr.value.length) + + // transfer temp-array to arrayBuffer + transferToArrayBuffer(this.axonIndices, axonIndices) + transferToArrayBuffer(this.axonPositions, axonPositions) + transferToArrayBuffer(this.shaderAttributes.opacityAttr.value, axonOpacities) + + function transferToArrayBuffer (fromArr, toArr) { + for (let i = 0; i < toArr.length; i++) { + toArr[i] = fromArr[i] + } + } + + this.axonGeom.addAttribute('index', new THREE.BufferAttribute(axonIndices, 1)) + this.axonGeom.addAttribute('position', new THREE.BufferAttribute(axonPositions, 3)) + this.axonGeom.addAttribute('opacityAttr', new THREE.BufferAttribute(axonOpacities, 1)) + + // axons mesh + this.shaderMaterial = new THREE.ShaderMaterial({ + uniforms: this.shaderUniforms, + attributes: this.shaderAttributes, + vertexShader: document.getElementById('vertexshader-axon').textContent, + fragmentShader: document.getElementById('fragmentshader-axon').textContent, + blending: THREE.AdditiveBlending, + // depthTest: false, + transparent: true + }) + + this.axonMesh = new THREE.Line(this.axonGeom, this.shaderMaterial, THREE.LinePieces) + + scene.add(this.axonMesh) + } + + update () { + if (!this.initialized) { return } + + let n, ii + const currentTime = Date.now() + + // update neurons state and release signal + for (ii = 0; ii < this.allNeurons.length; ii++) { + n = this.allNeurons[ii] + + if (this.allSignals.length < this.currentMaxSignals - this.maxConnectionPerNeuron) { // currentMaxSignals - maxConnectionPerNeuron because allSignals can not bigger than particlePool size + if (n.recievedSignal && n.firedCount < 8) { // Traversal mode + // if (n.recievedSignal && (currentTime - n.lastSignalRelease > n.releaseDelay) && n.firedCount < 8) { // Random mode + // if (n.recievedSignal && !n.fired ) { // Single propagation mode + n.fired = true + n.lastSignalRelease = currentTime + n.releaseDelay = THREE.Math.randInt(100, 1000) + this.releaseSignalAt(n) + } + } + + n.recievedSignal = false // if neuron recieved signal but still in delay reset it + } + + // reset all neurons and when there is X signal + if (this.allSignals.length <= 0) { + for (ii = 0; ii < this.allNeurons.length; ii++) { // reset all neuron state + n = this.allNeurons[ii] + n.releaseDelay = 0 + n.fired = false + n.recievedSignal = false + n.firedCount = 0 + } + this.releaseSignalAt(this.allNeurons[THREE.Math.randInt(0, this.allNeurons.length)]) + } + + // update and remove signals + for (let j = this.allSignals.length - 1; j >= 0; j--) { + const s = this.allSignals[j] + s.travel() + + if (!s.alive) { + s.particle.free() + for (let k = this.allSignals.length - 1; k >= 0; k--) { + if (s === this.allSignals[k]) { + this.allSignals.splice(k, 1) + break + } + } + } + } + + // update particle pool vertices + this.particlePool.update() + + // update info for GUI + this.updateInfo() + } + + // add vertices to temp-arrayBuffer, generate temp-indexBuffer and temp-opacityArrayBuffer + constructAxonArrayBuffer (axon) { + this.allAxons.push(axon) + const vertices = axon.geom.vertices + const numVerts = vertices.length + + // &&&&&&&&&&&&&&&&&&&&&^^^^^^^^^^^^^^^^^^^^^ + // var opacity = THREE.Math.randFloat(0.001, 0.1); + for (let i = 0; i < numVerts; i++) { + this.axonPositions.push(vertices[i].x, vertices[i].y, vertices[i].z) + + if (i < numVerts - 1) { + const idx = this.axonNextPositionsIndex + this.axonIndices.push(idx, idx + 1) + + const opacity = THREE.Math.randFloat(0.002, 0.2) + this.shaderAttributes.opacityAttr.value.push(opacity, opacity) + } + + this.axonNextPositionsIndex += 1 + } + } + + releaseSignalAt (neuron) { + const signals = neuron.createSignal(this.particlePool, this.signalMinSpeed, this.signalMaxSpeed) + for (let ii = 0; ii < signals.length; ii++) { + const s = signals[ii] + this.allSignals.push(s) + } + } + + updateInfo () { + this.numNeurons = this.allNeurons.length + this.numAxons = this.allAxons.length + this.numSignals = this.allSignals.length + } + + updateSettings () { + this.neuronMaterial.opacity = this.neuronOpacity + this.neuronMaterial.color.setHex(this.neuronColor) + this.neuronMaterial.size = this.neuronSize + + this.shaderUniforms.color.value.set(this.axonColor) + this.shaderUniforms.opacityMultiplier.value = this.axonOpacityMultiplier + + this.particlePool.updateSettings() + } +} + +export function Brain (el = '') { + // Main ------------------------------------------------------------------ + + if (!Detector.webgl) { + Detector.addGetWebGLMessage() + document.getElementById('loading').style.display = 'none' // hide loading animation when finish loading model + } + + // let container, stats + // let camera, cameraCtrl, renderer + + // ---- scene + const container = document.getElementById('canvas-container') + const scene = window.scene = new THREE.Scene() + + // ---- camera + const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000) + // camera orbit control + const cameraCtrl = new THREE.OrbitControls(camera, container) + cameraCtrl.object.position.y = 150 + cameraCtrl.update() + + // ---- renderer + const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }) + renderer.setSize(window.innerWidth, window.innerHeight) + container.appendChild(renderer.domElement) + + // ---- stats + const stats = new Stats() + container.appendChild(stats.domElement) + + // ---- scene settings + const scene_settings = { + pause: false, + bgColor: 0x0d0d0f + } + + // Neural Net + const neuralNet = window.neuralNet = new NeuralNetwork() + // TODO + // scene.add(neuralNet.create()) + + // ---------- GUI ---------- + + const gui = new dat.GUI() + gui.width = 300 + + const gui_info = gui.addFolder('Info') + gui_info.add(neuralNet, 'numNeurons').name('Neurons') + gui_info.add(neuralNet, 'numAxons').name('Axons') + gui_info.add(neuralNet, 'numSignals', 0, neuralNet.limitSignals).name('Signals') + gui_info.autoListen = false + + const gui_settings = gui.addFolder('Settings') + gui_settings.add(neuralNet, 'currentMaxSignals', 0, neuralNet.limitSignals).name('Max Signals') + gui_settings.add(neuralNet.particlePool, 'pSize', 0.2, 2).name('Signal Size') + gui_settings.add(neuralNet, 'signalMinSpeed', 0.01, 0.1, 0.01).name('Signal Min Speed') + gui_settings.add(neuralNet, 'signalMaxSpeed', 0.01, 0.1, 0.01).name('Signal Max Speed') + gui_settings.add(neuralNet, 'neuronSize', 0, 2).name('Neuron Size') + gui_settings.add(neuralNet, 'neuronOpacity', 0, 1.0).name('Neuron Opacity') + gui_settings.add(neuralNet, 'axonOpacityMultiplier', 0.0, 5.0).name('Axon Opacity Mult') + gui_settings.addColor(neuralNet.particlePool, 'pColor').name('Signal Color') + gui_settings.addColor(neuralNet, 'neuronColor').name('Neuron Color') + gui_settings.addColor(neuralNet, 'axonColor').name('Axon Color') + gui_settings.addColor(scene_settings, 'bgColor').name('Background') + + gui_info.open() + gui_settings.open() + + function updateNeuralNetworkSettings () { + neuralNet.updateSettings() + } + + for (const i in gui_settings.__controllers) { + gui_settings.__controllers[i].onChange(updateNeuralNetworkSettings) + } + + function updateGuiInfo () { + for (const i in gui_info.__controllers) { + gui_info.__controllers[i].updateDisplay() + } + } + + // ---------- end GUI ---------- + + (function run () { + requestAnimationFrame(run) + renderer.setClearColor(scene_settings.bgColor, 1) + + if (!scene_settings.pause) { + neuralNet.update() + updateGuiInfo() + } + + renderer.render(scene, camera) + stats.update() + })() + + window.addEventListener('keypress', function (event) { + if (event.keyCode === 32) { // if spacebar is pressed + event.preventDefault() + scene_settings.pause = !scene_settings.pause + } + }) + + window.addEventListener('resize', function onWindowResize () { + const w = window.innerWidth + const h = window.innerHeight + camera.aspect = w / h + camera.updateProjectionMatrix() + renderer.setSize(w, h) + }, false) +}