/*
* Encog(tm) Core v0.1 - Javascript Version
* http://www.heatonresearch.com/encog/
* http://code.google.com/p/encog-java/
* Copyright 2008-2012 Heaton Research, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* For more information on Heaton Research copyrights, licenses
* and trademarks visit:
* http://www.heatonresearch.com/copyright
*/
ENCOG.namespace('ENCOG.GUI.Console');
ENCOG.namespace('ENCOG.GUI.CellGrid');
ENCOG.namespace('ENCOG.GUI.Drawing');
ENCOG.namespace('ENCOG.GUI.Agents2D');
ENCOG.namespace('ENCOG.GUI.TSP');
ENCOG.GUI.Console = function () {
'use strict'
};
ENCOG.GUI.Console.prototype =
{
consoleDiv:{},
textarea:{},
name:"Console",
write:function (str) {
'use strict';
this.textarea.value += (str);
this.textarea.scrollTop = this.textarea.scrollHeight;
},
writeLine:function (str) {
'use strict';
this.textarea.value += (str + '\n');
this.textarea.scrollTop = this.textarea.scrollHeight;
},
clear:function () {
'use strict';
this.textarea.value = "";
}
};
ENCOG.GUI.Console.create = function (id) {
'use strict';
var result = new ENCOG.GUI.Console();
result.consoleDiv = document.getElementById(id);
result.consoleDiv.innerHTML = '<textarea></textarea>';
result.textarea = result.consoleDiv.getElementsByTagName('textarea')[0];
return result;
};
ENCOG.GUI.CellGrid = function () {
'use strict'
};
ENCOG.GUI.CellGrid.prototype =
{
canvas:null,
drawingContext:null,
canvasDiv:null,
canvasWidth:null,
canvasHeight:null,
gridWidth:null,
gridHeight:null,
determineColor:null,
pointerDown:null,
pointerUp:null,
pointerMove:null,
pointerMode:0,
captureTouch:true,
outline:false,
NAME:"CellGrid",
render:function () {
var output, row, col, r, g, b, c;
this.drawingContext.strokeStyle = 'grey';
for (row = 0; row < this.gridHeight; row += 1) {
for (col = 0; col < this.gridWidth; col += 1) {
this.drawingContext.fillStyle = this.determineColor(row, col);
this.drawingContext.fillRect(col * this.pixW, row * this.pixH, this.pixW, this.pixH);
if (this.outline) {
this.drawingContext.strokeRect(col * this.pixW, row * this.pixH, this.pixW, this.pixW);
}
}
}
this.drawingContext.strokeStyle = "black";
},
ev_canvas:function (ev) {
var row, col;
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Opera
else if (ev.offsetX || ev.offsetX == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
switch (this.pointerMode) {
case ENCOG.GUI.CellGrid.MODE_XY:
row = ev._y;
col = ev._x;
break;
case ENCOG.GUI.CellGrid.MODE_CELL:
row = Math.floor(ev._y / this.pixH);
col = Math.floor(ev._x / this.pixW);
break;
case ENCOG.GUI.CellGrid.MODE_PCT:
row = ev._y / this.canvas.height;
col = ev._x / this.canvas.width;
break;
}
if (ev.type == 'mousedown' || ev.type == 'touchstart') {
if (this.pointerDown != null) {
this.pointerDown(row, col);
}
}
else if (ev.type == 'mouseup' || ev.type == 'touchend') {
if (this.pointerUp != null) {
this.pointerUp(row, col);
}
}
else if (ev.type == 'mousemove' || ev.type == 'touchmove') {
if (this.pointerMove != null) {
this.pointerMove(row, col);
}
if (this.captureTouch && ev.type == 'touchmove') {
ev.preventDefault();
}
}
},
clear:function () {
this.canvas.width = this.canvas.width;
}
};
ENCOG.GUI.CellGrid.MODE_XY = 0;
ENCOG.GUI.CellGrid.MODE_CELL = 1;
ENCOG.GUI.CellGrid.MODE_PCT = 2;
ENCOG.GUI.CellGrid.create = function (id, gridWidth, gridHeight, canvasWidth, canvasHeight) {
'use strict';
var result = new ENCOG.GUI.CellGrid();
result.canvasDiv = document.getElementById(id);
result.canvasWidth = canvasWidth;
result.canvasHeight = canvasHeight;
result.gridWidth = gridWidth;
result.gridHeight = gridHeight;
result.canvasDiv.innerHTML = '<canvas width="'
+ canvasWidth + '" height="' + canvasHeight + '">Browser not supported.</canvas>';
result.canvas = result.canvasDiv.getElementsByTagName('canvas')[0];
result.drawingContext = result.canvas.getContext('2d');
result.pixW = Math.floor(result.canvas.width / result.gridWidth);
result.pixH = Math.floor(result.canvas.height / result.gridHeight);
result.canvas.addEventListener('mousedown', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('mousemove', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('mouseup', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('touchstart', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('touchend', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('touchmove', function (e) {
result.ev_canvas(e);
}, true);
result.canvas.addEventListener('mouseout', function (e) {
result.ev_canvas(e);
}, true);
return result;
};
ENCOG.GUI.Drawing = function () {
'use strict'
};
ENCOG.GUI.Drawing.create = function (id, canvasWidth, canvasHeight) {
'use strict';
var result = new ENCOG.GUI.Drawing();
result.canvasDiv = document.getElementById(id);
result.canvasWidth = canvasWidth;
result.canvasHeight = canvasHeight;
result.canvasDiv.innerHTML = '<canvas width="'
+ canvasWidth + '" height="' + canvasHeight + '">Browser not supported.</canvas>';
result.canvas = result.canvasDiv.getElementsByTagName('canvas')[0];
result.drawingContext = result.canvas.getContext('2d');
// Attach the mousedown, mousemove and mouseup event listeners.
result.canvas.addEventListener('mousedown', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mousemove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseup', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchstart', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchend', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchmove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseout', function (e) {
result.ev_canvas(e)
}, true);
return result;
};
ENCOG.GUI.Drawing.prototype =
{
canvas:null,
drawingContext:null,
canvasDiv:null,
NAME:"Drawing",
canvasWidth:null,
canvasHeight:null,
started:false,
downsampleHeight:8,
downsampleWidth:5,
// Handle events to the canvas. This allows drawing to occur.
ev_canvas:function (ev) {
// Firefox
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Opera
else if (ev.offsetX || ev.offsetX == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
if (ev.type === 'mousedown') {
this.drawingContext.beginPath();
this.drawingContext.moveTo(ev._x, ev._y);
this.started = true;
}
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
else if (ev.type === 'mousemove') {
if (this.started) {
this.drawingContext.lineTo(ev._x, ev._y);
this.drawingContext.stroke();
}
}
// This is called when you release the mouse button.
else if (ev.type === 'mouseup') {
if (this.started) {
this.drawingContext.lineTo(ev._x, ev._y);
this.drawingContext.stroke();
this.started = false;
}
}
else if (ev.type === 'mouseout') {
if (this.started) {
this.drawingContext.lineTo(ev._x, ev._y);
this.drawingContext.stroke();
this.started = false;
}
}
else if (ev.type === 'touchstart') {
this.drawingContext.beginPath();
this.drawingContext.moveTo(ev._x, ev._y);
this.started = true;
}
else if (ev.type === 'touchend') {
if (this.started) {
this.started = false;
}
}
else if (ev.type === 'touchmove') {
if (this.started) {
this.drawingContext.lineTo(ev._x, ev._y);
this.drawingContext.stroke();
ev.preventDefault();
}
}
},
// Determine if the specificed horizontal line is clear.
// This is used to find the top and bottom cropping lines.
isHLineClear:function (row) {
var imgd = this.drawingContext.getImageData(0, row, this.canvas.width, 1);
var pix = imgd.data;
for (var i = 0; i < pix.length; i++) {
if (pix[i] > 0) {
return false;
}
}
return true;
},
// Determine if the specificed vertical line is clear.
// This is used to find the left and right cropping lines.
isVLineClear:function (col) {
var imgd = this.drawingContext.getImageData(col, 0, 1, this.canvas.height);
var pix = imgd.data;
for (var i = 0; i < pix.length; i++) {
if (pix[i] > 0) {
return false;
}
}
return true;
},
// Downsample the drawing area.
performDownSample:function () {
'use strict';
var top, bottom, left, right, cellWidth, cellHeight, result, resultIndex, row, col, pix, x, y, d, i, imgd;
// first find a bounding rectangle so that we can crop out unused space
top = 0;
while (this.isHLineClear(top) && top < this.canvas.height) {
top++;
}
bottom = this.canvas.height;
while (this.isHLineClear(bottom) && bottom > 0) {
bottom--;
}
left = 0;
while (this.isVLineClear(left) && left < this.canvas.width) {
left++;
}
right = this.canvas.width;
while (this.isVLineClear(right) && right > 0) {
right--;
}
if (bottom < top) {
result = ENCOG.ArrayUtil.allocate1D(this.downsampleHeight * this.downsampleWidth);
ENCOG.ArrayUtil.fillArray(result, 0, result.length, -1);
return result;
}
//uncomment this if you want to see the cropping rectangle
//drawingContext.strokeRect(left,top,right-left,bottom-top);
// now downsample
cellWidth = (right - left) / this.downsampleWidth;
cellHeight = (bottom - top) / this.downsampleHeight;
result = new Array();
resultIndex = 0;
// to downsample we are going to lay a "grid" over the drawing
// the grid's dimensions are defined by DOWNSAMPLE_HEIGHT and
// DOWNSAMPLE_WIDTH. Typically 5x8. If even one pixel is
// present in a grid square, it is downsampled to "black".
for (row = 0; row < this.downsampleHeight; row++) {
for (col = 0; col < this.downsampleWidth; col++) {
x = (cellWidth * col) + left;
y = (cellHeight * row) + top;
// obtain pixel data for the grid square
imgd = this.drawingContext.getImageData(x, y, cellWidth, cellHeight);
pix = imgd.data;
d = false;
// see if at least one pixel is "black"
for (i = 0; i < pix.length; i++) {
if (pix[i] > 0) {
d = true;
break;
}
}
// we are downsampling to an array where 1.0 is black, and -1.0 is white.
// this will be used for Euclidean distance measuring.
if (d) {
result[resultIndex++] = 1.0;
} else {
result[resultIndex++] = -1.0;
}
}
}
return result;
},
clear:function () {
this.canvas.width = this.canvas.width;
}
};
////////////////////////////////////
ENCOG.GUI.Agents2D = function () {
'use strict'
};
ENCOG.GUI.Agents2D.create = function (id, canvasWidth, canvasHeight) {
'use strict';
var result = new ENCOG.GUI.Agents2D();
result.canvasDiv = document.getElementById(id);
result.canvasWidth = canvasWidth;
result.canvasHeight = canvasHeight;
result.canvasDiv.innerHTML = '<canvas width="'
+ canvasWidth + '" height="' + canvasHeight + '">Browser not supported.</canvas>';
result.canvas = result.canvasDiv.getElementsByTagName('canvas')[0];
result.drawingContext = result.canvas.getContext('2d');
// Attach the mousedown, mousemove and mouseup event listeners.
result.canvas.addEventListener('mousedown', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mousemove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseup', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchstart', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchend', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchmove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseout', function (e) {
result.ev_canvas(e)
}, true);
return result;
};
ENCOG.GUI.Agents2D.prototype =
{
canvas:null,
drawingContext:null,
canvasDiv:null,
NAME:"Agents2D",
canvasWidth:null,
canvasHeight:null,
agents:null,
agentSize:10,
agentSpeed:5,
pointerDown:null,
pointerUp:null,
pointerMove:null,
captureTouch:true,
// Handle events to the canvas. This allows drawing to occur.
ev_canvas:function (ev) {
},
reset:function (count) {
'use strict';
this.agents = [];
for (var i = 0; i < count; i++) {
this.agents[i] = [
Math.floor(Math.random() * this.canvas.width),
Math.floor(Math.random() * this.canvas.height),
Math.floor(Math.random() * 360)];
}
this.render();
},
advance:function () {
'use strict';
var aff, r, r2, dy, dx, x, y, x2, y2, x3, y3, meanX, meanY, dx, dy, targetAngle, neighbors, nearest;
var separation, alignment, cohesion, turnAmount;
// loop over all agents
for (var i = 0; i < this.agents.length; i++) {
// Each particle is moving in a fixed speed in a direction
// specified by the 2nd array element of the particle.
// Adjust the X & Y (stored in the first/second array element)
// to reflect this movement.
r = this.agents[i][2] * (Math.PI / 180.0);
dy = Math.cos(r);
dx = Math.sin(r);
this.agents[i][0] += (dx * this.agentSpeed);
this.agents[i][1] += (dy * this.agentSpeed);
// Bound. Handle particles that fly off the edge of the universe.
// These particles will loop to the other side of the universe.
if (this.agents[i][0] < 0) {
this.agents[i][0] = this.canvas.width;
}
else if (this.agents[i][0] > this.canvas.width) {
this.agents[i][0] = 0;
}
if (this.agents[i][1] < 0) {
this.agents[i][1] = this.canvas.height;
}
else if (this.agents[i][1] > this.canvas.height) {
this.agents[i][1] = 0;
}
}
},
render:function () {
'use strict';
var aff, r, r2, dy, dx, x, y, x2, y2, x3, y3, meanX, meanY, dx, dy, targetAngle, neighbors, nearest, i;
var separation, alignment, cohesion, turnAmount;
// clear the canvas.
this.canvas.width = this.canvas.width;
// loop over all particles.
for (i = 0; i < this.agents.length; i++) {
// Draw the particle. Each particle is s small traingle that
// points in the direction that it is moving.
x = this.agents[i][0];
y = this.agents[i][1];
r = (this.agents[i][2] + 180 - 15) * (Math.PI / 180.0);
x2 = x + (Math.sin(r) * this.agentSize);
y2 = y + (Math.cos(r) * this.agentSize);
r2 = (this.agents[i][2] + 180 + 15) * (Math.PI / 180.0);
x3 = x + (Math.sin(r2) * this.agentSize);
y3 = y + (Math.cos(r2) * this.agentSize);
this.drawingContext.strokeStyle = "#000000";
this.drawingContext.beginPath();
this.drawingContext.moveTo(x2, y2);
this.drawingContext.lineTo(x, y);
this.drawingContext.lineTo(x3, y3);
this.drawingContext.closePath();
this.drawingContext.stroke();
}
},
// Plot gray lines to show an affinity group. This is a particle and
// all other particles that are neighbors. If two flocks have no lines
// between them, they have become independant.
plotGroup:function (idx, others) {
'use strict';
var x1 = this.agents[idx][0];
var y1 = this.agents[idx][1];
for (var i = 0; i < others.length; i++) {
var x2 = others[i][0];
var y2 = others[i][1];
this.drawingContext.strokeStyle = "#f0f0f0";
this.drawingContext.beginPath();
this.drawingContext.moveTo(x1, y1);
this.drawingContext.lineTo(x2, y2);
this.drawingContext.closePath();
this.drawingContext.stroke();
}
},
ev_canvas:function (ev) {
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Opera
else if (ev.offsetX || ev.offsetX == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
if (ev.type == 'mousedown' || ev.type == 'touchstart') {
if (this.pointerDown != null) {
this.pointerDown(ev._x, ev._y);
}
}
else if (ev.type == 'mouseup' || ev.type == 'touchend') {
if (this.pointerUp != null) {
this.pointerUp(ev._x, ev._y);
}
}
else if (ev.type == 'mousemove' || ev.type == 'touchmove') {
if (this.pointerMove != null) {
this.pointerMove(ev._x, ev._y);
}
if (this.captureTouch && ev.type == 'touchmove') {
ev.preventDefault();
}
}
}
};
////////////////////////////////////
ENCOG.GUI.TSP = function () {
'use strict'
};
ENCOG.GUI.TSP.create = function (id, canvasWidth, canvasHeight) {
'use strict';
var result = new ENCOG.GUI.TSP();
result.canvasDiv = document.getElementById(id);
result.canvasWidth = canvasWidth;
result.canvasHeight = canvasHeight;
result.canvasDiv.innerHTML = '<canvas width="'
+ result.canvasWidth + '" height="' + result.canvasHeight + '">Browser not supported.</canvas>';
result.canvas = result.canvasDiv.getElementsByTagName('canvas')[0];
result.drawingContext = result.canvas.getContext('2d');
// Attach the mousedown, mousemove and mouseup event listeners.
result.canvas.addEventListener('mousedown', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mousemove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseup', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchstart', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchend', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('touchmove', function (e) {
result.ev_canvas(e)
}, true);
result.canvas.addEventListener('mouseout', function (e) {
result.ev_canvas(e)
}, true);
return result;
};
ENCOG.GUI.TSP.prototype =
{
canvas:null,
drawingContext:null,
canvasDiv:null,
NAME:"TSP",
canvasWidth:null,
canvasHeight:null,
pointerDown:null,
pointerUp:null,
pointerMove:null,
captureTouch:true,
cities:null,
currentPath:null,
tspMargin:10,
// Handle events to the canvas. This allows drawing to occur.
ev_canvas:function (ev) {
},
reset:function (count) {
'use strict';
var marginWidth, marginHeight;
this.cities = [];
marginWidth = this.canvas.width - (this.tspMargin * 2);
marginHeight = this.canvas.height - (this.tspMargin * 2);
for (var i = 0; i < count; i++) {
this.cities[i] = new Array(
Math.floor(Math.random() * marginWidth) + this.tspMargin,
Math.floor(Math.random() * marginHeight) + this.tspMargin);
}
this.currentPath = this.generatePath();
this.render();
},
resetCircle: function(count) {
// reset the cities
this.cities = [];
var ratio = (2 * Math.PI) / count;
var marginWidth = this.canvas.width - (this.tspMargin * 2);
var marginHeight = this.canvas.height - (this.tspMargin * 2);
for (var i = 0; i < count; i++) {
var x = Math.floor(Math.cos(ratio * i) * (marginWidth / 2) + (marginWidth / 2)) + this.tspMargin;
var y = Math.floor(Math.sin(ratio * i) * (marginHeight / 2) + (marginHeight / 2)) + this.tspMargin;
this.cities[i] = [x, y];
}
this.currentPath = this.generatePath();
this.render();
},
pathDistance:function (path, i1, i2) {
return this.distance(this.cities[path[i1]], this.cities[path[i2]]);
},
distance:function (a1, a2) {
var result = 0;
for (var i = 0; i < a1.length; i++) {
var diff = a1[i] - a2[i];
result += diff * diff;
}
return Math.sqrt(result);
},
calculatePathLength:function (path) {
var result = 0;
for (var i = 0; i < path.length - 1; i++) {
result += this.distance(this.cities[path[i]], this.cities[path[i + 1]]);
}
return result;
},
generatePath:function () {
var taken = new Array(this.cities.length);
var path = new Array(this.cities.length);
for (var i = 0; i < this.cities.length; i++) {
taken[i] = false;
}
for (var i = 0; i < this.cities.length - 1; i++) {
var icandidate;
do
{
icandidate = Math.floor(Math.random() * path.length);
} while (taken[icandidate]);
path[i] = icandidate;
taken[icandidate] = true;
if (i == path.length - 2) {
icandidate = 0;
while (taken[icandidate]) {
icandidate++;
}
path[i + 1] = icandidate;
}
}
return path;
},
render:function () {
'use strict';
this.canvas.width = this.canvas.width;
for (var i = 0; i < this.cities.length; i++) {
this.drawingContext.fillStyle = "#0000FF";
this.drawingContext.beginPath();
this.drawingContext.arc(this.cities[i][0], this.cities[i][1], 5, 0, Math.PI * 2, true);
this.drawingContext.closePath();
this.drawingContext.fill();
}
for (var i = 0; i < this.cities.length - 1; i++) {
this.drawingContext.strokeStyle = "#000000";
this.drawingContext.beginPath();
this.drawingContext.moveTo(this.cities[this.currentPath[i]][0], this.cities[this.currentPath[i]][1]);
this.drawingContext.lineTo(this.cities[this.currentPath[i + 1]][0], this.cities[this.currentPath[i + 1]][1])
this.drawingContext.closePath();
this.drawingContext.stroke();
}
},
ev_canvas:function (ev) {
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Opera
else if (ev.offsetX || ev.offsetX == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
if (ev.type == 'mousedown' || ev.type == 'touchstart') {
if (this.pointerDown != null) {
this.pointerDown(ev._x, ev._y);
}
}
else if (ev.type == 'mouseup' || ev.type == 'touchend') {
if (this.pointerUp != null) {
this.pointerUp(ev._x, ev._y);
}
}
else if (ev.type == 'mousemove' || ev.type == 'touchmove') {
if (this.pointerMove != null) {
this.pointerMove(ev._x, ev._y);
}
if (this.captureTouch && ev.type == 'touchmove') {
ev.preventDefault();
}
}
}
};
Submit an article or tip